メニュー 閉じる

026. p5.jsで回転する空間内に線をドローイングしてみる

X軸で回転している空間にマウスドラッグで線を描きます。画面上のピクセルと、3D空間上のピクセルを近似することで、画面に描いている線がどんどん3Dになっていきます。

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

var rotx;
var roty;
var rotz;

var axisx;
var axisy;
var axisz;

var line_system;

function setup () {

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

	rotx = 0.0;
	roty = 0.0;
	rotz = 0.0;

	axisx = 0;
	axisy = 0;
	axisz = 0.0;

	drawing = false;

	line_system = new LineSystem ();

}

function draw () {

	background (0);

	translate (axisx, axisy, axisz);
	rotateX (rotx);
	rotateY (roty);
	rotateZ (rotz);

	rotx += 0.06;
	roty += 0.00;
	rotz += 0.00;

	line_system.update ();
	line_system.render ();

	strokeWeight (2);
	stroke (255, 0, 0);
	line (-960, 0, 0, 960, 0, 0);
	stroke (0, 255, 0);
	line (0, -540, 0, 0, 540, 0);

}

function mousePressed () {

	drawing = true;
	line_system = [];
	line_system = new LineSystem ();

}

function mouseReleased () {

	drawing = false;

}

function LineSystem () {

	var line_create = [];

	var x = (mouseX - (width / 2)) * cos (roty);
	var y = (mouseY - (height / 2)) * cos (rotx);
	var z = (mouseX - (width / 2)) * cos ((PI / 2) - roty) - (mouseY - (height / 2)) * cos ((PI / 2) - rotx);

	line_create.push (new LineCreate (x, y, z));

	var targetx = 0.0;
	var targety = 0.0;
	var targetz = 0.0;

	easing = 0.1;

	create = true;

	this.update = function () {

		targetx = (mouseX - (width / 2)) * cos (roty);
		targety = (mouseY - (height / 2)) * cos (rotx);
		targetz = (mouseX - (width / 2)) * cos ((PI / 2) - roty) - (mouseY - (height / 2)) * cos ((PI / 2) - rotx);
		x += (targetx - x) * easing;
		y += (targety - y) * easing;
		z += (targetz - z) * easing;
		if (drawing == true) {
			line_create.push (new LineCreate (x, y, z));
		}

	}

	this.render = function () {

		for (var i = 0; i < line_create.length; i++) {
			if (i > 0) {
				var line_prev = line_create[i - 1];
				var line_next = line_create[i];
				stroke (255, 255, 255);
				strokeWeight (dist (line_prev.x, line_prev.y, line_prev.z, line_next.x, line_next.y, line_next.z) / 4.0);
				line (line_prev.x, line_prev.y, line_prev.z, line_next.x, line_next.y, line_next.z);
			}
		}

	}

}

function LineCreate (ax, ay, az) {

	this.x = ax;
	this.y = ay;
	this.z = az;

}

 

 

Posted in p5.js , processing