メニュー 閉じる

037. p5.jsで3D空間内に木を描いてBOXの葉っぱを付けてみる

006での木を3D空間に描画してみました(1本だけですが)。枝の分岐点にBOXを配置して葉っぱのように。
画面クリックで再描画します。

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

var step = 8;
var count = 0;

var tr_scale;
var tr_angle;
var tr_length;
var tr_startd;
var tr_startx;
var tr_starty;
var tr_startz;
var offset = -90;

var nx = [];
var ny = [];
var nz = [];
var px = [];
var py = [];
var pz = [];

var deg = 0.0;

function setup () {
	
	pixelDensity (displayDensity ());
	createCanvas (windowWidth, windowHeight, WEBGL);
	background (255);
	colorMode (RGB, 255, 255, 255, 100);

	tr_scale = 0.998;
	tr_angle = 36.0;
	tr_length = 300.0;
	tr_startd = 0.0;
	tr_startx = 0.0;
	tr_starty = 0.0;
	tr_startz = 0.0;

	CreateTree (tr_startx, tr_starty, tr_startz, tr_length, tr_startd, step);

}

function draw () {

	background (255);

	translate (0, height / 2);
	rotateY (radians (deg));

	for (var i = 0; i < count; i++) {

		stroke (0, int (80000 / abs (ny[i])));
		strokeWeight (int (1000 / abs (ny[i])));

		push ();
		translate (nx[i], ny[i], nz[i]);
		box (10);
		pop ();

		line (nx[i], ny[i], nz[i], px[i], py[i], pz[i]);

	}

	deg += 1;

}

function CreateTree (x01, y01, z01, len, deg, n) {

	var x02 = x01 + len * cos (radians (deg + offset));
	var y02 = y01 + len * sin (radians (deg + offset));
	var z02 = z01 + random (-30, 30);

	SavePoints (x02, y02, z02, x01, y01, z01);

	if (n > 0) {

		var deg01 = random (-tr_angle, tr_angle);
		var scl01 = random (random (10, 20), len * tr_scale);
		CreateTree (x02, y02, z02, scl01, deg + deg01, n - 1);

		var deg02 = random (-tr_angle, tr_angle);
		var scl02 = random (random (10, 20), len * tr_scale);
		CreateTree (x02, y02, z02, scl02, deg + deg02, n - 1);

	}

}

function SavePoints (x02, y02, z02, x01, y01, z01) {

	nx[count] = x02;
	ny[count] = y02;
	nz[count] = z02;
	px[count] = x01;
	py[count] = y01;
	pz[count] = z01;

	count += 1;

}

function mouseReleased () {

	count = 0;

	nx = [];
	ny = [];
	nz = [];
	px = [];
	py = [];
	pz = [];

	CreateTree (tr_startx, tr_starty, tr_startz, tr_length, tr_startd, step);

}

 

 

Posted in p5.js , processing