Project 07: Composition with Curves

sketchDownload




var bgR;
var bgG;
var bgB;
var x;
var y;

function setup() {
    createCanvas(480, 480);
    frameRate(10);
}

function draw() {
    bgR = map(-mouseY, 0, height, 50, 100); //select random background colors
    bgG = map(-mouseX, 0, width, 50, 200);
    bgB = map(-mouseY, 0, height, 0, 100);
    background(bgR, bgG, bgB);
    translate(220, 220);
    for (var c = 1; c < 5; c ++){ //draw the curve
        for (var d = 1; d < 5; d ++){
            push();
            translate(c * 10, d * 10);
            drawEpicycloidPedalCurve(); //reference to link -- https://mathworld.wolfram.com/EpicycloidPedalCurve.html
            pop();
        }
    }
}

function drawEpicycloidPedalCurve() {
    var a = map(mouseX, 0, width, 15, 100); //parameter of the curve moves with the mouse
    var b = map(mouseY, 0, height, 15, 50);
    noFill();
    stroke(mouseX, mouseY, 180);
    strokeWeight(0.8);

    push();
    beginShape(); //draw the curve
    for (var i = 0; i <= 600; i ++) {
        var theta = map(i, 0, 100, 0, PI); 
        x = (a+b)*cos(theta) - b*cos(((a+b)*theta)/b); //epicycloids are given by the parametric equations
        y = (a+b)*sin(theta) - b*sin(((a+b)*theta)/b);
        vertex(x, y);
    }
    endShape();
    pop();
}
The pedal curve of an epicycloid with pedal point at its origin

For this project, I wanted to iterate a flower-like shape using parameter equations so I decided to draw Epicycloid Pedal Curve as the composition. I played with mouseX and mouseY as well as random RGB colors across the canvas so the user has the freedom to explore with unique variations of epicycloid pedal curve patterns.

Leave a Reply