let t=0;
let v0=50
let x0=60
let y0=60
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(Math.min(window.innerWidth,width), height);

        v0t=node.createElement('span', '');
        katex.render("v_0", v0t.elt);
        v0t.elt.style.color="white"

        r=node.createElement('span', '');
        katex.render("\\vec{r}(t)", r.elt);
        r.elt.style.color="white"
        
        vt=node.createElement('span', '');
        katex.render("v(t)", vt.elt);
        vt.elt.style.color="white"

    };

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

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

    function v(t) {
        return (-g * t + v0)
    }

    
    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)])
        node.push()
        node.fill(22)
        node.stroke(180)
        draw_arrow(node,x(t),y(t),x(t)+x0,y(t)-v(t),vt,c)
        draw_arrow(node,x0,height-y0,x(t),y(t),r,c)
        draw_arrow(node,x0,height-y0,x0+v0,height-(y0+v0),v0t,c)
        if(t>50 || (height-y0)<y(t)){
            node.stop()
        }
        t+=0.05
    };
    
    node.windowResized = function(){
        node.resizeCanvas(Math.min(window.innerWidth,width), height);
        draw_arrow(node,x(t),y(t),x(t)+x0,y(t)-v(t),vt,c,true)
        draw_arrow(node,x0,height-y0,x(t),y(t),r,c,true)
        draw_arrow(node,x0,height-y0,x0+v0,height-(y0+v0),v0t,c,true)
    }
};

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()
    
}