メニュー 閉じる

042. p5.jsで星が中心から粉々に爆発するような感じを作ってみる

画面の中心から爆発した星の破片が全方向に飛び散るようにしてみました。マウスを動かすと爆発途中でも視点を変えることができます。クリックで再爆発。

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

var stars = [];

var count = -400;

function setup () {

	pixelDensity (displayDensity ());
	createCanvas (windowWidth, windowHeight, WEBGL);
	colorMode (HSB, 100);
	background (0);

}

function draw () {

	background (0, 0, 0);

  	camera (0.0, 0.0, count,
			0.0, 0.0, 0.0,
			0.0, 1.0, 0.0);

	rotateX (map (mouseY, 0.0, height, 0.0, PI));
	rotateZ (map (mouseX, 0.0, width, -PI, PI));

	if (frameCount == 10) {
		for (var i = 0; i < 3000; i++) {
			stars.push (new StarCreate (0.0, 0.0, 0.0, random (100)));
		}
	}

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

	count -= 0.5;

}

function StarCreate (dx, dy, dz, col) {

	this.location = new p5.Vector (dx, dy, dz);
	this.velocity = new p5.Vector (0.0, 0.0, 0.0);
	this.acceleration = new p5.Vector (0.0, 0.0, 0.0);
	this.direction = random (-PI, PI);
	this.init_force = new p5.Vector (cos (this.direction), sin (this.direction), random (-1.0, 1.0));
	this.init_force.mult (random (10.0, 400.0));

	this.update = function () {

		this.init_force.mult (0.2);
		this.acceleration.add (this.init_force);
		this.velocity.add (this.acceleration);
		this.velocity.mult (0.98);
		this.location.add (this.velocity);
		this.acceleration.mult (0.0);

	}

	this.render = function () {

		push ();
		translate (this.location.x, this.location.y, this.location.z);
		noStroke ();
		fill (col, 255, 100);
		box (4);
		pop ();

	}

}

function mousePressed () {

	stars = [];

	count = -400;

	for (var i = 0; i < 2000; i++) {
		stars.push (new StarCreate (0.0, 0.0, 0.0, random (100)));
	}

}

 

 

Posted in p5.js , processing