// Isabella Hong
// Section A
// ijhong@andrew.cmu.edu
// Project-07
//taken from example code
var nPoints = 100;
function setup() {
createCanvas(600, 600);
noStroke();
frameRate(15);
}
function draw() {
background(0, 0, 77);
//draw evolutes in multiple spots on canvas
push();
translate(width / 8, height / 2);
drawEllipseEvolute();
pop();
push();
translate(width / 3.25, height / 2);
drawEllipseEvolute();
pop();
push();
translate(width / 2, height / 2);
drawEllipseEvolute();
pop();
push();
translate(width / 1.45, height / 2);
drawEllipseEvolute();
pop();
push();
translate(width / 1.15, height / 2);
drawEllipseEvolute();
pop();
}
function drawEllipseEvolute() {
//http://mathworld.wolfram.com/EllipseEvolute.html
//will be used for evolute drawing equations
var x;
var y;
//keep within canvas
var a = constrain((mouseX / width), 0.5, 1);
var b = constrain((mouseY / height), 0.5, 1);
//taken from example code
beginShape();
for (var i = 0; i < nPoints; i++) {
var t = map(i, 0, nPoints, 0, TWO_PI);
//fill evolute
var colorR = map(mouseY, 0, height, 255, 192);
var colorG = map(mouseY, 0, height, 215, 192);
var colorB = map(mouseY, 0, height, 0, 192);
fill(colorR, colorG, colorB);
//equation to draw evolute
x = ((Math.pow(a + (mouseX / 100), 2) - Math.pow(b, 2)) / a * (Math.pow(cos(t), 3)));
y = ((Math.pow(b + (mouseY / 100), 2) - Math.pow(a, 2)) / b * (Math.pow(sin(t), 3)));
vertex(x, y);
}
endShape(CLOSE);
}
For this project, the most difficult thing was getting the curve to draw properly and figuring out how to code the curve properly. The ellipse evolute curve was the only one that I could get to work and appear in the correct manner.
My inspiration for this project were stars and the night sky. As the mouse is moved, the “stars” enlarge or shrink and change from a gold to silver color. When the mouse is moved all the way to the far left, the stars almost “disappear”, representing an ultra dark night sky.