// Created by Bell, credits to Mirielle for borrowing lines and knowledge from her Newtonian motion code. // Credits to Rowsej for idea from his waffle 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= -9.7; var t= 0; //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.001*pick(-10, 10),y: 0.0005*pick(0,7)}; const oy1 =pick(0, 6.28); const oy2 =pick(0, 6.28); const oy3 =pick(0, 6.28); const oy4 =pick(0, 6.28); const oy5 =pick(0, 6.28); 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; this.ang=0.1*pick(0,1); this.wob=0.001; } draw() { ctx.beginPath(); ctx.fillStyle = this.color; ctx.arc(this.x, this.y, this.radius, (1+this.ang)*Math.PI,(this.ang+2)*Math.PI); ctx.fill(); ctx.closePath(); } // if object hits the wall bounce bounce() { if(this.x - this.radius <= 0 || this.x + this.radius >= W) this.velocity.x = -this.velocity.x; if(this.y - this.radius <= D || this.y + this.radius >= H) this.velocity.y = -0.95*this.velocity.y; } wobble() { if(Math.abs(this.ang)>0.2)this.wob *= -1; this.ang+=this.wob; } // 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.0098; } elasticf() { this.acceleration.y+= 0.0005*(0.7*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; iD)p.push(new Mover (pageX, pageY, radius));} //} function touchget(event) { let pageX = event.pageX; let pageY = event.pageY; let radius = pick(6, 12); // console.log(pageX + " " + pageY + " " + radius) if(pageY>D)p.push(new Mover (pageX, pageY, radius)); } //p.push(new Mover(100, 50, 2)); //for(let i=0; i < 25; i++) { // let radius = pick(2, 8); // let x = pick(radius, W - radius); // let y = pick(radius, H - radius); // p.push(new Mover(x, y, radius)); //} const animate = () => { ctx.fillStyle = "rgba(250, 250, 212, 0.6)"; ctx.fillRect(0,0, W, H); t+=0.3; drawsea(t); //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"); let canvas = document.getElementById("cvs"); canvas.addEventListener(eventBasedOnDevice, touchget); ctx.canvas.width = W = innerWidth; ctx.canvas.height = H = innerHeight; p = []; W = innerWidth; H = innerHeight; D = H*0.3; requestAnimationFrame(animate); audio.muted ? document.getElementById('mute').innerText='🔇': document.getElementById('mute').innerText='🔊'; } // code below added by Kode Krasher // Thanks to @Ore and @Infinite, and @Omkar for the code collaboration! const eventBasedOnDevice = navigator.userAgent.match(/ipod|ipad|iphone/i) ? 'touchstart' : 'click'; function playAudio() { // audio.preload; audio.play(); } function muteAudio() { document.getElementById('audio').muted=!document.getElementById('audio').muted audio.muted ? document.getElementById('mute').innerText='🔇': document.getElementById('mute').innerText='🔊'; } // Initializing EventListers window.addEventListener("load", init); window.addEventListener("resize", init); document.addEventListener(eventBasedOnDevice, playAudio, true);

bell - SeaOfNoise 🌊