メニュー 閉じる

168. p5.jsで表面がぶよぶよ動く球体を描画してみる

頂点をノイズで動かしている球体に面を張って、マテリアルとライトを設定してみました。
ライトの設定がまだいまいちわからん・・・。

https://www.velvet-number.com/p5_test/test125/

var step;
var countx;
var county;

var sphere = [];

var rotx;
var roty;
var rotz;

function setup () {

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

	noStroke ();

	ambientLight (10, 40, 10);
	specularMaterial (255, 255, 255, 200);

	step = 10;
	countx = 0;
	county = 0;

	xoff = 0.0;
	yoff = 0.0;
	zoff = 0.0;

	rotx = 0.0;
	roty = 0.0;
	rotz = 0.0;

	for (var i = -90; i <= 90; i += step) {
		county = 0;
		sphere[countx] = [];
		for (var j = -180; j <= 180 - step; j += step) {
			if (i == -90) {
				sphere[countx][0] = new Particles (float (-90), float (0));
			} else if (i == 90) {
				sphere[countx][0] = new Particles (float (90), float (0));
			} else {
				sphere[countx][county] = new Particles (float (i), float (j));
			}
			county += 1;
		}
		countx += 1;
	}

}

function draw () {

	background(0);

	rotateX (rotx);
	rotateY (roty);
	rotateY (rotz);

	pointLight (100, 100, 400, -200, 0, -400);
	pointLight (100, 100, 400, -200, 0, -10);

	pointLight (100, 100, 400, 200, 0, -400);
	pointLight (100, 100, 400, 200, 0, -10);

	pointLight (100, 100, 200, 0, -200, -400);
	pointLight (100, 100, 200, 0, -200, -10);

	pointLight (100, 100, 200, 0, 200, -400);
	pointLight (100, 100, 200, 0, 200, -10);

	for (var i = 0; i < countx; i++) {
		for (var j = 0; j < county; j++) {
			if (i == 0) {
				if (j == 0) {
					sphere[i][j].update ();
					sphere[i][j].render ();
				}
			} else if (i == countx - 1) {
				if (j == 0) {
					sphere[i][j].update ();
					sphere[i][j].render ();
				}
			} else {
				sphere[i][j].update ();
				sphere[i][j].render ();
			}
			beginShape ();
			if (i == 1) {
				if (j == 0) {
					vertex (sphere[i][j].nx, sphere[i][j].ny, sphere[i][j].nz);
					vertex (sphere[i - 1][0].nx, sphere[i - 1][0].ny, sphere[i - 1][0].nz);
					vertex (sphere[i][county - 1].nx, sphere[i][county - 1].ny, sphere[i][county - 1].nz);
					vertex (sphere[i][j].nx, sphere[i][j].ny, sphere[i][j].nz);
				}
				if (j > 0) {
					vertex (sphere[i][j].nx, sphere[i][j].ny, sphere[i][j].nz);
					vertex (sphere[i - 1][0].nx, sphere[i - 1][0].ny, sphere[i - 1][0].nz);
					vertex (sphere[i][j - 1].nx, sphere[i][j - 1].ny, sphere[i][j - 1].nz);
					vertex (sphere[i][j].nx, sphere[i][j].ny, sphere[i][j].nz);
				}
			} else if (i == countx - 1) {
				if (j == 0) {
					vertex (sphere[i][0].nx, sphere[i][j].ny, sphere[i][0].nz);
					vertex (sphere[i - 1][j].nx, sphere[i - 1][j].ny, sphere[i - 1][j].nz);
					vertex (sphere[i - 1][county - 1].nx, sphere[i - 1][county - 1].ny, sphere[i - 1][county - 1].nz);
					vertex (sphere[i][0].nx, sphere[i][0].ny, sphere[i][0].nz);
				}
				if (j > 0) {
					vertex (sphere[i][0].nx, sphere[i][0].ny, sphere[i][0].nz);
					vertex (sphere[i - 1][j].nx, sphere[i - 1][j].ny, sphere[i - 1][j].nz);
					vertex (sphere[i - 1][j - 1].nx, sphere[i - 1][j - 1].ny, sphere[i - 1][j - 1].nz);
					vertex (sphere[i][0].nx, sphere[i][0].ny, sphere[i][0].nz);
				}
			} else {
				if (i > 0 && j == 0) {
					vertex (sphere[i][j].nx, sphere[i][j].ny, sphere[i][j].nz);
					vertex (sphere[i][county - 1].nx, sphere[i][county - 1].ny, sphere[i][county - 1].nz);
					vertex (sphere[i - 1][county - 1].nx, sphere[i - 1][county - 1].ny, sphere[i - 1][county - 1].nz);
					vertex (sphere[i - 1][j].nx, sphere[i - 1][j].ny, sphere[i - 1][j].nz);
					vertex (sphere[i][j].nx, sphere[i][j].ny, sphere[i][j].nz);
				}
				if (i > 0 && j > 0) {
					vertex (sphere[i][j].nx, sphere[i][j].ny, sphere[i][j].nz);
					vertex (sphere[i - 1][j].nx, sphere[i - 1][j].ny, sphere[i - 1][j].nz);
					vertex (sphere[i - 1][j - 1].nx, sphere[i - 1][j - 1].ny, sphere[i - 1][j - 1].nz);
					vertex (sphere[i][j - 1].nx, sphere[i][j - 1].ny, sphere[i][j - 1].nz);
					vertex (sphere[i][j].nx, sphere[i][j].ny, sphere[i][j].nz);
				}
			}
			endShape ();
		}
	}

	rotx += 0.004;
	roty += 0.004;
	rotz += 0.004;

}

function Particles (d01, d02) {

	var amp;
	var off = random () * 10000;
	var deg01 = d01;
	var deg02 = d02;

	this.nx;
	this.ny;
	this.nz;

	this.update = function () {

		amp = map (noise (off), 0, 1, width * 0.1, width * 0.2);

		this.nx = amp * cos (radians (deg01)) * sin (radians (deg02));
		this.ny = amp * sin (radians (deg01));
		this.nz = amp * cos (radians (deg01)) * cos (radians (deg02));

		off += 0.02;

	}

	this.render = function () {

	}

}

 

Posted in javascript , p5.js , processing