メニュー 閉じる

001. p5.jsで公転する惑星群アニメーションを作ってみる

画面中心を公転する惑星群。マウスで視点が変わります。

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

var rot = new p5.Vector();
var trot = new p5.Vector();

var tz;
var cmass, g;
var offsetx, offsety, offsetz;

var f_dist;

var col;

var circles = []; 

var circle_num = 3000;

function setup () {

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

	offsetx = width / 2;
	offsety = height / 2;
	offsetz = -600;

	cmass = 1200.0;
	g = 9.2;

	for (var i = 0; i < circle_num; i++) {
		col = color (random (256), 255, 255);
		circles[i] = new Circle (random (-500, 500), random (-500, 500), 0, col);
	}

}

function draw () {

	background (0, 0, 0);

	translate (offsetx - (width / 2), offsety - (height / 2), offsetz);

	f_dist = 0.0;

	trot.x += (pmouseY - mouseY) * 0.002;
	trot.z += (mouseX - pmouseX) * 0.004;

	rot.x += (trot.x - rot.x) * 0.1;
	rot.y += (trot.y - rot.y) * 0.1;
	rot.z += (trot.z - rot.z) * 0.04;

	stroke (80);
	noFill ();
	ellipseMode (CENTER);

	rotateX (rot.x - 0.8);
	rotateZ (rot.z);

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

}

function Circle (x, y, z, c) {

	this.x = x;
	this.y = y;
	this.z = z;

	var distance;
	var t_dist;
	var gauss = random (1.0);
	var sd = 10.0;
	var mean = 0.1;
	var o_radius = random (80, 4000);
	var p_radius = abs (gauss * gauss * sd) + mean;
	var degree = random (360);
	var mass = p_radius * 10;
	var force;
	var acceleration;
	var x, y, z;
	var time = 0.0;
	var v0 = 20.0;
	var vz = 0.0;
	var gravity = 9.8;
	var s_flag = true;
	var t_flag = false;
	var col = c;

	distance = o_radius;

	this.update = function () {

		t_dist = o_radius + ((0 - f_dist) * 10);
		distance += (t_dist - distance) * 0.06;

		x = (distance) * cos (radians (degree));
		y = (distance) * sin (radians (degree));

		force = g * ((cmass * mass) / (distance * distance * 0.02));
		acceleration = force / mass;
		degree += acceleration;

		if (degree > 360) {
			degree = 0;
		}

		if (s_flag == true && int (degree) == 180) {
			s_flag = false;
		}
		if (int (degree) != 180) {
			s_flag = true;
		}

		if (t_flag == false && int (degree) == 180 && distance > 400) {
			t_flag = true;
		}

	}

	this.display = function () {

		noStroke ();
		fill (col);
		ellipseMode (CENTER);

		push ();
		translate (x, y, z);
		rotateZ (-rot.z);
		rotateX (-rot.x + 0.8);
		ellipse (0, 0, p_radius * 2, p_radius * 2);
		pop ();

	}

}

 

Posted in p5.js , processing