physics/projects/projectile/index.js

let t=0;
let v0=50
let x0=50
let y0=50
let g=9.81

let projectile= function (node){
    let width=800
    let height=300
    let dots=[] // Dots that show projectile path
    
    node.setup = function() {
        c=node.createCanvas(width, height);
        v0t=node.createElement('p', '');
        katex.render("v_0", v0t.elt);
        v0t.elt.style.color="#b4b4b4"
    };

    // See explanations
    function x(t) {
        return x0+v0*t
    }

    function y(t) {
        return height - (-1/2 * g * t**2 + v0 * t + y0)
    }

    
    node.draw = function() {
        node.background(70);
        node.noStroke();
        dots.forEach((elt)=>{node.ellipse(elt[0],elt[1],5,5);})
        node.fill(255)
        node.ellipse(x(t),y(t),20,20);
        node.fill(255)
        dots.push([x(t),y(t)])
        if(t>50 || y(t)>height){
            node.noLoop()
        }
        t+=0.05
        node.push()
        node.fill(22)
        node.stroke(180)
        m=draw_arrow(node,x0,height-y0,x0+v0,height-y0-v0)
        console.log(m.y)
        v0t.position(c.position().x+m.x,c.position().y+m.y)
        node.pop()
    };
    
    node.windowResized = function(){
        v0t.position(c.position().x+m.x,c.position().y+m.y)
        node.resizeCanvas(Math.min(window.innerWidth,width), height);

    }
};

refresh=function(){
    t=0
    x0=parseFloat(app.x0)
    y0=parseFloat(app.y0)
    v0=parseFloat(app.v0)
    g=parseFloat(app.g)
    console.log(app.x0)
    p5Load()
}



project_init=function(){
    app = new Vue({
        el: '#app',
        data :{
            x0:x0,
            y0:y0,
            v0:v0,
            g:g
        }
    })
    p5Load()
    
}