メニュー 閉じる

028. p5.jsでベジェ曲線の描画を拡張していろんな線を描いてみる

017のベジェ曲線にp5.scribble.jsを適用して線を再描画してみました。p5.scribble.jsは、p5.jsの描画を手書き風にするライブラリですが、ベジェ曲線に用いると面白い結果になりました。

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

var scribble = new Scribble();

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);
	colorMode (HSB, 256);
	background (0);

	scribble.bowing    = 5.0;
	scribble.roughness = 9.0;

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

	step_flag = false;
	draw_flag = false;

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

	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 () {

	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) {

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

				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);
							stroke (col_val, 255, 255);
							scribble.scribbleLine (bzx[j][i][count - 1], bzy[j][i][count - 1], bzx[j][i][count], bzy[j][i][count]);
						}
					}
					if (count == int (1 / diffs) - 1) {
						if (i > j) {
							col_val = map (j, 0, order, 0, 220);
							stroke (col_val, 255, 255);
							scribble.scribbleLine (bzx[j][i][count], bzy[j][i][count], cpx[i - j - 1], cpy[i - j - 1]);
						}
					}
				}

			}
			
		}

		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);
		cpx[i] = random (-1200, width + 1200);
		cpy[i] = random (-1200, height + 1200);
		if (i > 0) {
			stroke (255, 80);
			line (cpx[i], cpy[i], cpx[i - 1], cpy[i - 1]);
		}
	}

	step_flag = true;

}

 

 

Posted in p5.js , processing