メニュー 閉じる

075. p5.jsで無限に続くトンネルの中を走り続けてみる

カラフルなトンネルの中をひたすら走り続ける。

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

var line_num;
var box_num;

var px, py, pz;
var dx, dy, dz;

var ampx, ampy, ampz;

var pn_time;

var offsetx;
var offsety;
var offsetz;

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

var lines = [];
var boxes = [];

function setup () {

	createCanvas (windowWidth, windowHeight, WEBGL);
	colorMode (HSB, 256);
	background (60);

	line_num = 100;
	box_num = 120;

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

	px = offsetx;
	py = offsety;
	pz = offsetz;

	ampx = 0.0;
	ampy = 0.0;
	ampz = 4000.0;

	pn_time = 0.0;

}

function draw () {

	background (60);

	pz -= 60.0;
	px = ampz * noise (pz / 200000.0, pn_time);
	py = 0.0;

	dx = px + random (-1000, 1000);
	dy = py + random (-1000, 1000);
	dz = pz;

	pn_time += 0.01;

	lines.push (new LineObject (px, py, pz, dx, dy, dz));

	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 pcamx = lines[lines.length - 40].px;
		var pcamy = lines[lines.length - 40].py;
		var pcamz = lines[lines.length - 40].pz;

		var ncamx = lines[lines.length - 20].px;
		var ncamy = lines[lines.length - 20].py;
		var ncamz = lines[lines.length - 20].pz;

		camera (pcamx + offsetx, pcamy + offsety - 60, pcamz + offsetz,
				ncamx + offsetx, ncamy + offsety - 60, ncamz + offsetz,
				0.0, 1.0, 1.0);

		translate (tlx, tly, tlz);

		for (var i = 0; i < lines.length - 1; i++) {
			if (i > 0) {
				stroke (180);
				strokeWeight (0.8);
				noFill ();
				stx = lines[i].px;
				sty = lines[i].py;
				stz = lines[i].pz;
				enx = lines[i - 1].px;
				eny = lines[i - 1].py;
				enz = lines[i - 1].pz;
				dtx = lines[i].dx;
				dty = lines[i].dy;
				dtz = lines[i].dz;
				beginShape ();
				vertex (stx - 10, sty, stz);
				vertex (enx - 10, eny, enz);
				vertex (enx + 10, eny, enz);
				vertex (stx + 10, sty, stz);
				endShape ();
			}
		}

		var c = color (random (256), 255, 255);

		boxes.push (new BoxObject (px - 200, py - 100, pz, 0, 50, 200, 40, c));
		boxes.push (new BoxObject (px, py - 200, pz, 0, 450, 100, 40, c));
		boxes.push (new BoxObject (px + 200, py - 100, pz, 0, 50, 200, 40, c));

		for (var i = 0; i < boxes.length; i++) {
			boxes[i].render ();
		}

		if (boxes.length > box_num) {
			for (var i = 0; i < 2; i++) {
				boxes = subset (boxes, boxes.length - (box_num - 1), box_num);
			}
		}

	}
	
}

function LineObject (ipx, ipy, ipz, idx, idy, idz) {

	this.px = ipx;
	this.py = ipy;
	this.pz = ipz;
	this.dx = idx;
	this.dy = idy;
	this.dz = idz;

}

function BoxObject (x, y, z, a, sx, sy, sz, c) {

	var alpha = a;

	var box_sizex = sx;
	var box_sizey = sy;
	var box_sizez = sz;
	var box_locx = x;
	var box_locy = y;
	var box_locz = z;

	var tmp = 1;

	var col = c;

	this.render = function () {

		alpha += 3.2;

		tmp = lightness (col) * (alpha * 0.04);

		fill (color (hue (col), saturation (col), tmp), alpha * 1.8);
		stroke (60);
		strokeWeight (0.5);

		push ();
		translate (box_locx, box_locy, box_locz);
		box (box_sizex, box_sizey, box_sizez);
		pop ();

	}

}

 

Posted in p5.js , processing