var nPoints = 100;
function setup() {
createCanvas(480, 480);
background(255);
}
function draw() {
angleMode(DEGREES);
var r = map(mouseX, 0, width, 0, 360); //rotate using x axis
var m = map(mouseY, 0, height, 0, 360); //rotate using y axis
background(255);
push();
translate(width/2, height/2); //move Epicycloid to center
rotate(r);
rotate(-m);
drawEpicycloid(); //draws the function below
pop();
}
function drawEpicycloid() {
var a = 50; //set sizes of curves
var b = 50;
var aa = map(a,0,50,50,mouseX-350);
var bb = map(b,0,50,50,mouseY-350);
fill(220,180,165); //add butt color
beginShape();
for (var i = 0; i < nPoints; i++) {
angleMode(RADIANS);
var t = map(i,0,nPoints,0,TWO_PI); //map the points to a circular area
x = (aa+bb)*cos(t)-bb*cos((t*(aa+bb))/bb);
y = (aa+bb)*sin(t)-bb*sin((t*(aa+bb))/bb);
vertex(x,y);
endShape(CLOSE);
}
}
I started with a basic code that let me create the simplest Epicycloid, which is basically in the form of a butt. I, therefore, took that notion and turned the shape’s color to skin tone. However, I added parameters that allowed me to change the rotation and overall shape of the Epicycloid using mouseX and mouseY. All in all, due to the randomness of the mouseX and mouseY alterations, I loved how I could stop anywhere along the square and it would procure a different shape.