メニュー 閉じる

068. p5.jsで炭酸の泡のエフェクトを3Dにして色を付けてみる

067のエフェクトを3Dにしてみました。
ついでに泡に色付けして、マウスで空間の視点を変更してみました。

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

var back_img;

var images01 = [];
var images02 = [];
var images03 = [];
var images04 = [];

var brands01 = [];
var brands02 = [];
var brands03 = [];
var brands04 = [];

var bubbles = [];

var targetx;
var targety;
var rotx = 0.0;
var roty = 0.0;

function setup () {

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

}

function draw () {

	background (0);

	ambientLight (30, 20, 80);
  	pointLight (255, 0, 0, 200.0, 0.0, 200.0);
  	pointLight (255, 0, 0, -200.0, 0.0, -200.0);
  	pointLight (0, 255, 0, 0.0, 200.0, 200.0);
  	pointLight (0, 255, 0, 0.0, -200.0, -200.0);
  	pointLight (100, 0, 0, 200.0, 0.0, 200.0);
  	pointLight (100, 0, 0, -200.0, 0.0, -200.0);
  	pointLight (0, 100, 0, 0.0, 200.0, 200.0);
  	pointLight (0, 100, 0, 0.0, -200.0, -200.0);



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

	targetx = mouseY;
  	targety = mouseX;

  	rotx += (targetx - rotx) * 0.04;
  	roty += (targety - roty) * 0.04;

  	rotateX (rotx * 0.01);
  	rotateY (roty * 0.01);

	bubbles.push (new BubblesBase (random (width), height + 40.0, random (-1000.0, 1000.0), random (20,0), random (0.1, 20.0)));

	for (var i = 0; i < bubbles.length; i++) {
		bubbles[i].update ();
		bubbles[i].render ();
		if (bubbles[i].by < 0) {
			bubbles.splice (i, 1);
		}
	}

}

function BubblesBase (x, y, z, r, up) {

	this.bx = x;
	this.by = y;
	this.bz = z;
	this.br = r;

	this.update = function () {

		this.by -= up;

	}

	this.render = function () {

		noStroke ();

		push ();
		translate (this.bx - width / 2.0, this.by - height / 2.0, this.bz);
		sphere (this.br * 6.0);
		pop ();

	}

}

 

 

Posted in p5.js , processing