bezier test

let x1, y1;

let x2, y2;

let cx1, cy1;

let cx2, cy2;

let cp1 = false;

let cp2 = false;

let xp1 = false;

let xp2 = false;

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  background(230);

  x1 = 100;

  y1 = 150;

  x2 = 200;

  y2 = 150;

  cx1 = 50;

  cy1 = 50;

  cx2 = 250;

  cy2 = 50;

​

}

​

function draw() {

  background(230);

  push();

  noFill();

  bezier(x1, y1, cx1, cy1, cx2, cy2, x2, y2);

  stroke(255, 0, 0);

  strokeWeight(4);

  circle(x1, y1, 5);

  circle(x2, y2, 5);

  stroke(0, 0, 250);

  circle(cx1, cy1, 5);

  circle(cx2, cy2, 5);

  pop();

}

​

function mousePressed() {

  let mx = mouseX;

  let my = mouseY;

  let d1 = dist(mx, my, cx1, cy1);

  let d2 = dist(mx, my, cx2, cy2);

  let d3 = dist(mx, my, x1, y1);

  let d4 = dist(mx, my, x2, y2);

  if (d1 < 3) {

    cp1 = true;

  } else if (d2 < 3) {

    cp2 = true;

  }else if (d3 < 3) {

    xp1 = true;

  }else if (d4 < 3) {

    xp2 = true;

  }

}

​

function mouseDragged() {

  if (cp1) {

    cx1 = mouseX;

    cy1 = mouseY;

  } else if (cp2) {

    cx2 = mouseX;

    cy2 = mouseY;

  }else if (xp1) {

    x1 = mouseX;

    y1 = mouseY;

  }else if (xp2) {

    x2 = mouseX;

    y2 = mouseY;

  }

}

​

function mouseReleased() {

  cp1 = false;

  cp2 = false;

  xp1 = false;

  xp2 = false;

}