let p = [], v=[];
let lines = [];
let theta=3/2 * Math.PI, t=0, clicks=0;

function setup(){
    createCanvas(1000, 800);

    initQuadCurve();
}

function draw(){
    background(63);

    for(let i = 0; i < p.length; i++){
            p[i].drawPoint();
    }

    if(clicks > 2){
        for(let i = 0; i < lines.length; i++){
            lines[i].drawLine();
        }

        lerpQuadCurve();
        drawCurve();
    }
}

function drawCurve(){
    if (v.length > 100*Math.PI){v=[];}
    stroke(0, 255, 0, 200);
    strokeWeight(5);

    beginShape(LINES);
    for (let i=0; i < v.length; i++){
        vertex(v[i].x, v[i].y);
    }
    endShape();
}

function mouseClicked(){
    if (clicks < 3){
        p[clicks].changeX = mouseX;
        p[clicks].changeY = mouseY;
    } else {
        let c = clicks % 3;
        p[c].changeX = mouseX;
        p[c].changeY = mouseY;
    }
    v=[];
    clicks ++;
    t=0;
    theta=3/2 * Math.PI;
}

function initQuadCurve(){
    p[0] = new cPoint(0,0);
    p[1] = new cPoint(0,0);
    p[2] = new cPoint(0,0);

    p[3] = new cPoint(0, 0);
    p[4] = new cPoint(0, 0);
    p[5] = new cPoint(p[0].x, p[0].y);

    lines[0] = new cLine(p[0], p[1]);
    lines[1] = new cLine(p[1], p[2]);
    lines[2] = new cLine(p[3], p[4]);
}

function lerpQuadCurve(){
    p[3].changeX = (1-t)*p[0].x + t * p[1].x;
    p[3].changeY = (1-t)*p[0].y + t * p[1].y;

    p[4].changeX = (1-t)*p[1].x + t * p[2].x;
    p[4].changeY = (1-t)*p[1].y + t * p[2].y;

    p[5].changeX = (1-t)*p[3].x + t * p[4].x;
    p[5].changeY = (1-t)*p[3].y + t * p[4].y;

    v.push(new cPoint(p[5].x, p[5].y));

    if (theta > 2*Math.PI){theta=0;}
    theta += 0.01;
    t = (Math.sin(theta) + 1) / 2;
}