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

let projectile= function (p){
    let width=800
    let height=300
    let dots=[] // Dots that show projectile path
    let end=false;
    
    p.setup = function() {
        c=p.createCanvas(Math.min(window.innerWidth,width), height);

        v0t=p.createElement('span', '');
        katex.render("v_0", v0t.elt);

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

    };

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

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

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

    let draw_vectors=function(x,y,skiparrow=false){
        p.push()
        p.stroke(199, 141, 107)
        draw_arrow(p,x,y,x+x0,y-v(t),vt,c,skiparrow)
        p.stroke(200)
        draw_arrow(p,x0,height-y0,x,y,r,c,skiparrow)
        p.stroke(122, 199, 107)
        draw_arrow(p,x0,height-y0,x0+v0,height-(y0+v0),v0t,c,skiparrow)
        p.pop()
    }
    
    
    p.draw = function() {
        p.clear()
        let x=xt(t)
        let y=yt(t)
        
        // Draw projectile and path
        p.push()
        p.noStroke()
        p.fill(100)
        dots.forEach((elt)=>{p.ellipse(elt[0],elt[1],5,5);})
        p.fill(0)
        p.ellipse(x,y,20,20);
        p.pop()
               
        // Draw vectors
        draw_vectors(x,y)

        // Check simulation state and update it
        if(t>50 || (height-y0)<y){
              end=true
        }
        
        if(!end){
            t+=0.1
            dots.push([x,y])
        }
    };
    
    p.windowResized = function(){
        p.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()
    
}