​

var x0 = 200;

var y0 = 300;

​

var x1 = 100;

var y1 = 200;

​

var x2 = 200;

var y2 = 100;

​

var x3 = 300;

var y3 = 200;

​

var x4 = 200;

var y4 = 300;

​

​

function setup() {

  createCanvas(400, 400);

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

  print("see https://processing.org/reference/curveVertex_.html");

}

​

function draw() {

  background(200, 100, 0);

​

  circles_and_mouse();

  //circum_circle(x1, y1, x2, y2, x3, y3)

  my_3_point_curve_using_5_points(x0, y0, x1, y1, x2, y2, x3, y3, x4, y4);

}

​

function circles_and_mouse() {

  stroke(0);

  noFill();

  ellipse(x0, y0, r);

  text("0", x0 + 3, y0 - 3);

  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);

  x4 = mouseX;

  y4 = mouseY;

  ellipse(x4, y4, r);

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

​

​

}

​

function my_3_point_curve_using_5_points(x0, y0, x1, y1, x2, y2, x3, y3, x4, y4) {

  stroke(250, 250, 0);

  noFill();

  strokeWeight(3);

  beginShape();

  curveVertex(x0, y0);

  curveVertex(x1, y1);

  curveVertex(x2, y2);

  curveVertex(x3, y3);

  curveVertex(x4, y4);

  endShape();

  strokeWeight(1);

}

​

function circum_circle(x1, y1, x2, y2, x3, y3){

  // make lines for the triangle

  stroke(0);

  line( x1,y1,x2,y2);

    stroke(255,0,0);

  point(x1+(x2-x1)/2,y1+(y2-y1)/2);

  stroke(0);

  line( x2,y2,x3,y3);

    stroke(255,0,0);

  point(x2+(x3-x2)/2,y2+(y3-y2)/2);

  stroke(0);

  line( x3,y3,x1,y1);

    stroke(255,0,0);

  point(x3+(x1-x3)/2,y3+(y1-y3)/2);

}