//Sadie Johnson
//section C
//sajohnso@andrew.cmu.edu
//project 07
var nPoints = 100;
function setup() {
createCanvas(400, 400);
frameRate(10);
}
function draw() {
background(255);
push();
//centers design
translate(width / 2, height / 2);
drawCurve();
pop();
}
function drawCurve() {
var x;
var y;
//size is linked to mouse's distance from center
var a = int((dist(width/2,height/2,mouseX,mouseY))/2);
var h = mouseY/50;
var ph = constrain(mouseX / width, 30, 400);
fill('#98ddde'); //light blue
beginShape();
for (var i = 0; i < nPoints; i++) {
var t = map(i, 0, nPoints, 0, TWO_PI);
//equation of the curve
x = a*(h*cos(t)-cos(h*t*ph))
y = a*(h*sin(t)-sin(h*t*ph))
vertex(x, y);
}
endShape(CLOSE);
}
The hardest part of this assignment was finding a function that made sense to me and looked interesting. After I found the correct function, I had a pretty tough time scaling it appropriately so the user could see all the complex designs that were formed when the X position and Y position of the mouse changed. In the first picture, my design was far too small. In the second, it looked bland because the image was so large it enveloped the whole screen. However, I think I have found a happy medium between the two extremes.