1/fゆらぎ (その3)

はい、つづきました。

前回、前々回は以下を参照ください。

1/fゆらぎ その1：http://tryoutartprogramming.blogspot.jp/2015/10/1f-1.html
1/fゆらぎ その2：http://tryoutartprogramming.blogspot.jp/2015/10/1f-2.html


と、いうワケでようやく作っていこうかと思います。
その1の最後にも書きましたが、とりあえずJavaに慣れているから、今回は手っ取り早くProcessing(2.1.1)を使ってみます。

1. 素直に実装してみる

まずは前回の数式を素直に実装してみようかと思います。

ソースコード

float x = 0.1f;

void setup() {
  size(200, 200);
  background(0, 0, 0);
 
  frameRate(20);
}

void draw() {
  fill(0, 0, 0);
  rect(0,0,width, height);
 
  if(x < 0.5f) {
    x = x+2.0f*x*x;
  }
  else if(x >= 0.5f) {
    x = x-2.0f*(1.0f-x)*(1.0f-x);
  }
 
  fill(255, 36, 0, (255*x));
  rect(0,0,width, height);
}

実行結果

実行結果

おぉっ。
これだけでも何かそれっぽい。

でもどこかで見たけれど、確かに上端と下端に貼りつきやすい気がする。
この実行結果の例の場合は黒(下端)にちょっとより過ぎているような。。。
と、いう事でどこかのパクりではありますが、解決策を入れてみようかと思います。

2. 改良版

対策としては単純に上端および下端に近い値になった時、乱数で適当な値に変更してしまいます。
あと、炎を再現するとなると、真っ暗になるのもあれなので、ちょっとゲタ履かせます。

ソースコード

float x = 0.1f;

void setup() {
  size(200, 200);
  background(0, 0, 0, 255);
  frameRate(20);
}

void draw() {
  fill(20, 10, 0);
  rect(0, 0, width, height);
 
  if(x < 0.5f) {
    x = x+2.0f*x*x;
  }
  else if(x >= 0.5f) {
    x = x-2.0f*(1.0f-x)*(1.0f-x);
  }
  
  if((x < 0.005) || (x > 0.995)) {
    x = random(1.0);
  }
  
  x = x * 0.7 + 0.3f;
 
  fill(255, 36, 0, (255*x));
  rect(0, 0, width, height);
}

実行結果

実行結果

おぉっいいね。いい感じ。
形はまったく炎っぽくないけど、色の変化のゆらゆら感はなかなかではないだろうか。


と、いうわけで、3回に渡って1/fゆらぎの実装をしてみましたが、丸や四角なんかよりも、もっと地味な結果になりました。3回にも渡ってやるほどのものか？と言われちゃいそうですが、なんとなくそれっぽい感じのモノがとりあえず出来たので、個人的には満足です。最初だし。

これをスマホで表示して、かぼちゃの中に放り込めばジャックオーランタンが出来上がるかも？