A modified hypotrochoid on top of a modified epitrochoid! I reversed x and y in the second vertex function to create the double layered effect.
sketch
// Zoe Lin (ID: youlin)
// Section B
var nPoints = 80;
var angle;
var x, y, theta;
var r, g, b;
function setup() {
createCanvas(480, 480);
}
function draw() {
r = map(mouseX, 0, width, 0, 20); //draws bg color based on mouse pos
g = map(mouseY, 0, height, 0, 20);
b = map(mouseX, 0, height, 0, 20);
background(r, g, b);
noFill();
stroke(130);
translate(width/2, height/2);
moddedeEpitrochoid(); //draws first geometry at center
rotate(HALF_PI); //draws second at an angle
moddedeEpitrochoid();
hypotrochoid();
rotate(PI / 3); //repeat at third angle
moddedeEpitrochoid();
hypotrochoid();
function moddedeEpitrochoid() {
var a = 85; //angle
var h = constrain(mouseY / 10, 0, 100); //limits geometry size
var mouse = mouseX / 70;
beginShape();
for (var i = 0; i < nPoints; i++) {
theta = map(i, 0, nPoints, 0, TWO_PI);
//modified formula for epitrochoid
x = (a+a/2) * sin(theta) - cos(mouse + theta * (a + a/2) / a/2) * h;
y = (a+a/2) * cos(theta) - sin(mouse + theta * (a + a/2) / a/2) * h;
vertex(x, y);
vertex(y, x); //layers vertexes, draws 2d geometry
}
endShape();
}
strokeWeight(0.25);
}
function hypotrochoid() {
var h = constrain(mouseX / 100, 205, height); //contrains geometry size
var a = map(mouseX, 0, width, 25, 15); //maps mouse pos to desired angle
var b = map(mouseY, 0, height, 0, 15);
beginShape();
for (var i = 0; i < nPoints-15; i ++) {
var theta2 = map(i, 0, width/2, 0, 50);
//hypotrochoid formula
x = (a - b) * cos(theta2) + h * sin((a - b) * theta2);
y = (a - b) * sin(theta2) - h * cos((a - b) * theta2);
vertex(x, y);
}
endShape();
}