let resolution = 0.01;

let bazierCurvePoints = [];

let activesIndex = null;

​

function mouseDragged(){

  if (points.length > 0) {

                if(activeIndex!=null){

                  background(0)

                points[activeIndex].x = mouseX;

                points[activeIndex].y = mouseY;

                  bazierCurvePoints = [];

​

                calcPoints();

            }

    }

  // Prevent default functionality.

  return false;

}

​

​

function mousePressed(){

    activeIndex = null;

    if(mouseX>=0 && mouseX<=400 && mouseY>=0 && mouseY<=400){

    for (var i = 0; i < points.length; i++) {

            let point = points[i];

          distance = dist(mouseX, mouseY, point.x, point.y);

            if (distance <8) {

                activeIndex = i;

               return true

            }}

    bazierCurvePoints = [];

    background(0);

    let point = createVector(mouseX,mouseY);

    points.push(point);

    }

    // calcPoints();

}

​

​

function nCR(n , k)

{

​

    if (k > n)

        return 0;

    if (k == 0 || k == n)

        return 1;

    return nCR(n - 1, k - 1) + nCR(n - 1, k);

}

let drawBtn = document.getElementById('draw');

​

drawBtn.addEventListener('click',calcPoints)

let resetBtn = document.getElementById('reset');

​

resetBtn.addEventListener('click',()=>{

  points = [];

  bazierCurvePoints=  [];

})

function setup() {

  createCanvas(400, 400);

}

​

​

function calcPoints(){

    let n = points.length;

  for(let t=0;t<=1;t+=resolution){

   let temp = createVector(0,0)

      for(let i=0;i<n;i++){

        let f = nCR(n-1,i)

        let s = pow(t,i);

        let l = pow((1-t),(n-1-i));

        let c = f*s*l;

        temp.add(p5.Vector.mult(points[i],c));

      }

    bazierCurvePoints.push(temp)

      }

}

​

let i = 0;

​

function draw() {

  stroke('red');

​

  if(bazierCurvePoints.length>i+1){

    strokeWeight(3)

      line(bazierCurvePoints[i].x,bazierCurvePoints[i].y,bazierCurvePoints[i+1].x,bazierCurvePoints[i+1].y);

    }

  i++;

  if(i>bazierCurvePoints.length){

    background(0)

    i = 0;

  }

  stroke(255)

  strokeWeight(1)

  noFill()

  for(let i =1;i<=points.length;i++){

    if(points.length>i){

    line(points[i-1].x,points[i-1].y,points[i].x,points[i].y)

    }

    vertex(points[i-1].x,points[i-1].y)

    fill(255)

    ellipseMode(CENTER)

    ellipse(points[i-1].x,points[i-1].y,16);

    fill('red')

    strokeWeight(1)

    textAlign(CENTER,CENTER)

    text(i,points[i-1].x,points[i-1].y);

  }

  // beginShape();

​

  // endShape();

}