メニュー 閉じる

015. p5.jsで再帰関数を使ったフラクタル画面分割を試してみる

フラクタルの基本である一つの作業の結果に同じ作業を繰り返し続けることで、様々な結果が永遠に作られる・・・。というのは無理ですが、ある程度回数を決めて作ることは簡単です。まず、画面を適当な割合で2等分、2等分された四角をさらに適当に2等分、出来た四角を2等分、16回ほど繰り返すとこんな感じになりました。倍々になっていくので、分割された本人が次の分割を呼び出す再帰関数になります。

http://www.velvet-number.com/p5_test/test010/

var step = 16;

function setup () {

	pixelDensity (displayDensity ());
	createCanvas (windowWidth, windowHeight);
	noFill ();
	stroke (255);
	strokeWeight (1);
	noLoop ();

	divide (0, 0, width, height, step);

}

function draw () {

}

function divide (x, y, w, h, n) {

	if (n == step) {
		fill (255);
	} else {
		fill (random (255), random (255), random (255));
	}

	rect (x, y, w, h);

	var flag = 0;
	var new_w01 = 0;
	var new_h01 = 0;
	var new_w02 = 0;
	var new_h02 = 0;
	var new_x01 = 0;
	var new_y01 = 0;
	var new_x02 = 0;
	var new_y02 = 0;

	if (n > 1) {

		if (w == h) {
			flag = int (round (random (2)));
		}
		if (w > h || flag == 1) {
			new_w01 = random (w);
			new_h01 = h;
			new_w02 = abs (w - new_w01);
			new_h02 = h;
			new_x01 = x;
			new_y01 = y;
			new_x02 = x + new_w01;
			new_y02 = y;
		}
		if (h > w || flag == 2) {
			new_w01 = w;
			new_h01 = random (h);
			new_w02 = w;
			new_h02 = abs (h - new_h01);
			new_x01 = x;
			new_y01 = y;
			new_x02 = x;
			new_y02 = y + new_h01;
		}

		n -= 1;

		divide (new_x01, new_y01, new_w01, new_h01, n);
		divide (new_x02, new_y02, new_w02, new_h02, n);

	}

}

 

Posted in p5.js , processing