016. p5.jsでベジェ曲線のベースになる直線をたくさん描いてみる

適当な3点を選んで、各点への線分を分割して、その点から別の点へ線を描くと面白い形になります。

http://www.velvet-number.com/p5_test/test011/index01.html

3点の方がわかりやすいかもしれません。

http://www.velvet-number.com/p5_test/test011/index02.html

var order;
var count;
var col_num;

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

var step_flag;
var draw_flag;

function setup () {

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

	order = 60;
	count = 0.0;
	steps = 0.0;
	diffs = 0.005;

	step_flag = false;
	draw_flag = false;

	fill (255);
	noStroke ();
	textSize (20);
	textAlign (CENTER, CENTER);
	text ("click the screen", width / 2, height / 2);

}

function draw () {

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

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

			tempx[i] = [];
			tempy[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) {

				stroke (255, 40);
				strokeWeight (0.5);
				line (tempx[i - 1][count], tempy[i - 1][count], tempx[i][count], tempy[i][count]);

			}
			
		}

		steps += diffs;
		count += 1;

	} else {

		step_flag = false;

		fill (255);
		noStroke ();
		textSize (20);
			textAlign (CENTER, CENTER);
	text ("click the screen", width / 2, height / 2);

	}

}

function mouseReleased () {

	background (0);

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

	for (var i = 0; i < order; i++) {
		cpx[i] = random (width);
		cpy[i] = random (height);
	}

	step_flag = true;

}