メニュー 閉じる

018. p5.jsで空間内に曲がりくねった道を描いてみる

前回のベジェ曲線の仕組みとは違いますが、ひとまず曲線の道を描きながらカメラで追います。

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

var line_num;

var m, n;

var px, py;

var t, u, v;
var w0, w1, w2, w3;
var qx0, qy0, qx1, qy1, qx2, qy2, qx3, qy3;

var c_area;
var c_posx;
var c_posy; 

var offsetx;
var offsety;
var offsetz;

var tlx, tly, tlz;
var stx, sty, stz;
var enx, eny, enz;

var lines = [];

function setup () {

	createCanvas (windowWidth, windowHeight, WEBGL);
	colorMode (RGB, 256);
	background (0);

	line_num = 500;

	m = 0;
	n = 0;
	t = 0;

	c_area = 2000;
	c_posx = width / 2;
	c_posy = height / 2;

	qx0 = random (0, 1) * c_area - (c_area / 2);
	qy0 = random (0, 1) * c_area - (c_area / 2);
	qx1 = random (0, 1) * c_area - (c_area / 2);
	qy1 = random (0, 1) * c_area - (c_area / 2);
	qx2 = random (0, 1) * c_area - (c_area / 2);
	qy2 = random (0, 1) * c_area - (c_area / 2);
	qx3 = random (0, 1) * c_area - (c_area / 2);
	qy3 = random (0, 1) * c_area - (c_area / 2);

	u = t;
	v = 1 - u;
	w0 = v * v * v;
	w1 = 3.0 * u * v * v;
	w2 = 3.0 * u * u * v;
	w3 = u * u * u;

	offsetx = width / 2;
	offsety = height / 2;
	offsetz = 500;

	px = offsetx;
	py = offsety;

}

function draw () {

	background (200);

	m += 1;
	n += 1;

	t += 0.01;

	if (n == 100) {
		n = 0;
		t = 0;
		qx0 = px;
		qy0 = py;
		qx1 = qx0 + (qx3 - qx2);
		qy1 = qy0 + (qy3 - qy2);
		qx2 = random (0, 1) * c_area - (c_area / 2);
		qy2 = random (0, 1) * c_area - (c_area / 2);
		qx3 = random (0, 1) * c_area - (c_area / 2);
		qy3 = random (0, 1) * c_area - (c_area / 2);
	}

	u = t;
	v = 1 - u;
	w0 = v * v * v;
	w1 = 3.0 * u * v * v;
	w2 = 3.0 * u * u * v;
	w3 = u * u * u;

	px = (qx0 * w0) + (qx1 * w1) + (qx2 * w2) + (qx3 * w3);
	py = (qy0 * w0) + (qy1 * w1) + (qy2 * w2) + (qy3 * w3);

	lines.push (new LineObject (px, py));

	if (lines.length > line_num) {
		lines = subset (lines, lines.length - (line_num - 1), line_num);
	}

	if (lines.length > 80){

		tlx = offsetx;
		tly = offsety;
		tlz = offsetz;

		var camx = lines[lines.length - 70].px;
		var camy = lines[lines.length - 70].py;

		camera (camx + offsetx, tly - 50, camy + offsetz,
				px + offsetx, tly - 50, py + offsetz,
				0.0, 1.0, 0.0);

		translate (tlx, tly, tlz);

		for (var i = 0; i < lines.length - 1; i++) {
			if (i > 0) {
				stroke (100);
				strokeWeight (1);
				stx = lines[i].px;
				sty = 0;
				stz = lines[i].py;
				enx = lines[i - 1].px;
				eny = 0;
				enz = lines[i - 1].py;
				beginShape ();
				vertex (stx - 10, sty, stz);
				vertex (enx - 10, eny, enz);
				vertex (enx + 10, eny, enz);
				vertex (stx + 10, sty, stz);
				endShape ();
			}
		}

	}

}


function LineObject (x, y) {

	this.px = x;
	this.py = y;

}

 

Posted in p5.js , processing