メニュー 閉じる

038. p5.jsでマウスを重心にしたパーティクルを3D空間に描いてみる

019のパーティクルの動きを3Dに変換してみました。

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

var p_num;

var p_set = [];

var rad = 0.0;

function setup () {

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

	p_num = 200;

	for (var i = 0; i < p_num; i++) {
		p_set.push (new Particles (random (255)));
	}

}

function draw () {

	background (255);

	for (var i = 0; i < p_set.length; i++) {
		p_set[i].update ();
		p_set[i].render ();
	}

	rad += 0.1;

}

function Particles (col) {

	var mass = 0;
	var px = random (-width / 2, width / 2);
	var py = random (-height / 2, height / 2);
	var pz = 0;
	var vx = random (-10, 10);
	var vy = random (-10, 10);
	var ax = 0;
	var ay = 0;
	var sc = 1;
	var distance = 0;

	this.update = function () {

		mass = random (1.0, 80.0);
		ax = -1 * vx * 0.4;
		ay = -1 * vy * 0.4;
		ax += ((mouseX - width / 2) - px) * 0.1;
		ay += ((mouseY - height / 2) - py) * 0.1;

		distance = dist (mouseX - width / 2, mouseY - height / 2, px, py);

		sc = (distance / 40);

		vx += ax / mass * 0.4;
		vy += ay / mass * 0.4;
		px += vx;
		py += vy;

	}

	this.render = function () {

		stroke (40);
		strokeWeight (1);
		fill (col);
		push ();
		translate (px, py, pz);
		rotateX (rad);
		rotateY (rad);
		box (4 * sc);
		pop ();

	}

}

 

 

Posted in p5.js , processing