render = function(p){
launch(width/2); // Dead Center
primaryCanvas.clear();
var existingRockets = [];
for (var i = 0; i < rockets.length; i++) {
// update and render
rockets[i].update();
rockets[i].render(context);
// random chance of 1% if rockets is above the middle
var randomChance = rockets[i].pos.y < (primaryCanvas.height() * 2 / 3) ? (Math.random() * 100 <= 1) : false;
if (rockets[i].pos.y < primaryCanvas.height() / 5 || rockets[i].vel.y >= 0 || randomChance) {
rockets[i].explode();
} else {
existingRockets.push(rockets[i]);
}
}
mutable rockets = existingRockets;
var existingParticles = [];
for (var i = 0; i < particles.length; i++) {
particles[i].update();
// render and save particles that can be rendered
if (particles[i].exists()) {
particles[i].render(context);
existingParticles.push(particles[i]);
}
}
while (existingParticles.length > p.maximumParticles) {
existingParticles.shift();
}
// update array with existing particles - old particles should be garbage collected
mutable particles = existingParticles;
return true;
}
//!paused && launch(Object.assign({t:(now/1000)%1000},parameters));
class Rocket extends Particle{
constructor(x) {
super({x:x,y:primaryCanvas.height()});
this.explosionColor = 0;
}
explode() {
var count = Math.random() * 10 + 80;
for (var i = 0; i < count; i++) {
var particle = new Particle(this.pos);
var angle = Math.random() * Math.PI * 2;
// emulate 3D effect by using cosine and put more particles in the middle
var speed = Math.cos(Math.random() * Math.PI / 2) * 15;
particle.vel.x = Math.cos(angle) * speed;
particle.vel.y = Math.sin(angle) * speed;
particle.size = 10;
particle.gravity = 0.2;
particle.resistance = 0.92;
particle.shrink = Math.random() * 0.05 + 0.93;
particle.flick = true;
particle.color = this.explosionColor;
mutable particles.push(particle);
}
}
render(c) {
if (!this.exists()) {
return;
}
c.save();
c.globalCompositeOperation = 'lighter';
var x = this.pos.x,
y = this.pos.y,
r = this.size / 2;
var gradient = c.createRadialGradient(x, y, 0.1, x, y, r);
gradient.addColorStop(0.1, "rgba(255, 255, 255 ," + this.alpha + ")");
gradient.addColorStop(1, "rgba(0, 0, 0, " + this.alpha + ")");
c.fillStyle = gradient;
c.beginPath();
c.arc(this.pos.x, this.pos.y, Math.random() * this.size / 2 + this.size / 2, 0, Math.PI * 2, true);
c.closePath();
c.fill();
c.restore();
}
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
