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

let projectile= function (node){

    node.setup = function() {
        node.createCanvas(width, height);
    };
    let width=800
    let height=300



    let dots=[]
    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(50);
        node.noStroke();
        dots.forEach((elt)=>{node.ellipse(elt[0],elt[1],5,5);})
        node.ellipse(x(t),y(t),20,20);
        dots.push([x(t),y(t)])
        if(t>50 || y(t)>height){
            node.noLoop()
        }
        t+=0.06
    };
};

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