// Created by Bell // Trying out ideas from Nature of Code by Daniel Shiffman, // Credit to Kode Krasher for invaluable help and patience to make cross platform and check performance on all sort of devices and distributions /* Animals jumping from vine to vine in a jungle Background tree is provided by Grower class. Stored in array g, they are permanent and immutable Background leaves are mobile, from cherry tree code Mover Spring class extends Mover, use super to call base constructor only one array is needed to store springs and movers */ let ctx,p,g,s, W,H,sca; // Utilities: distance, random choice, normalisation, colors, definitions 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 col = ["Khaki", "Crimson", "black", "orange", "pink","DarkGreen"]; var t=0; // Class grower makes permanent, immutable background class Grower { constructor(x, y, radius) { this.x = x; this.y = y; this.radius = radius*(H/225); this.color = "SaddleBrown"; this.velocity = { x: 0.01, y: -0.01 }; this.acceleration = { x:pick(-3, 3), y:0. }; this.mass=1; this.avelocity = 0.3; this.angle = 0; } draw() { ctx.beginPath(); ctx.fillStyle = this.color; ctx.arc(this.x, this.y, this.radius, 0, 2*Math.PI); ctx.fill(); ctx.closePath(); } elasticf() { this.acceleration.y-= 0.0002*(this.y+80); } attractf(ax,ay) { let f=1/(0.0001+Dist(this.x,this.y,ax,ay)); let vec={x:this.x-ax, y:this.y-ay}; let u=Norm(vec,f); this.acceleration.x -= 0.07*u.x; this.acceleration.y -= 0.02*u.y; } wave(){ this.angle += this.avelocity; this.x += 5*Math.cos(this.angle); if(s.length<7&&Math.abs(Math.cos(this.angle))<0.1){ if(this.x>0&&this.x0&&this.y0.5)this.radius -= 0.03; if(this.x>0&&this.x0&&this.y0.8&&this.radius<7){ //small monkey let x=this.x; let y=this.y; let rx=15; let ry=9; ctx.lineWidth = 3; ctx.fillStyle = this.color; ctx.beginPath(); ctx.ellipse(x, y, ry, 7, Math.PI * 0, 0, 2*Math.PI); ctx.fill(); ctx.beginPath(); if(this.ti!=2000){ // oscillate around a=Math.PI * (0.5-0.3*dir); let a=Math.PI * (0.5-Math.abs(0.3-0.25*this.angle)*dir); let dx= rx*Math.cos(a)*dir; let dy=-rx*Math.sin(a); // ctx.ellipse(x-21*(this.velocity.x/Math.abs(this.velocity.x)), y, 15, 9, Math.PI * 1.9, 0, 2*Math.PI); ctx.ellipse(x-(dir*(2*ry-2)),y+dy,rx,ry,a,0.*Math.PI,1.7*Math.PI);} else {ctx.ellipse(x, y+21,8,15, Math.PI*0,1.2*Math.PI,0.9*Math.PI);} ctx.fill();} else if(this.radius>17){ let r=this.radius*sca; for(let i=0;i<8;i++){ let ar=this.angle+0.22*Math.PI*i; let dx=this.x-this.radius*Math.cos(ar); let dy=this.y-this.radius*Math.sin(ar); ctx.beginPath(); ctx.fillStyle = "DarkGreen"; ctx.ellipse(dx, dy,this.radius, 0.5*r, ar, 0, Math.PI); ctx.fill(); ctx.closePath(); } }else{ let x=this.x; let y=this.y; ctx.beginPath(); ctx.fillStyle = "yellow"; ctx.ellipse(this.x, this.y, this.radius, 0.6*this.radius, this.angle, 0, Math.PI); ctx.fill(); ctx.closePath(); } } trebble(){ if(Math.abs(this.angle)> 0.3)this.avelocity*=-1; this.angle+=this.avelocity; } gravity() { this.acceleration.y+= 0.098; } bounce() { if(this.x - this.radius <= 0 || this.x + this.radius >= W) this.velocity.x = -0.5*this.velocity.x; else if(this.y - this.radius <= 0 || this.y + this.radius >= 0.9*H) this.velocity.y = -0.5*this.velocity.y; } update() { //this.ti+= 1; if(this.radius>15)this.trebble(); this.draw(); } } // Class Spring, Squirrels on the vines 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.0, y: 0.0 }; this.path = 0.0; this.k= 0.005; this.len=W/3.; this.mass = this.radius/2; this.radius+=this.radius; } draw() { ctx.beginPath(); ctx.fillStyle = this.color; // var dir= Math.atan2(-(this.ay-this.y),-(this.ax-this.x)); 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); let px=this.x-this.path*u.x; let py=this.y-this.path*u.y; this.path=Math.max(0,this.path-0.5); ctx.arc(px, py, this.radius, 0, 2*Math.PI); ctx.fill(); ctx.beginPath(); ctx.moveTo(this.x,this.y); ctx.lineWidth = 1.3; ctx.strokeStyle = "#00FF00"; 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; } // Determine mass exchange between springs (monkey jump to new vine). // D(anchor to bob)= D(Anchor-p)+Dist(p-bob) // If other Bob collides with vine, instantiate Jumper and leave Bob at radius=0 rayjump(){ let dir= { x: this.x - this.ax, y: this.y - this.ay } let d= Dist(this.ax,this.ay,this.x,this.y); for(let i=0;i1000 &&p[i].hasOwnProperty('len')&&p[i].radius>0.1&&Math.abs(d-dp-db)<1&&db>1){ //if(t>1000 && p[i] instanceof Spring && t=0; if(this.radius>1.){ this.radius=2; p.push(new Jumper(this.x, this.y,this.radius, p[i].ax,p[i].ay,this.color,this.velocity.x));} let c=this.color; this.color=p[i].color; p[i].color=c; this.radius=p[i].radius; p[i].radius=0; c=this.mass; this.mass=p[i].mass; p[i].mass=c; this.path=db; } } } update() { t++; this.rayjump(); 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; } } //Falling from the vine, Monkey goes grab a fruit and runs back to vine class Jumper extends Mover { constructor(x, y, radius,ax,ay,color,vx) { super(x,y,radius); this.ax = ax; this.ay = ay; this.color = color; this.velocity = { x: vx, y: 0}; this.acceleration = { x: 0.0, y: 0.0}; this.mass = Math.min(1.,this.radius); this.ti=0; } climb() { if(this.y + this.radius >= 0.93*H) { this.velocity.x=-15.; this.ti=1000;} if(this.x - this.radius <= 0.15*W && this.y - this.radius >= this.ay) { this.velocity.x=0.; this.velocity.y=-5.; this.ti=2000;} if(this.y - this.radius < this.ay) { let dir= { x: this.x - this.ax, y: this.y - this.ay} this.ti=3000; let d= Dist(this.ax,this.ay,this.x,this.y); let f=1/(0.0001+d); let u= Norm(dir,f); this.velocity.x=0; this.velocity.y=0; this.velocity.x-= 3*u.x; this.velocity.y-= 1*u.y; if(d<3){ for(let i=0;i9000)break;} } } } update() { this.ti+= 1; 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.bounce(); this.climb(); this.x += this.velocity.x; this.y += this.velocity.y; //this.velocity.x *= 0.95; //this.velocity.y *= 0.95; this.trebble(); this.draw(); this.acceleration.x= 0.0; this.acceleration.y= 0.0; } } // This function terminates evolved objects function crash(p){ for (let i=0; i9000)){ p.splice(i,1);} } } // This function brings the ecosystem to life function populate (){ // Create background for (let i = 0; i < 1; i++) { let x = 0.15*W; let y = 0.9*H; a=new Grower (x, y, 1); while(Dist(a.x, a.y, 0.4*W, 0.8*H) < 0.7*H){a.update();} for (let j = 0; j < s.length; j++) { a.x=s[j].x; a.y=s[j].y; a.radius=2; while(Dist(a.x, a.y, 0.4*W, 0.8*H) < 0.7*H){a.update();} } } s=null; // Create Squirrels for(let i=0; i < 7; i++) { let radius = pick(2, 4); let x = pick(0.25*W, 0.75*W ); let y = pick(0.3*H, 0.45*H ); let ax = pick(x-0.1*W,x+0.1*W ); let ay = pick(y-0.25*H,y-0.15*H ); p.push(new Spring(x, y, radius,ax,ay)); } //Create Leaves for(let i=0; i < 20; i++) { let radius = 18; let x = pick(0.1*W, 0.9*W ); let y = pick(0.05*H, 0.25*H ); p.push(new Mover(x, y, radius)); x = pick(0.05*W, 0.2*W ); y = pick(0.05*H, 0.75*H ); p.push(new Mover(x, y, radius)); } //Create Fruit for(let i=0; i < 17; i++) { let radius = 12; let x = pick(0.3*W, 0.9*W ); let y = pick(0.90*H, 0.95*H ); p.push(new Mover(x, y, radius)); } } // Set up canvas and run the show const animate = () => { ctx.fillStyle = "rgba(0, 160, 0, 0.2)"; ctx.fillRect(0, 0, W, H); if(ctx == null) return; crash(p); g.forEach(gi => gi.draw()); p.forEach(pi => pi.update()); requestAnimationFrame(animate); } // Initialize const init = () => { ctx = document.querySelector("#cvs").getContext("2d"); p = []; g = []; s = []; W = ctx.canvas.width = innerWidth; H = ctx.canvas.height = innerHeight; sca = H/1000; window.alert("Squirrels playing in the woods!"); populate(); requestAnimationFrame(animate); } window.addEventListener("load", init);

SquirrelsOnTree14