Project 07 – Composition with Curves

sketch
/* Nami Numoto
 * Section A
 * mnumoto@andrew.cmu.edu
 * Project 07 - Composition with Curves
 */

var nPoints = 100;
var CYCLOID = 0;

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

function draw() {
    background(0);
    // draw the curve in the middle and iterate 3x
    translate(width / 2, height / 2);
    for (i = 0; i < 3; i ++) {
        drawCycloid();
        rotate(90);
    }
    rotate(mouseX / 50);
}

function drawCycloid() {
    // Cycloid:
    // https://mathworld.wolfram.com/Cycloid.html
    
    var x;
    var y;
    
    var a = constrain(mouseX / 2, 0, 200);
    var b = constrain(mouseY / 2, 0, 200);

    stroke(240, 3, 252);
    noFill();
    beginShape();
    for (var i = 0; i < nPoints; i++) {
        var t = map(i, 0, nPoints, 0, TWO_PI);
        x = a * (t - sin(t));
        y = a * (1 - cos(t));
        vertex(x, y);
    }
    endShape();
}

I had a hard time figuring out the math behind the functions, but well, I guess I ended up getting it in the end. It’s not very fancy, but I iterated a Cycloid function three times to make a sort of 3-way yin&yang, minus the outer circle.

Cycloid function without any transformations
Started constraining x and y to mouseX and mouseY and rotating the canvas with mouseX
3 iterations with aforementioned constraints and transformations

Leave a Reply