// Created by Bell // Trying out ideas from Nature of Code by Daniel Shiffman, /* Same as simpleRain Mover class has Constructor Properties position, velocity, acceleration, mass Behavior move in function update be seen in function draw wrap at edges Main forces are wind, gravity and friction useful external functions are distance calculator dist random float or integer generator pick Haze and Wave classes extend Mover, use super to call base constructor only one array is needed to store all particles */ 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", "azure", "LightGray", "GhostWhite", "MistyRose","AliceBlue","White","Silver","Turquoise"]; class Mover { constructor(x, y, radius) { this.x = x; this.y = y; this.radius = radius; this.color = col[Math.floor(Math.random()*7)]; this.velocity = { x: 0.5*pick(-1, 1), y: H*0.007*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() { ctx.fillStyle = this.color; for(let i=0; i < 37; i++) { if(((i+this.time)%317)==0){ctx.fillStyle = "SkyBlue";} } 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; } frictionf() { let mu=-7.7; let invmag=1./(0.0001+Dist(0.,0.,this.velocity.x,this.velocity.y)); let u=Norm(this.velocity,invmag); this.acceleration.x+= 0.05*mu*this.velocity.x*this.velocity.x*u.x; this.acceleration.y+= 0.05*mu*this.velocity.y*this.velocity.y*u.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(); if(this.y>0.92*H)this.frictionf(); 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.95; this.draw(); this.bounce(); this.acceleration.x= 0.0; this.acceleration.y= 0.0; } } class Bubble extends Mover { constructor(x, y, radius) { super(x,y,radius); this.color="azure"; this.velocity.x*=0.3; this.velocity.y*=0.3; this.mass=3/this.radius; } draw() { ctx.fillStyle = this.color; this.time+=20; ctx.globalAlpha = 1. / this.radius; ctx.beginPath(); ctx.arc(this.x, this.y, this.radius, 0, 2*Math.PI); ctx.fill(); ctx.closePath(); ctx.globalAlpha = 1; ctx.lineWidth = 0.4; ctx.strokeStyle= "white"; ctx.arc(this.x, this.y, 1+this.radius, 0, 2*Math.PI); ctx.stroke(); ctx.closePath(); } } class Haze extends Mover { constructor(x, y, radius) { super(x,y,radius); this.color="Azure"; this.velocity.x*=0.9; this.velocity.y*=0.; this.mass=3/this.radius; this.ang=Math.PI*pick(0,2); } draw() { ctx.fillStyle = this.color; this.ang+=0.05; this.time+=20; let r=Math.sin(this.ang)+0.1; r*=r; r*=this.radius; ctx.globalAlpha = 1. / this.radius; ctx.beginPath(); ctx.arc(this.x, this.y, r, 0*Math.PI, 2*Math.PI); ctx.fill(); ctx.closePath(); ctx.globalAlpha = pick(0.2,1); ctx.lineWidth = 0.01; ctx.strokeStyle= "white"; ctx.arc(this.x, this.y, 1+r, 0*Math.PI, 2*Math.PI); ctx.stroke(); ctx.closePath(); let d= this.x for(let i=0; i <10; i++) { d+=W*0.1*i; ctx.globalAlpha = 1. / this.radius; ctx.beginPath(); ctx.arc(d, this.y, r, 0*Math.PI, 1*Math.PI); ctx.fill(); ctx.closePath(); ctx.globalAlpha = pick(0.2,1);} //ctx.lineWidth = 0.1; //ctx.strokeStyle= "white"; //ctx.arc(this.x, this.y, 1+r, 0*Math.PI, 2*Math.PI); //ctx.stroke(); //ctx.closePath(); } update() { this.time+= 30; 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.95; this.draw(); this.bounce(); this.acceleration.x= 0.0; this.acceleration.y= 0.0; } } class Wave extends Mover { constructor(x, y, radius) { super(x,y,radius); this.color="yellow"; this.velocity.x*=0.; this.velocity.y*=0.; this.mass=0.3; this.avel=0.02; this.ang=Math.PI*pick(0,2); this.A=0.05*H; } draw() { ctx.fillStyle = this.color; let r=Math.sin(this.ang)+0.1; r*=r; this.ang+=this.avel; let a=this.ang; for(let i=this.x; i 0.1*W)this.x-=0.09*W; 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.001; this.velocity.y *= 0.0; this.draw(); this.acceleration.x= 0.0; this.acceleration.y= 0.0; } } function crash(p){ for (let i=0; i0.99 &&(p[i].y>0.92*H)||(p[i].time>4000)) { p.splice(i, 1);} } } function populate (){ let x = 0.0*W; let y = 0.95*H; if(z>45&&z<55)p.push(new Wave(x,y,0.5)); x = 0.3*W; y = 0.9*H; if(z>50)p.push(new Haze(x,y,80)); for(let i=0; i < 20; i++) { let radius = pick(0.1, 0.9); p.push(new Mover(x, y, radius)); } x = 0.6*W; y = 0.9*H; if(z>50)p.push(new Haze(x,y,80)); for(let i=0; i < 20; i++) { let radius = pick(0.1, 0.9); p.push(new Mover(x, y, radius)); } let k=1-(0.001*Math.min(z+50,200)); x = pick(0.01*W, 0.99*W ); //y = pick(0.7*H, 0.8*H ); y = pick((k-0.1)*H, k*H ); for(let i=0; i < 2; i++) { let radius = pick(1, 5); p.push(new Bubble(x, y, radius)); } } const animate = () => { ctx.fillStyle = "rgba(0, 128, 228, 0.25)"; ctx.fillRect(0, 0, W, H); ctx.fillStyle = "rgba(0, 96, 96, .8)"; ctx.fillRect(0, H*0.9, W, H); if(ctx == null) return; z++; if(z%2==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);

windyBubbleFountain11