# Victoria Reiter – Project 07 – Curves

``````/*
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 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) {
ratio1 = map(mouseX, 0, width, 10, 200);
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.