​

​

var r = 7;

​

var x0 = 200;

var y0 = 300;

​

var x1 = 50;

var y1 = 80;

​

var x2 = 250;

var y2 = 30;

// mouse point for circum_circle play

var x3 = 350;

var y3 = 250; // if y3 < y1 ERROR in calc

// mouse point for curveVertext play

var x4 = 200;

var y4 = 300;

​

var use_Lexyth = false;

var useCurve = false;

​

function setup() {

  createCanvas(400, 400);

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

  if (!useCurve) print("use mouse to move point 3");

  print("use key [c] for switch curveVertex");

  print("use key [l] for switch to Lexyth curveVertex");

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

  print("see https://en.wikipedia.org/wiki/Circumscribed_circle");

  calc_something(true)

​

}

​

function draw() {

  background(200, 100, 0);

​

  circles_and_mouse();

  calc_something(false);

  circum_circle();

  if (useCurve) my_3_point_curve_using_5_points();

}

​

function circles_and_mouse() {

  stroke(0);

  noFill();

  if (!use_Lexyth) {

    if (useCurve) ellipse(x0, y0, r);

    if (useCurve) 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);

  if (!useCurve) x3 = mouseX;

  if (!useCurve) y3 = mouseY;

  ellipse(x3, y3, r);

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

  if (!use_Lexyth) {

    if (useCurve) x4 = mouseX;

    if (useCurve) y4 = mouseY;

    if (useCurve) ellipse(x4, y4, r);

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

  }

}

​

function my_3_point_curve_using_5_points() {

  stroke(250, 250, 0);

  noFill();

  strokeWeight(3);

  beginShape();

  if (!use_Lexyth) curveVertex(x0, y0);

  curveVertex(x1, y1);

  curveVertex(x2, y2);

  curveVertex(x3, y3);

  if (!use_Lexyth) curveVertex(x4, y4);

  if (use_Lexyth) {

    endShape(CLOSE);

  } else {

    endShape();

  }

  strokeWeight(1);

}

​

var L12, L23, L31, A1, A2, A3, M12x, M12y, M23x, M23y, M31x, M31y;

​

var CR, CRx, CRy, CRA, MR;

​

function calc_something(doprint) {

  // ok do some math

  L12 = dist(x1, y1, x2, y2);

  L23 = dist(x2, y2, x3, y3);

  L31 = dist(x1, y1, x3, y3);

  if (doprint) print("L12: " + nf(L12, 1, 1) + " L23: " + nf(L23, 1, 1) + " L31: " + nf(L31, 1, 1) + " px");

​

  // now that is a SSS triangle, calc the angles

  A1 = acos((sq(L12) + sq(L31) - sq(L23)) / (2 * L12 * L31));

  A2 = acos((sq(L12) + sq(L23) - sq(L31)) / (2 * L12 * L23));

  A3 = acos((sq(L23) + sq(L31) - sq(L12)) / (2 * L23 * L31));

  if (doprint) print("A1: " + nf(degrees(A1), 1, 1) + " A2: " + nf(degrees(A2), 1, 1) + " A3: " + nf(degrees(A3), 1, 1) + " , check sum: " + nf(degrees(A1 + A2 + A3), 1, 1) + " deg");

​

  // calc middle points 

  M12x = x1 + (x2 - x1) / 2;

  M12y = y1 + (y2 - y1) / 2;

  M23x = x2 + (x3 - x2) / 2;

  M23y = y2 + (y3 - y2) / 2;

  M31x = x3 + (x1 - x3) / 2;

  M31y = y3 + (y1 - y3) / 2;

  //the common angle of departure being 90° minus the angle of the opposite vertex

  // for CR must be: L31/2 = CR*cos(90-A2);

  // now read WIKI:  sinus law! 2CR = L31/sin(A2) 

//  CR = L31 / 2 / cos(HALF_PI - A2);

  CR = L31 / 2 / sin(A2);

  MR = CR * sin(HALF_PI - A2);

  if (doprint) print("CR: " + nf(CR, 1, 1) + " MR: " + nf(MR, 1, 1) + " px ");

  CRA = acos((x3 - x1) / L31) - (HALF_PI - A2); // angle p1 p3 line - ( 90 - p2 angle)

  CRx = x1 + CR * cos(CRA);

  CRy = y1 + CR * sin(CRA);

  if (doprint) print("CR: " + nf(CR, 1, 1) + " px, CRA: " + nf(degrees(CRA), 1, 1) + " deg ");

​

}

​

function circum_circle() {

  // make lines for the triangle and midpoints

  stroke(0);

  line(x1, y1, x2, y2);

  stroke(255, 0, 0);

  ellipse(M12x, M12y, r, r);

​

  stroke(0);

  line(x2, y2, x3, y3);

  stroke(255, 0, 0);

  ellipse(M23x, M23y, r, r);

​

  stroke(0);

  line(x3, y3, x1, y1);

  stroke(255, 0, 0);

  ellipse(M31x, M31y, r, r);

  ellipse(CRx, CRy, r, r);

  fill(150,0,0);

  triangle(x1,y1,CRx,CRy,M31x,M31y);  // one of 6 magic triangles what rule the circum circle

    noFill();

  stroke(200, 200, 0);

  ellipse(CRx, CRy, 2 * CR, 2 * CR);  // circum circle yellow 

  stroke(0);

  textFont(10);

  text("CR: "+nf(CR,1,1)+" CRA: "+nf(degrees(CRA),1,1)+" deg, CRx "+nf(CRx,1,1)+" CRy "+nf(CRy,1,1),10,height-10);

}

​

​

function keyReleased() {

  if (key == 'c' || key == 'C') {

    useCurve = !useCurve;

    print(" show curveVertex " + useCurve);

  }

  if (key == 'l' || key == 'L') {

    use_Lexyth = !use_Lexyth;

    print(" show Lexyth curveVertex " + use_Lexyth);

    if (use_Lexyth) useCurve = true; // also

  }

​

}