// 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, max} = Math; // wind force will be random but constant const winda ={x: 0.003*pick(-10, 10),y: 0.0015*pick(-7,-3)}; let col = ["violet", "red", "navy", "HotPink", "cyan","Indigo","Gold","Crimson","Turquoise", "Seagreen","Forestgreen","green","Darkgreen","DarkCyan","teal"]; class Mover { constructor(x, y, radius) { this.x = x; this.y = y; this.radius = max(0.1, radius); this.color = col[Math.floor(Math.random()*4)]; this.velocity = { x: (H/(50*radius))*pick(-1, 1), y: (H/(50*radius))*pick(-1, 1) }; this.acceleration = { x: 0.0, y: 0.0 }; this.mass = radius; this.health=100; this.time=Math.floor(pick(1, 1000)); } draw() { ctx.fillStyle = this.color; ctx.beginPath(); ctx.arc(this.x, this.y, this.radius, 0, 2*Math.PI); ctx.fill(); ctx.strokeStyle= "white"; ctx.arc(this.x, this.y, 1+this.health/10, 0, 2*Math.PI); ctx.stroke(); ctx.closePath(); } windf() { this.acceleration.x+= winda.x; this.acceleration.y+= winda.y; } bounce() { if(this.x - this.radius <= 0 || this.x + this.radius >= W) this.velocity.x = -this.velocity.x; if(this.y - this.radius <= 0 || this.y + this.radius >= H) this.velocity.y = -this.velocity.y; } procreate(){ let nx = pick(0.05*W, 0.95*W ); let ny = pick(0.2*H, 0.30*H ); let a= this.radius; let r = pick(a-0.1, a+0.1); p.push(new Mover(nx, ny, r)); //p.push(new Fluffy(nx, ny, r)); } // eat colliding food eat(){ for (let j=0; j5&&Math.random()<0.0005)this.procreate(); } } class Food extends Mover { constructor(x, y, radius,side,angle) { super(x,y,radius); this.side = side; this.angle = angle; this.color = col[side+6]; this.velocity.x=0; this.velocity.y=0; this.avel=-0.005*side; this.mass = 1; } draw() { ctx.fillStyle = this.color; ctx.save(); ctx.translate(this.x, this.y); ctx.rotate(this.angle); 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+=0.3; this.angle+=this.avel; this.draw(); } } class Fluffy extends Mover { constructor(x, y, radius) { super(x,y,radius); this.mass=0.5; } draw() { ctx.fillStyle = this.color; for(let i=0; i < this.radius; i++) { ctx.globalAlpha = parseFloat(i / this.radius); ctx.beginPath(); ctx.arc(this.x, this.y, this.radius-i, 0, 2*Math.PI); ctx.fill(); ctx.closePath();} } } function die(p){ for (let i=0; i { ctx.fillStyle = "rgba(154, 205, 50, .8)"; ctx.fillRect(0, 0, W, H); if(ctx == null) return; z++; if(z>150000)return; die(p); if(z%300==0)feed(p); p.forEach(pi => pi.update()); if(p.length===0){ window.alert("Extinction!"); return; } requestAnimationFrame(animate); } const init = () => { ctx = document.querySelector("#cvs").getContext("2d"); ctx.canvas.width = W = innerWidth; ctx.canvas.height = H = innerHeight; p = []; W = innerWidth; H = innerHeight; window.alert("Simple evolution: movers eat to gain health and procreate by division. Size and speed mutate. who wins: small fast or big slow?"); populate(); requestAnimationFrame(animate); } window.addEventListener("load", init);

MoversEvolution12