​

let p1;

let p2;

​

let drag = null;

​

let endPoints = [];

​

function setup() {

  createCanvas(400, 400);

  noFill();

  stroke(0, 10);

  p1 = pointOnScreen();

  p2 = pointOnScreen();

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

    endPoints.push(pointOnScreen());

  }

}

​

function draw() {

  background(220);

  const x = width/2;

  const y = height/2;

  endPoints.forEach(p => {

    noFill();

    bezier(x, y, p1.x, p1.y, p2.x, p2.y, p.x, p.y);

    // fill(0, 10);

    // circle(p.x, p.y, 5);

  });

  fill(255, 0, 0);

  ellipse(p1.x, p1.y, 20);

  ellipse(p2.x, p2.y, 20);

}

​

function mousePressed() {

  if(dist(p1.x, p1.y, mouseX, mouseY) < 10) {

    drag = p1;

  } else if(dist(p2.x, p2.y, mouseX, mouseY) < 10) {

    drag = p2;

  }

}

​

function mouseDragged() {

  if(drag) {

    drag.x = mouseX;

    drag.y = mouseY;

  }

}

​

function mouseReleased() {

  drag = null;

}

function pointOnScreen() {

  return createVector(random(width), random(height));

}