xxxxxxxxxx
81
/*
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
}