メニュー 閉じる

035. p5.jsで3D空間内にベジェ曲線の軌跡アニメーションを描いてみる

017のベジェ曲線を3D空間内にプロットして、その軌跡をラインやBOXが動くアニメーションにしてみました。

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

var order;
var count;
var col_num;

var steps;
var diffs;
var cpx = [];
var cpy = [];
var tempx = [];
var tempy = [];
var bzx = [];
var bzy = [];
var col_val;

var step_flag;
var draw_flag;

function setup () {

	pixelDensity (displayDensity ());
	createCanvas (windowWidth, windowHeight, WEBGL);
	colorMode (HSB, 256);
	background (0);

	order = 24;
	count = 0.0;
	steps = 0.0;
	diffs = 0.01;

	step_flag = false;
	draw_flag = false;

	for (var i = 0; i < order; i++) {
		tempx[i] = [];
		tempy[i] = [];
		bzx[i] = [];
		bzy[i] = [];
		for (var j = 0; j < order; j++) {
			bzx[i][j] = [];
			bzy[i][j] = [];
		}
	}

}

function draw () {

	background (0, 0, 255);

	camera (mouseX, mouseY, 100.0,
			width / 2, height / 2, 0.0,
			0.0, 1.0, 0.0);

	if (step_flag == true && count < int (1 / diffs)) {

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

			tempx[i][count] = (cpx[i + 1] * (1 - steps)) + (cpx[i] * steps);
			tempy[i][count] = (cpy[i + 1] * (1 - steps)) + (cpy[i] * steps);

			if (i > 0) {

				for (var j = 0; j < order; j++) {
					if (j == 0) {
						bzx[j][i][count] = (tempx[i][count] * (1 - steps)) + (tempx[i - 1][count] * steps);
						bzy[j][i][count] = (tempy[i][count] * (1 - steps)) + (tempy[i - 1][count] * steps);
					} else {
						bzx[j][i][count] = (bzx[j - 1][i][count] * (1 - steps)) + (bzx[j - 1][i - 1][count] * steps);
						bzy[j][i][count] = (bzy[j - 1][i][count] * (1 - steps)) + (bzy[j - 1][i - 1][count] * steps);
					}
					if (count > 0) {
						if (i > j) {
							col_val = map (j, 0, order, 0, 220);
							fill (col_val, 255, 255);
							noStroke ();
							push ();
							translate (bzx[j][i][count - 1] + 10, bzy[j][i][count - 1] + 10, random (-40, 40));
							box (4);
							pop ();
						}
					}
					if (count == int (1 / diffs) - 1) {
						if (i > j) {
							col_val = map (j, 0, order, 0, 220);
							fill (col_val, 255, 255);
							noStroke ();
							push ();
							translate (bzx[j][i][count] + 10, bzy[j][i][count] + 10, random (-40, 40));
							box (4);
							pop ();
						}
					}
					if (count > 0) {
						if (i > j) {
							col_val = map (j, 0, order, 0, 220);
							noFill ();
							stroke (col_val, 255, 255);
							strokeWeight (5);
							line (bzx[j][i][count - 1], bzy[j][i][count - 1], 0, bzx[j][i][count], bzy[j][i][count], 0);
						}
					}
					if (count == int (1 / diffs) - 1) {
						if (i > j) {
							col_val = map (j, 0, order, 0, 220);
							noFill ();
							stroke (col_val, 255, 255);
							strokeWeight (5);
							line (bzx[j][i][count], bzy[j][i][count], 0, cpx[i - j - 1], cpy[i - j - 1], 0);
						}
					}
				}

			}
			
		}

		steps += diffs;
		count += 1;

	} else {

		step_flag = false;

		newline ();

	}

}

function newline () {

	count = 0.0;
	steps = 0.0;
	cpx = [];
	cpy = [];

	for (var i = 0; i < order; i++) {
		cpx[i] = random (width);
		cpy[i] = random (height);
		if (i > 0) {
			noFill ();
			stroke (255, 80);
			line (cpx[i], cpy[i], 0, cpx[i - 1], cpy[i - 1], 0);
		}
	}

	step_flag = true;

}

 

Posted in p5.js , processing