メニュー 閉じる

011. p5.jsで球面状の座標にオブジェクトを配置して動かしてみる

球面状の座標を計算して、そこに単純なBOXプリミティブを配置しました。球面を2個用意し、ノイズで表面を動かしています。

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

var step;
var countx;
var county;

var sphere01 = [];
var sphere02 = [];

var amp01;
var amp02;

var xoff;
var yoff;
var zoff;

var rotx;
var roty;
var rotz;

function setup () {

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

	countx = 0;
	county = 0;
	step = 20;

	amp01 = 0.0;
	amp02 = 0.0;

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

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

	for (var i = 0; i < 360; i += step) {
		county = 0;
		sphere01[countx] = [];
		sphere02[countx] = [];
		for (var j = 0; j < 360; j += step) {
			sphere01[countx][county] = new Particles (float (i), float (j));
			sphere02[countx][county] = new Particles (float (i), float (j));
			county += 1;
		}
		countx += 1;
	}

}

function draw () {

	background(0);

	rotateX (rotx);
	rotateY (roty);
	//rotateY (rotz);
	
	countx = 0;
	xoff = 0.0;
	for (var i = 0; i < 360; i += step) {
		county = 0;
		yoff = 0.0;
		for (var j = 0; j < 360; j += step) {
			amp01 = map (noise (xoff, yoff, zoff), 0, 1, width * 0.2, width * 0.6);
			amp02 = map (noise (xoff, yoff, zoff), 0, 1, width * 0.1, width * 0.3);
			sphere01[countx][county].update (amp01);
			sphere02[countx][county].update (amp02);
			sphere01[countx][county].render ();
			sphere02[countx][county].render ();
			county += 1;
			yoff += 0.06;
		}
		countx += 1;
		xoff += 0.06;
	}
	zoff += 0.02;

	rotx += 0.01;
	roty += 0.01;
	rotz += 0.01;

}

function Particles (d01, d02) {

	var amp;
	var deg01 = d01;
	var deg02 = d02;
	var nx, ny, nz;

	this.update = function (a) {

		amp = a;

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

		deg01 += 0.1;
		deg02 += 0.1;

	}

	this.render = function () {

		noFill ();
		stroke (255);
		strokeWeight (1);

		push ();
		translate (nx, ny, nz);
		box (10, 10, 10);
		pop ();

	}

}

 

 

Posted in p5.js , processing