メニュー 閉じる

130. p5.jsでマウスを重心にした3DパーティクルBOX改訂版

038の描画をちょっと修正。

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

var p_num;

var p_set = [];

var rad = 0.0;

var targetx;
var targety;

var r_val = 0;
var g_val = 0;
var b_val = 0;

function setup () {

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

	p_num = 200;

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

}

function draw () {

	background (0);

	ambientLight (10, 10, 120);
  	pointLight (r_val, g_val, b_val, 2000.0, 0.0, 2000.0);
  	pointLight (r_val, g_val, b_val, -2000.0, 0.0, -2000.0);
  	pointLight (r_val, g_val, b_val, 0.0, 2000.0, 2000.0);
  	pointLight (r_val, g_val, b_val, 0.0, -2000.0, -2000.0);
  	pointLight (r_val, g_val, b_val, 2000.0, 0.0, 2000.0);
  	pointLight (r_val, g_val, b_val, -2000.0, 0.0, -2000.0);
  	pointLight (r_val, g_val, b_val, 0.0, 2000.0, 2000.0);
  	pointLight (r_val, g_val, b_val, 0.0, -2000.0, -2000.0);

  	camera (0.0, 0.0, -1000.0,
			0.0, 0.0, 0.0,
			0.0, 1.0, 0.0);

  	targetx = mouseX;
  	targety = mouseY;

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

	rad += 0.01;

	r_val = map (targetx, 0.0, width, 0, 255);
	g_val = map (targety, 0.0, height, 0, 255);
	b_val += 1;

	if (b_val > 255) {
		b_val = 0;
	}

}

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.16;
		ay += ((mouseY - height / 2) - py) * 0.16;

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

		sc = (distance / 20);

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

	}

	this.render = function () {

		noStroke ();
		specularMaterial (255);
		push ();
		translate (-px, py, pz);
		rotateX (rad);
		rotateY (rad);
		box (4 * sc);
		pop ();

	}

}

 

Posted in p5.js