// 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 may interact This code introduces Grower background: computes initial decoration, which is stored and refreshed Mover class Constructor Properties position, velocity, acceleration, mass, colour Behavior joined in function update be seen in function draw (ellipses now) useful external functions are distance calculator Dist random float or integer generator pick Grower class saves position and radius in an array of growers ctx.save(); ctx.restore(); were no good points.push({x:ball.x,y:ball.y}); */ 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","greenyellow","yellow","gold"]; var mu= -7.7; var time=0; var alpha = 1.; 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; 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.globalAlpha=0.4; ctx.beginPath(); ctx.fillStyle = this.color; ctx.arc(this.x, this.y, this.radius, 0, 2*Math.PI); ctx.fill(); ctx.closePath(); ctx.globalAlpha=alpha; } 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*2; this.color = col[Math.floor(Math.random()*3)]; this.velocity = { x: pick(-3, 3), y: pick(-3, -1) }; this.acceleration = { x:0., y:0. }; this.mass = this.radius; this.angle = pick(-1, 1); this.avelocity = 0.1*pick(-1, 1); this.aacceleration = 0.01*pick(-1, 1); } draw() { ctx.beginPath(); ctx.fillStyle = this.color; ctx.ellipse(this.x, this.y, this.radius, 0.7*this.radius, Math.PI*this.angle, 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+= 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 { 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>250000)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);

PlantaTreeMovers08