I wasn’t really inspired by anything this time but I had an idea in mind of a rotating curve that had a trailing effect. I ended up with a variable epicycloid curve, formed by a point traced by a circle’s radius as it rotates around a larger circle. Clicking on the screen adds “petals” to the shape of the curve. At first, I wanted to experiment with a reuleaux triangle and make an animation similar to a rotary engine, but couldn’t figure out the math behind making the triangle follow an eccentric path.
sketch
/*
* Eric Zhao
* ezhao2@andrew.cmu.edu
*
* Interactive composition with epicycloid curves
* that changes color with a gradient effect. Click
* to increase the number of "petals" on the curves.
*
*/
var numPoints = 75;
var thetaCanvas = 0;
var rotateSpeed = 2;
var multiplier = 2;
var totalScale;
var epicycloid = [];
var baseFill;
function setup() {
createCanvas(480, 480);
background(220);
strokeWeight(2);
fill(0);
angleMode(DEGREES);
colorMode(HSB);
}
function draw() {
for (let i = 0; i < 10; i++){
//creates series of nested epicycloid curve objects
epicycloid[i] = new Object();
epicycloid[i].shapeScale = 1 - i/10;
epicycloid[i].a = epicycloid[i].shapeScale * 100;
epicycloid[i].b = epicycloid[i].a / multiplier;
epicycloid[i].theta = 0;
}
totalScale = map(sin(thetaCanvas), -1, 1, 0.33, 1);
//makes composition zoom in and out smoothly
background(0);
push();
translate(width/2, height/2);
rotate(thetaCanvas);
scale(totalScale);
for (let i = 0; i < epicycloid.length; i++){
//slightly offsets hue and rotation of each successive curve
push();
rotate(i*10);
baseFill = ((thetaCanvas + i*10)*2) % 360;
stroke(baseFill, 100, 100);
epicycloidCurve(epicycloid[i]);
pop();
}
pop();
thetaCanvas += rotateSpeed;
}
function epicycloidCurve(e){
//Epicycloid curve equation
beginShape();
for(let i = 0; i <= numPoints; i++){
e.theta = map(i, 0, numPoints, 0, 360);
e.x = ((e.a + e.b) * cos(e.theta) - e.b * cos(((e.a + e.b)/e.b) *
e.theta));
e.y = ((e.a + e.b) * sin(e.theta) - e.b * sin(((e.a + e.b)/e.b) *
e.theta));
curveVertex(e.x, e.y);
}
endShape(CLOSE);
}
function mousePressed(){
//changes number of "petals" in the epicycloid
multiplier++;
if(multiplier > 5){
multiplier = 2;
}
}