// under Description, Syntax, Parameters

// BUT not defined as points / or PVectors confusing

​

var r = 7;

// control point

var x1 = 100;

var y1 = 200;

// curve start point

var x2 = 200;

var y2 = 100;

// curve end point

var x3 = 300;

var y3 = 200;

// control point

var x4 = 200;

var y4 = 300;

// point between start and end

var t = 0.5

var xt;

var yt;

​

function setup() {

  createCanvas(400, 400);

  print("use mouse to move point 4");

  print("see YELLOW https://p5js.org/reference/#/p5/curvePoint");

  print("see GREEN https://p5js.org/reference/#/p5/curveVertex");

  print("see BLACK https://p5js.org/reference/#/p5/bezierVertex");

​

  print("example curveVertex: https://editor.p5js.org/kll/sketches/sv42w8nNe");

  print("see JAVA version http://studio.sketchpad.cc/BWM6hQRzcv");

}

​

function draw() {

  background(200, 100, 0);

  x4 = mouseX;

  y4 = mouseY;

  circles_and_mouse();

}

​

function circles_and_mouse() {

  stroke(0);

  noFill();

  ellipse(x1, y1, r);

  text("1", x1 + 3, y1 - 3);

  ellipse(x2, y2, r);

  text("2", x2 + 3, y2 - 3);

  ellipse(x3, y3, r);

  text("3", x3 + 3, y3 - 3);

  ellipse(x4, y4, r);

  text("4", x4 + 3, y4 - 3);

​

  stroke(250, 250, 0);

  noFill();

  strokeWeight(3);

  curve(x1, y1, x2, y2, x3, y3, x4, y4);

  xt = curvePoint(x1, x2, x3, x4, t);

  yt = curvePoint(y1, y2, y3, y4, t);

  stroke(0);

  noFill();

  strokeWeight(1);

  ellipse(xt, yt, r, r);

  text("t", xt + 3, yt - 3);

  // now play also 5 point curveVertex to draw a 3 point curve between 2,t,3

  stroke(0,255,0);

  noFill();

  strokeWeight(2);

  beginShape();

  curveVertex(x1, y1);      // control point 1

  curveVertex(x2, y2);      // curve start

  curveVertex(xt, yt);      // curve mid point t = 0.5

  curveVertex(x3, y3);      // curve end

  curveVertex(x4, y4);      // control point 4

  endShape();

​

//  and also bezierVertex

  stroke(0);

  strokeWeight(1);

  beginShape();

  vertex(x2,y2);

  bezierVertex(x1, y1, x4, y4, x3, y3);

  endShape();

}