sketch
/* Nami Numoto
* Section A
* mnumoto@andrew.cmu.edu
* Project 07 - Composition with Curves
*/
var nPoints = 100;
var CYCLOID = 0;
function setup() {
createCanvas(480, 480);
frameRate(10);
}
function draw() {
background(0);
// draw the curve in the middle and iterate 3x
translate(width / 2, height / 2);
for (i = 0; i < 3; i ++) {
drawCycloid();
rotate(90);
}
rotate(mouseX / 50);
}
function drawCycloid() {
// Cycloid:
// https://mathworld.wolfram.com/Cycloid.html
var x;
var y;
var a = constrain(mouseX / 2, 0, 200);
var b = constrain(mouseY / 2, 0, 200);
stroke(240, 3, 252);
noFill();
beginShape();
for (var i = 0; i < nPoints; i++) {
var t = map(i, 0, nPoints, 0, TWO_PI);
x = a * (t - sin(t));
y = a * (1 - cos(t));
vertex(x, y);
}
endShape();
}
I had a hard time figuring out the math behind the functions, but well, I guess I ended up getting it in the end. It’s not very fancy, but I iterated a Cycloid function three times to make a sort of 3-way yin&yang, minus the outer circle.