"use strict"; //constants const { PI: π, sin, cos, atan2, hypot, floor } = Math; let g = 3; //variables let c, ctx, W, H; let pd = 2; //pixel density //animation variables let fc; //frame count let paused = false; let btn1, btn2, btn3; let s, m; let m1 = 30; let m2 = 5; let lx,ly; //functions class Particle { constructor(x, y, r, dx, dy) { this.x = x; this.y = y; this.r = r; this.dx = dx; this.dy = dy; this.ax = 0; this.ay = 0; //trail arrays this.tx = []; this.ty = []; this.lines = []; } calcAccel() { //calculate distance between particles let d = hypot(this.x-W/2, this.y-H/2); //calculate total acceleration let a = (g*m1)/(d*d); //calculate angle between particles let disty = this.y - H/2; let distx = this.x - W/2; let φ = atan2(disty, distx); if(φ<0) { φ += 2*π; } let θ; //calculate axial accelerations if(0<=φ && φ<π/2) { //1st quadrant θ = π/2 - φ; this.ax = -a*sin(θ); this.ay = -a*cos(θ); } else if(π/2<=φ && φ<π) { //2nd quadrant θ = π - φ; this.ax = a*cos(θ); this.ay = -a*sin(θ); } else if(π/2<=φ && φ<3*π/2) { //3rd quadrant θ = 3*π/2 - φ; this.ax = a*sin(θ); this.ay = a*cos(θ); } else if(3*π/2<=φ && φ<2*π) { //4th quadrant θ = 2*π - φ; this.ax = -a*cos(θ); this.ay = a*sin(θ); } } update() { this.calcAccel(); this.dx += this.ax; this.dy += this.ay; this.x += this.dx; this.y += this.dy; } draw() { ctx.beginPath(); ctx.arc(this.x, this.y, this.r, 0, 2*π); this.fillStyle = "rgb(0, 0, 0)"; ctx.fill(); ctx.closePath(); //if the particle is moving draw its trail if(this.dx != 0 || this.dy != 0) { this.trail(this.x,this.y); } } trail(x, y) { this.tx.push(x); this.ty.push(y); for(let i=0; i120) { this.lines.shift(); } } if(this.tx.length>2) { this.tx.shift(); this.ty.shift(); } } } class Line { constructor(x1, y1, x2, y2) { this.x1 = x1; this.y1 = y1; this.x2 = x2; this.y2 = y2; } draw() { ctx.beginPath(); ctx.moveTo(this.x1, this.y1); ctx.lineTo(this.x2, this.y2); this.strokeStyle = "rgb(0, 0, 0)"; ctx.stroke(); ctx.closePath(); } } window.onload = () => { c = document.getElementById("Canvas"); ctx = c.getContext("2d"); //canvas --> full screen setSize(window.innerWidth,window.innerHeight,pd); //add event listeners btn1 = document.getElementById("Sp"); btn1.addEventListener("click", sp); btn2 = document.getElementById("Clear"); btn2.addEventListener("click", reset); btn3 = document.getElementById("Info"); btn3.onclick = () => alert("Simulation of 2 particles interacting with each other.\n\nClick on canvas to reposition the moving particle.\nClear to reset its speed.\n\nMath\\Physics documentation @ bottom of html tab.\n\nKeep in mind that this isn't a finished project and it still needs a lot of work."); c.onclick = e => { m.x = pd * e.pageX; m.y = pd * e.pageY; //reset tracer coordinates m.tx = []; m.ty = []; m.lines = []; } //static & moving particles s = new Particle(W/2, H/2, m1, 0, 0); m = new Particle(0, 0, m2, 0.25, 0.2); //axes lx = new Line(0, H/2, W, H/2); ly = new Line(W/2, 0, W/2, H); //begin animation window.requestAnimationFrame(animate); }; const animate = (timestamp) => { clear(); drawStaticShapes(); m.update(); m.draw(); //call next animation recursively fc = window.requestAnimationFrame(animate); }; //utility functions const drawStaticShapes = () => { //draw static particle (attractor) s.draw(); //draw axes lx.draw(); ly.draw(); }; const sp = () => { if(!paused) { window.cancelAnimationFrame(fc); paused = true; } else { window.requestAnimationFrame(animate); paused = false; } }; const clear = () => ctx.clearRect(0, 0, W, H); const reset = () => { clear(); m.dx = m.dy = 0; m.lines = []; drawStaticShapes(); m.draw(); }; const setSize = (w, h, pd) => { //canvas apparent size c.style.width = w + "px"; c.style.height = h + "px"; //canvas actual size c.width = W = w * pd; c.height = H = h * pd; };

Attraction point