​

   Student and Mentor Matching Layout Demo

curve (cpx1, cpy1, x1, y1, x2, y2, cpx2, cpy2);

​

The tangent to the curve at the start point is parallel to the line between control point one and the end of the curve. The tangent to the curve at the end point is parallel to the line between the start point and control point 2.

​

*/

​

scol = 50; // student column x axis

mcol = 350;

let cpsx = -1000; // control point source x

let cotx = 1000;  // control point target x

​

function setup() {

  createCanvas(400, 400);

  textSize(16);

  s1 = {"x": 50,"y":50};

  t1 = {"x": 300,"y":300};

  s2 = {"x": 50,"y":200};

  t2 = {"x": 300,"y":100};

  s3 = {"x": 50,"y":300};

  t3 = {"x": 300,"y":200};

  s4 = {"x": 50,"y":100};

  t4 = {"x": 300,"y":150};

  s5 = {"x": 50,"y":350};

  t5 = {"x": 300,"y":50};

}

​

function draw() {

  background(220);

  // Labels at the Top

  fill('black');

  noStroke();

  text('Students', 20, 25);

  text('Mentors', 300, 25);

  strokeWeight(3);

  noFill();

  circle(0, 400, 5);

  stroke('red');

  circle(s1.x, s1.y, 5);

  circle(t1.x, t1.y, 5);

  // 50 -> 400    300 -> 0

  // au =

  curve(cpsx, 400, s1.x, s1.y, t1.x, t1.y, cotx, 0);

  stroke('green');

  circle(s2.x, s2.y, 5);

  circle(t2.x, t2.y, 5);

  // 200 -> 100.    100 -> 200

  curve(cpsx, 100, s2.x, s2.y, t2.x, t2.y, cotx, 200);

  stroke('blue');

  circle(s3.x, s3.y, 5);

  circle(t3.x, t3.y, 5);

  // 300 -> 200   200 -> 300

  curve(cpsx, 200, s3.x, s3.y, t3.x, t3.y, cotx, 300);

  stroke('purple');

  circle(s4.x, s4.y, 5);

  circle(t4.x, t4.y, 5);

  // 200 -> 100   200 -> 300

  curve(cpsx, 200, s4.x, s4.y, t4.x, t4.y, cotx, 100);

  stroke('orange');

  circle(s5.x, s5.y, 5);

  circle(t5.x, t5.y, 5);

  // 350 -> 0   200 -> 300

  curve(cpsx, 0, s5.x, s5.y, t5.x, t5.y, cotx, 400);

  // s angle up cpx is 0

  // s angle down cpx is 400

}