042をアレンジして打ち上がる花火の中を移動していきます。
http://www.velvet-number.com/p5_test/test039/
var star_system = []; var fire_num = 600.0; var camz = -1000.0; function setup () { pixelDensity (displayDensity ()); createCanvas (windowWidth, windowHeight, WEBGL); colorMode (HSB, 100); background (0); } function draw () { background (0, 0, 0); ambientLight (0, 0, 10); pointLight (0, 0, 0, 0.0, 0.0, camz); camera (0.0, 0.0, camz, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0); if (frameCount % 10 == 0) { star_system.push (new StarSystem (random (-width / 2.0, width / 2.0), random (-200.0, 200.0), camz + random (200.0))); } for (var i = 0; i < star_system.length; i++) { star_system[i].update (); if (camz + star_system[i].myz < -4000.0) { star_system.splice (i, 1); } } camz -= 70.0; } function StarSystem (sx, sy, sz) { var stars = []; this.myz = -1.0 * sz; for (var i = 0; i < fire_num; i++) { stars.push (new StarCreate (sx, sy, sz, random (100))); } this.update = function () { for (var i = 0; i < fire_num; i++) { stars[i].update (); stars[i].render (); } } } 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.direction01 = random (-PI, PI); this.direction02 = random (-PI, PI); this.tmp_x = cos (this.direction01) * sin (this.direction02); this.tmp_y = sin (this.direction01); this.tmp_z = cos (this.direction01) * cos (this.direction02); this.init_force = new p5.Vector (this.tmp_x, this.tmp_y, this.tmp_z); this.init_force.mult (random (160.0, 200.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 (10); pop (); } } function mousePressed () { star_system = []; camz = -1000; }