メニュー 閉じる

046. p5.jsで描画パターンを持った軌跡上にBOXと線を描いてみる

004の描画パターンを3D空間上に描いてみます。3D用にだいぶ線の数を減らしたり、描き方を変更しています。

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

var point_list = [];

var point_count;

var point_num = 500;

var mx, my, mz;
var amp;
var rad;

var offset01;
var offset02

var dragging;

function setup () {

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

	point_count = 0;
	tmp_count = 0;

	rad = 0.0;

	offset01 = 0.0;

	dragging = false;

}

function draw () {

	background (255)

	amp = map (noise (offset01), 0.0, 1.0, 0.0, 200.0);
	mx = (mouseX - width / 2) + amp * cos (rad);
	my = (mouseY - height / 2) + amp * sin (rad);
	mz = map (amp, 0.0, 200.0, -2000.0, 2000.0);
	point_list.push (new p5.Vector (mx, my, mz));

	rotateY (frameCount / 100);

	strokeWeight (1);
	noFill ();

	offset02 = 0.0

	for (var i = 0; i < point_count; i++) {
		var r = map (noise (offset02), 0.0, 1.0, 0.0, 100.0);
		var p01 = point_list[i];
		var p02 = point_list[point_count - 1];
		stroke (0, 40);
		line (p01.x, p01.y, p01.z, p02.x, p02.y, p02.z);
		stroke (0, 80);
		push ();
		translate (p01.x, p01.y, p01.z);
		box (r);
		pop ();
		offset02 += 0.01;
	}

	if (point_count > point_num) {
		point_count = 0;
		point_list = subset (point_list, point_list.length - (point_num - 1), point_num);
	}

	point_count = point_list.length;
	rad += 0.1;
	offset01 += 0.01;

}

 

 

Posted in p5.js , processing