メニュー 閉じる

053. p5.jsでマウスに反応して回転するオブジェクトを変形してみる

もうちょっと違うことがしたかったのですが、エラー出まくりで一旦ここまで・・・。

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

var pos;

var cell_num;

var radius;

var axisx;
var axisy;
var axisz;

var line_system;

function setup () {

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

	pos = new p5.Vector ();

	cell_num = 20;

	radius = 10;

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

	drawing = false;

	line_system = new LineSystem (pos);

}

function draw () {

	background (0);

	translate (axisx, axisy, axisz);
	rotateY (frameCount / 10.0);

	pos.x = mouseX - width / 2.0;
	pos.y = mouseY - height / 2.0;
	pos.z = 0.0;

	line_system.update (pos);
	line_system.render ();
	line_system.numchk ();

}

function LineSystem () {

	var line_create = [];

	var prev_pts = [];
	var next_pts = [];

	var tmpx = 0.0;
	var tmpy = 0.0;
	var tmpz = 0.0;
	var targetx = 0.0;
	var targety = 0.0;
	var targetz = 0.0;

	var mouse_nx = 0.0;
	var mouse_ny = 0.0;
	var mouse_px = 0.0;
	var mouse_py = 0.0;
	var mouse_ds = 0.0;

	var angle = 0.0;

	var easing = 0.1;

	var col = color (random (100), 100, 100, 50);

	for (var i = 0; i <= cell_num; i++) {
		prev_pts[i] = new p5.Vector ();
	}

	for (var i = 0; i <= cell_num; i++) {
		tmpx = radius * cos (radians (angle));
		tmpy = mouseY - height / 2.0;
		tmpz = radius * sin (radians (angle));
		prev_pts[i].x = tmpx;
		prev_pts[i].y = tmpy;
		prev_pts[i].z = tmpz;
		angle += 360.0 / cell_num;
	}

	line_create.push (new LineCreate (prev_pts, radius, col));

	this.update = function (mouse_pos) {

		mouse_nx += (mouse_pos.x - mouse_px) * easing;
		mouse_ny += (mouse_pos.y - mouse_py) * easing;
		mouse_ds = mouseX;
		angle = 0;

		for (var i = 0; i <= cell_num; i++) {
			next_pts[i] = new p5.Vector ();
		}

		for (var i = 0; i <= cell_num; i++) {
			var x = prev_pts[i].x;
			var y = prev_pts[i].y;
			var z = prev_pts[i].z;
			tmpx = radius * cos (radians (angle));
			tmpy = mouseY - height / 2.0;
			tmpz = radius * sin (radians (angle));
			targetx = tmpx;
			targety = tmpy;
			targetz = tmpz;
			x += (targetx - x) * easing;
			y += (targety - y) * easing;
			z += (targetz - z) * easing;
			next_pts[i].x = x;
			next_pts[i].y = y;
			next_pts[i].z = z;
			angle += 360.0 / cell_num;
		}
		radius = map (mouse_ds, 0.0, width, 0.0, width * 2.0);
		col = color (random (100), 100, 100, 50);
		line_create.push (new LineCreate (next_pts, radius, col));
		prev_pts = next_pts;
		mouse_px = mouse_nx;
		mouse_py = mouse_ny;

	}

	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];
				var c = line_create[i].col;
				noFill ();
				stroke (c);
				strokeWeight (1);
				for (var j = 0; j <= cell_num; j++) {
					push ();
					translate (line_prev.points[j].x, line_prev.points[j].y, line_prev.points[j].z);
					box (map (mouseY, 0, height, 10.0, height / 10.0));
					translate (line_next.points[j].x, line_next.points[j].y, line_next.points[j].z);
					box (map (mouseY, 0, height, 10.0, height / 20.0));
					pop ();
				}
			}

		}

	}

	this.numchk = function () {

		if (line_create.length > 100) {
			line_create = subset (line_create, line_create.length - (100 - 1), 100);
		}

	}

}

function LineCreate (pts, r, c) {

	this.points = pts;
	this.radius = r;
	this.col = c;

}

 

 

Posted in p5.js , processing