Project 07 – Composition with Curves

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;
    }
}

Leave a Reply