// 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 // Gravity, wind and friction /* Movers are pulled down by gravity, blown away by wind depending on their mass and experimenting velocity-dependen friction in the dense medium at the bottom. When they meet, one of them is cancelled. Mover class has Constructor Properties position, velocity, acceleration, mass Behavior move in function update be seen in function display what to do at edges (bounce or wrap) useful external functions are distance calculator dist random float or integer generator pick */ let ctx, p, W, H, D; Dist= (x1, y1, x2, y2) => Math.hypot(x2-x1, y2-y1); const pick = (min, max) => Math.random() * (max - min + 1) + min; let col = ["greenyellow", "cyan", "hotpink", "white", "gold","orange","red","yellow"]; var mu= -7.7; //const Norm= (vecx,vecy) => (vecx/(Math.hypot(vecx,vecy)),vecy/(Math.hypot(vecx,vecy))); 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 Mover { constructor(x, y, radius) { this.x = x; this.y = y; this.radius = radius; this.color = col[Math.floor(Math.random()*4)]; this.velocity = { //x:0, x: pick(-3, 3), y: pick(-3, 3) //y:0 }; this.acceleration = { x:0., y:0. }; this.mass = this.radius; } draw() { ctx.beginPath(); ctx.fillStyle = this.color; ctx.arc(this.x, this.y, this.radius, 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.001*(H-this.y); //this.acceleration.y-= 0.0003*(this.y+50); } 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(0, 0, 128, 0.06)"; ctx.fillRect(0,0, W, H); ctx.fillStyle = "rgba(0, 33, 188, 0.1)"; ctx.fillRect(0,D, W, H); ctx.beginPath(); ctx.fillStyle = "gold"; ctx.arc(W*0.8, H*0.1, 20, 0, 2*Math.PI); ctx.fill(); ctx.closePath(); ctx.beginPath(); ctx.fillStyle = "navy"; ctx.arc(W*0.83, H*0.07, 30, 0, 2*Math.PI); ctx.fill(); ctx.closePath(); if(ctx == null) return; crash(p); p.forEach(pi => pi.update()); 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; D = H*0.3; window.alert("Tap the screen to create fish"); requestAnimationFrame(animate); } window.addEventListener("load", init); window.addEventListener("touchstart", touchget);

FishAtNightMovers7