Victoria Reiter – Project 07 – Curves

sketch

/*
Victoria Reiter
Section B
vreiter@andrew.cmu.edu
Project-07-Curves
*/

// initial angle of rotation for the shape
var angle = 0;

function setup() {
    // establishes canvas size
    createCanvas(480, 480);
}

function draw() {
    // sets background color
    // the same one as from my ptoject 3... I really like it:)
    // the opacity gives it a cool fading effect!
    background('rgba(255,187,203,0.05)');
    // C's get DEGREES
    angleMode(DEGREES);
    // declares variables that will be used in the mathy-math later on
    var x;
    var y;
    var radius1;
    var radius2;
    var ratio1;
    var ratio2;
    // center x and center y points
    var cx = width / 2;
    var cy = height / 2;
    // color of shape's line will change as mouse moves from right to left
    var strokeColor = map(mouseX, 0, width, 0, 255);
    // color of shape's fill will change as mouse moves from right to left
    var fillColor = map(mouseX, 0, width, 255, 0);
    // makes that angle of rotation will change as mouse moves up and down
    var increment = map(mouseY, 0, height, 0, 7);

    beginShape();
    stroke(strokeColor);
    fill(fillColor);
    push();
    // draws at center of canvas
    translate(cx, cy);
    rotate(angle);
    // math *bows*
    for (var theta = 0; theta < 360; theta +=1) {
        radius1 = 70;
        radius2 = 30;
        ratio1 = map(mouseX, 0, width, 10, 200);
        x = (radius1 * cos(theta) + radius2 * cos(theta * ratio1));
        y = (radius1 * sin(theta) + radius2 * cos(theta * ratio1));
        vertex(x, y);
    }
    // makes the shape rotate
    angle = angle + increment;
    endShape(CLOSE);
    pop();
}

So doing this project, I struggled a bit because, uh, I haven’t had to use cos or sin since highschool….
Anyway. I got inspiration from Spirographs, since I think they’re cool and vintage-y and nostalgic and remind me of being little and stories my parents have told me. But how does one draw a Spirograph??? I took to the internet to find out. I found many very unhelpful resources, and one most-helpful one, here. It listed the equations x = cx + radius1 × cos(θ) + radius2 × cos(θ) and y = cy + radius1 × sin(θ) + radius2 × cos(θ), which I used to design my curve.

I have interactive elements for the shape fill, shape color, density(?) of curves comprising the shape, and speed of rotation.

And I made the background pretty pink with the opacity toyed with for a cool effect, stolen from my own Project 3 assignment because I like this effect so much.

Very trippy, this project. Quite trippy.