JSFiddle - React, Tailwind, and code Playground

by Darby Rathbone

HTML

<div id='debug'></div>
<canvas id="canvas" width=500 height=500></canvas>

JavaScript

function dot(a, b) {
    return parseFloat(a.map(function (e, i) {
        return a[i] * b[i];
    }).reduce(function (c, v) {
        return c + v;
    }));
}
function norm(a){
    var m = mag(a);
    return a.map(function(e){return e/m});   
}
function mag(a) {
    return Math.sqrt(a.reduce(function (c, v) {
        return c + (v * v);
    }),0);
}
var p1 = [60, 0];
var p2 = [0, 0];
var g = [0,1];
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var can = document.createElement('canvas');
can.width = can.height = 500;
var c = can.getContext('2d');
p1.vel = [0,0];
p2.vel=0;
window.requestAnimationFrame(animationframe);
setInterval(
function () {
    var o = p1.map(function(e,i){return e-p2[i];});
    var m = mag(o);
    p1.vel = p1.vel.map(function(e,i){return e + g[i];});
    var p = p1.map(function(e,i){return e+p1.vel[i]-p2[i];});
    p = p.map(function(e,i){return p1.vel[i]+e;});
    var tp = norm(p).map(function(e,i){return e*m;});
    
    var tmpp = tp.map(function(e,i){return e+p2[i];}); 
    p1.vel = Math.atan2(
    console.log(p1.vel);
    p1 = tmpp;
    c.clearRect(0, 0, 500, 500);
    c.beginPath();
    c.moveTo(p1[0], p1[1]);
    c.lineTo(p2[0], p2[1]);
    c.stroke();
}, 100);

function animationframe() {
    ctx.clearRect(0, 0, 500, 500);
    ctx.drawImage(can, 0, 0);
    window.requestAnimationFrame(animationframe);
}