// Created by Bell // Trying out ideas from Nature of Code by Daniel Shiffman, /* Same as fireflies but with Spring as derived class of Mover Mover class has Constructor Properties position, velocity, acceleration, mass Behavior move in function update be seen in function draw bounce at edges useful external functions are distance calculator dist random float or integer generator pick Confetti classes extend Mover, use super to call base constructor only one array is needed to store all confetti */ let ctx, p = [], z = 0, W = innerWidth, H = innerHeight; const Dist= (x1, y1, x2, y2) => Math.sqrt((x2-x1)*(x2-x1)+(y2-y1)*(y2-y1)); const pick = (min, max) => Math.random() * (max - min + 1) + min; const Norm = (v,invdist) => ({ x: v.x * invdist, y: v.y * invdist }); const RAD = 0.01745329252; let {sin, cos, PI: pi, abs, min} = Math; // wind force will be random but constant const winda ={x: 0.003*pick(-10, 10),y: 0.0015*pick(-7,-3)}; let col = ["white", "red", "navy", "HotPink", "cyan","Indigo","Gold","Crimson","Turquoise"]; class Mover { constructor(x, y, radius) { this.x = x; this.y = y; this.radius = radius; this.color = col[Math.floor(Math.random()*4)]; this.velocity = { x: 2*pick(-3, 3), y: 9*pick(-7, -1) }; this.acceleration = { x: 0.05*pick(-1, 1), y: 0.05*pick(-1, 1) }; this.mass = 1; this.t=0; this.time=Math.floor(pick(1, 1000)); } draw() { //var dir= Math.atan2(-this.velocity.y,-this.velocity.x); ctx.fillStyle = this.color; for(let i=0; i < 37; i++) { if(((i+this.time)%317)==0){ctx.fillStyle = "teal";} } ctx.beginPath(); ctx.arc(this.x, this.y, this.radius, 0, 2*Math.PI); ctx.fill(); ctx.closePath(); } gravity() { this.acceleration.y+= 0.098; } windf() { this.acceleration.x+= winda.x; this.acceleration.y+= winda.y; } bounce() { if(this.x - this.radius <= 0) this.x=W-0.01-this.radius; else if (this.x + this.radius >= W) this.x = 0.01+this.radius; else if(this.y - this.radius <= 0 || this.y + this.radius >= H*(1-z*0.00005)) this.velocity.y = -0.4*this.velocity.y; } update() { this.time+= 1; this.windf(); this.acceleration.x/= this.mass; this.acceleration.y/= this.mass; this.gravity(); this.velocity.x += this.acceleration.x; this.velocity.y += this.acceleration.y; this.x += this.velocity.x; this.y += this.velocity.y; this.velocity.x *= 0.9; this.velocity.y *= 0.9; this.draw(); this.bounce(); this.acceleration.x= 0.0; this.acceleration.y= 0.0; } } class Spring extends Mover { constructor(x, y, radius,ax,ay) { super(x,y,radius); this.ax = ax; this.ay = ay; this.velocity = {x: 0.,y: 0.}; this.acceleration = {x: 0., y: 0.}; this.k= 0.004; this.len=W/3; this.mass = this.radius; } draw() { ctx.beginPath(); ctx.fillStyle = "Chartreuse"; var dir= Math.atan2(-(this.ay-this.y),-(this.ax-this.x)); var dx=-this.radius*Math.cos(dir); var dy=-this.radius*Math.sin(dir); let sh=0.25; ctx.ellipse(this.x+dx, this.y+dy, 7, 12,dir+sh,1.5*Math.PI, 0.5*Math.PI); ctx.arc(this.x, this.y, this.radius, 0, 2*Math.PI); ctx.fill(); ctx.lineWidth = 0.3; ctx.strokeStyle = "#FF8300"; //ctx.lineTo(this.ax,this.ay); ctx.stroke(); ctx.closePath(); } hookef() { let dir= { x: this.x - this.ax, y: this.y - this.ay } let d= Dist(this.ax,this.ay,this.x,this.y); let f=1/(0.0001+d); let u= Norm(dir,f); f = -1 * this.k * (d-this.len); this.acceleration.x+= u.x*f; this.acceleration.y+= u.y*f; } // if object hits the wall bounce bounce() { if(this.x - this.radius <= 0 || this.x + this.radius >= W) this.velocity.x = -this.velocity.x; else if(this.y-this.radius <= 0 || this.y+this.radius >= H) this.velocity.y = -this.velocity.y; } update() { this.time+=10; this.hookef(); this.acceleration.x/= this.mass; this.acceleration.y/= this.mass; this.gravity(); this.velocity.x += this.acceleration.x; this.velocity.y += this.acceleration.y; this.x += this.velocity.x; this.y += this.velocity.y; this.draw(); this.bounce(); this.acceleration.x= 0.0; this.acceleration.y= 0.0; } } class Twirl extends Mover { constructor(x, y, radius,ax,ay) { super(x,y,radius); this.ax = ax; this.ay = ay; this.color = "yellow"; this.velocity = { x: 0, y: 0 }; this.acceleration = { x: 0.0, y: 0.0 }; this.mass = this.radius; } draw() { // Matrix transformation ctx.save(); ctx.beginPath(); ctx.translate(this.x, this.y); ctx.rotate(this.y*RAD); ctx.translate(-this.x, -this.y); // Rotated rectangle ctx.fillStyle = this.color; ctx.fillRect(this.x, this.y, this.ax, this.ay); ctx.restore(); ctx.closePath(); } update() { this.time+=3; this.acceleration.x/= this.mass; this.acceleration.y/= this.mass; this.gravity(); this.velocity.x += this.acceleration.x; this.velocity.y += this.acceleration.y; this.x += this.velocity.x; this.y += this.velocity.y; this.draw(); this.bounce(); this.acceleration.x= 0.0; this.acceleration.y= 0.0; } } class Polygon extends Mover { constructor(x, y, radius,side,angle) { super(x,y,radius); this.side = side; this.angle = angle; this.color = col[side]; this.avel=-0.005*side; this.mass = 2.5; } draw() { ctx.fillStyle = this.color; ctx.save(); ctx.translate(this.x, this.y); ctx.rotate(this.angle); //ctx.translate(-this.x, -this.y); ctx.beginPath(); ctx.moveTo(this.radius, 0); for(let a = 360/this.side; a<360; a += 360/this.side) { ctx.lineTo(cos(a*RAD)*this.radius, sin(a*RAD)*this.radius); } ctx.closePath(); ctx.fill(); ctx.restore(); } update() { this.time+=3; this.windf(); this.acceleration.x/= this.mass; this.acceleration.y/= this.mass; this.gravity(); this.velocity.x += this.acceleration.x; this.velocity.y += this.acceleration.y; this.x += this.velocity.x; this.y += this.velocity.y; this.velocity.x *= 0.95; this.velocity.y *= 0.9; this.angle+=this.avel; this.draw(); this.bounce(); this.acceleration.x= 0.0; this.acceleration.y= 0.0; } } class Fluffy extends Mover { constructor(x, y, radius) { super(x,y,radius); this.velocity.x*=1.3; this.mass=5/this.radius; } draw() { ctx.fillStyle = this.color; for(let i=0; i < this.radius; i++) { ctx.globalAlpha = parseFloat(0.5*i / this.radius); ctx.beginPath(); ctx.arc(this.x, this.y, this.radius-i, 0, 2*Math.PI); ctx.fill(); ctx.closePath(); ctx.globalAlpha =1.} } } function crash(p){ for (let i=0; i0.98*H)||(p[i].time>10000)) { p.splice(i, 1);} } } function count(p){ let c=0; for (let i=0; i { ctx.fillStyle = "rgba(0, 128, 128, .7)"; ctx.fillRect(0, 0, W, H); if(ctx == null) return; z++; if(z%30==0)populate(); if(z>2500)return; crash(p); p.forEach(pi => pi.update()); requestAnimationFrame(animate); } const init = () => { ctx = document.querySelector("#cvs").getContext("2d"); W = ctx.canvas.width = innerWidth; H = ctx.canvas.height = innerHeight; populate(); requestAnimationFrame(animate); } window.addEventListener("load", init);

Confetti10