// Created by Bell, huge credits to Mirielle for borrowing lines and knowledge from her Newtonian motion code. // Trying out ideas from Nature of Code by Daniel Shiffman // Waves /* Movers are subject to forces and interact. Update method in Movers class is most important. This code introduces Grower background: computes initial decoration, which is stored and refreshed Grower class draws background. It saves position and radius of particles in an array t. They are drawn every cycle. Mover class draws animated particles, stored in array p. Properties position, velocity, acceleration, mass, colour Behavior is added in function update: accelerations are calculated and summed in their methods. Here a rocking oscillation acts always on the leaves (trebble). The global property time is updated in each cycle. If multiple of an arbitrary number, it triggers color change to the next value in col array. When color turns gold, gravity and wind are applied on the particle, also rocking continues. If on the lawn, friction acts as well. Movers are displayed in function draw (ellipses) distance calculator Dist random float or integer generator pick */ let ctx, p, W, H, D, t, count; Dist= (x1, y1, x2, y2) => Math.hypot(x2-x1, y2-y1); const pick = (min, max) => Math.random() * (max - min + 1) + min; let col = ["greenyellow", "lime", "lawngreen","hotpink", "seagreen", "lightseagreen", "darkgreen","limegreen", "green","forestgreen","yellowgreen","yellow","gold"]; var mu= -27.; var time=0; const Norm = (v,invdist) => ({ x: v.x * invdist, y: v.y * invdist }); // wind force will be random but constant const winda ={x: 0.003*pick(-10, 10),y: 0.0015*pick(0,7)}; class Grower { constructor(x, y, radius) { this.x = x; this.y = y; this.radius = radius*(H/900); this.color = "sienna"; this.velocity = { x: pick(-3, 3), y: pick(-3, -1) }; this.acceleration = { x:0., y:0. }; this.mass=1; this.avelocity = 0.3; this.angle = 0; } zoom() { this.acceleration.x+= 0.05*pick(-1,1); this.acceleration.y+= 0.05*pick(-1,1); } 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.01*(H-this.y); this.acceleration.y-= 0.0003*(this.y+80); } wave(){ this.angle += this.avelocity; this.x += 5 * Math.cos(this.angle); } update() { this.elasticf(); //this.zoom(); this.wave(); this.acceleration.x/= this.mass; this.acceleration.y/= this.mass; this.velocity.x += this.acceleration.x; this.velocity.y += this.acceleration.y; this.x += this.velocity.x; this.y += this.velocity.y; this.radius -= 0.02; t.push(new Grower(this.x, this.y, this.radius)); this.acceleration.x= 0.0; this.acceleration.y= 0.0; } } class Mover { constructor(x, y, radius) { this.x = x; this.y = y; this.radius = radius*(H/400); this.color = col[Math.floor(Math.random()*3)]; this.velocity = { x: 0, y: 0 }; this.acceleration = { x:0., y:0. }; this.mass = this.radius; this.angle = pick(-1, 1); this.avelocity = 0; this.aacceleration = 0.01; } draw() { ctx.beginPath(); ctx.fillStyle = this.color; ctx.ellipse(this.x, this.y, this.radius, 0.6*this.radius, Math.PI*(this.angle+this.avelocity), 0, 2*Math.PI); ctx.fill(); ctx.closePath(); } // if object hits the wall bounce or wrap 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 = -0.95*this.velocity.y; } wrap() { if(this.x - this.radius <= 0) this.x += W; else if(this.x + this.radius >= W) this.x -= W; if(this.y - this.radius <= 0) this.y += H; else if(this.y + this.radius >= H) this.y -= H; } // Different forces, used or not in this version zoom() { this.acceleration.x+= 0.05*pick(-1,1); this.acceleration.y+= 0.05*pick(-1,1); } windf() { this.acceleration.x+= 5*winda.x; this.acceleration.y+= winda.y; } jet() { this.acceleration.x+= 0.0015*pick(-10, 10); this.acceleration.y+= 0.0015*pick(-7,7); } gravity() { this.acceleration.y+= 0.098; } elasticf() { //this.acceleration.y+= -0.01*(H-this.y); this.acceleration.y-= 0.0003*(this.y+80); } frictionf() { let invmag=1./(0.0001+Dist(0.,0.,this.velocity.x,this.velocity.y)); let u=Norm(this.velocity,invmag); this.acceleration.x+= 0.01*mu*this.velocity.x*this.velocity.x*u.x; this.acceleration.y+= 0.01*mu*this.velocity.y*this.velocity.y*u.y; } attract() { for (let i=0; i 0.20) {this.aacceleration*=-1; } this.avelocity+=(this.aacceleration); } update() { //this.elasticf(); time+=1; if(time%237==0&&col.indexOf(this.color)<12){this.color=col[col.indexOf(this.color)+1];} if(col.indexOf(this.color)==12){ if(this.y>D){this.frictionf(); this.aacceleration=0.02*this.velocity.y; } else{this.windf();} this.acceleration.x/= this.mass; this.acceleration.y/= this.mass; if(this.y { ctx.fillStyle = "rgba(255, 255, 250, 0.7)"; ctx.fillRect(0,0, W, H); ctx.fillStyle = "rgba(0, 128, 28, 0.6)"; ctx.fillRect(0,D, W, H); ctx.beginPath(); ctx.fillStyle = "gold"; ctx.arc(W*0.8, H*0.1, 30, 0, 2*Math.PI); ctx.fill(); ctx.closePath(); if(ctx == null) return; t.forEach(ti => ti.draw()); p.forEach(pi => pi.update()); if(time>1000000)return; requestAnimationFrame(animate); } const init = () => { ctx = document.querySelector("#cvs").getContext("2d"); ctx.canvas.width = W = innerWidth; ctx.canvas.height = H = innerHeight; p = []; t = []; W = innerWidth; H = innerHeight; D = H*0.8; count = 0; window.alert("Plant a tree: tap twigs and leaves!"); requestAnimationFrame(animate); } window.addEventListener("load", init); window.addEventListener("touchstart", touchget);

PlantAtreeSpringtoFall