# NatalieKS-Project-07

This project was pretty difficult for me since I hadn’t worked with trig functions and parametric equations in over a year. Most of the time spent on this was just trying to figure out what the equations actually did when implemented in p5js, and understanding what i needed to change in order to get my desired result. I wanted to draw a little picture, and when I saw the ellipse evolute, it reminded me of the stars from Peter Pan. The star changes size and color as you move the mouse. I would’ve liked to try to create some kind of glow around the stars, and I tried using filter() and blur(), but both functions messed with the frame rate in a way that I didn’t know how to fix, so I abandoned the idea. I tried to reference this image, just because I liked the colors and shape.

``````//Natalie Schmidt
//nkschmid@andrew.cmu.edu
//Section D
//Project-07

//taken from examplde code
var nPoints = 100;
var R; //for color "r"
var G; //for color "g"
var B; //for color "b"

function setup() {
createCanvas(300, 480);
frameRate(20);
}

function draw() {
//draw the two stars
background(22, 42, 67);
push();
translate(width - 70, height-400);
drawLargeEllipseEvolute();
pop();
push();
translate(width- 120, height - 350);
drawLargeEllipseEvolute();
pop();

fill(255);
textSize(24);
text("Second star to the right", 25, 420);
text("and straight on til morning!", 10, 450);
//draw small random stars
//modified code from
//http://alpha.editor.p5js.org/nanou/sketches/rJ-EMpxa
fill(255);
var star = {x : 100, y : 50};
star.x = random(0, width);
star.y = random(0, height);
ellipse(star.x, star.y, 4, 4);
ellipse(star.x, star.y, 4, 4);
//draw Peter Pan!
drawPeter();
}

function drawLargeEllipseEvolute() {
//modified version of the example code
var x;
var y;
var a = constrain(mouseX, 0, width);
//map the value so it only expands a little
var a1 = map(a, 0, 300, 0, 15);
var b = constrain(mouseY, 0, height);
//map the value so it expands only a little
var b1 = map(b, 0, 300, 0, 15);
//change colors with mouse
R = map(mouseX, 0, width, 138, 255);
G = map(mouseX, 0, width, 153, 255);
B = map(mouseX, 0, width, 196, 255);

fill(R, G, B);
stroke(61, 80, 112);
beginShape();
for (var i = 0; i < nPoints; i++) {
var t = map(i, 0, nPoints, 0, TWO_PI);

x = ((sq(a1) - sq(b1))/a1) * pow(cos(t), 3);
y = ((sq(b1) - sq(a1))/b1) * pow(sin(t), 3);
vertex(x, y);
}
endShape(CLOSE);
}

function drawPeter() {
//draw Peter Pan!
fill(0);
ellipse(125, 225, 20, 20);
push();
//body
translate(113, 252);
rotate(35);
ellipse(0, 0, 20, 40);
pop();
//left leg
push();
translate(98, 270);
rotate(35);
ellipse(0, 0, 7, 25);
pop();
//right leg
push();
translate(110, 275);
rotate(35);
ellipse(0, 0, 7, 25);
pop();
//left foot
ellipse(91, 278, 8, 8);
//right foot
ellipse(107, 286, 8, 8);
//left arm
push();
translate(102, 236);
rotate(90);
ellipse(0, 0, 8, 25);
pop();
//right arm
push();
translate(130, 250);
rotate(90);
ellipse(0, 0, 8, 25);
pop();
//peter pan hat!
triangle(118, 216, 123, 196, 133, 221);
//feather on hat
stroke(4);
line(120, 215, 115, 198);
}
``````