//Elizabeth Maday
//emaday@andrew.cmu.edu
//Section A
//emaday
function setup() {
createCanvas(640, 480);
}
function draw() {
var distance = int(dist(width/2, height/2, mouseX, mouseY));
var vineTipX = 0;
var vineTipY = 0;
var x = width/2;
var y = height/2;
var r = 0;
var g = 170;
var b = 245;
var eyeSize = 5;
//make color get darker as mouse moves up
if (mouseY < y) {
r -= 0;
g -= distance/2;
b -= distance/2;
//make color lighter as mouse moves down
} else if (mouseY > y) {
r += distance/2;
g += distance/2;
b += 0;
}
background(r, g, b);
//make vines move left and right
if (mouseX > x) {
vineTipX += distance;
}
if (mouseX < x) {
vineTipX -= distance;
}
//make vines move up and down
if (mouseY > y) {
vineTipY += distance;
}
if (mouseY < y) {
vineTipY -= distance;
}
//change eyeSize
if (mouseY < y) {
eyeSize = 4;
}
if (mouseY > y) {
eyeSize = 10;
}
//draw triangles left
noStroke();
fill(0, 97, 85);
triangle(0, 50, 0, 85, 200 + vineTipX, 65 + vineTipY);
triangle(0, 100, 0, 135, 240 + vineTipX, 115 + vineTipY);
triangle(0, 150, 0, 185, 280 + vineTipX, 165 + vineTipY);
triangle(0, 200, 0, 235, 320 + vineTipX, 215 + vineTipY);
triangle(0, 250, 0, 285, 360 + vineTipX, 265 + vineTipY);
triangle(0, 300, 0, 335, 320 + vineTipX, 315 + vineTipY);
triangle(0, 350, 0, 385, 280 + vineTipX, 365 + vineTipY);
triangle(0, 400, 0, 435, 240 + vineTipX, 415 + vineTipY);
//draw triangles right
fill(0, 192, 58);
triangle(550 + vineTipX, 40 + vineTipY, 640, 15, 640, 50);
triangle(510 + vineTipX, 90 + vineTipY, 640, 65, 640, 100);
triangle(460 + vineTipX, 140 + vineTipY, 640, 115, 640, 150);
triangle(410 + vineTipX, 190 + vineTipY, 640, 165, 640, 200);
triangle(460 + vineTipX, 240 + vineTipY, 640, 215, 640, 250);
triangle(510 + vineTipX, 290 + vineTipY, 640, 265, 640, 300);
triangle(550 + vineTipX, 340 + vineTipY, 640, 315, 640, 350);
triangle(600 + vineTipX, 390 + vineTipY, 640, 365, 640, 400);
//draw sun around mouse
fill(255, 188, 0);
stroke(255, 188, 0);
strokeWeight(7);
line(mouseX, mouseY, mouseX + 30, mouseY + 30);
line(mouseX, mouseY, mouseX - 30, mouseY - 30);
line(mouseX, mouseY, mouseX + 30, mouseY - 30);
line(mouseX, mouseY, mouseX - 30, mouseY + 30);
line(mouseX, mouseY, mouseX + 42.5, mouseY);
line(mouseX, mouseY, mouseX - 42.5, mouseY);
line(mouseX, mouseY, mouseX, mouseY + 42.5);
line(mouseX, mouseY, mouseX, mouseY - 42.5);
strokeWeight(2);
ellipse(mouseX, mouseY, 40, 40);
//draw sun face
stroke(0);
line(mouseX - 10, mouseY + 3, mouseX + 10, mouseY + 3);
fill(0);
ellipse(mouseX - 8, mouseY - 5, eyeSize, eyeSize);
ellipse(mouseX + 8, mouseY - 5, eyeSize, eyeSize);
//draw fish
var dist2 = (0, 100, mouseX, mouseY);
noStroke();
ellipseMode(CENTER);
fill(0);
triangle(dist2 + 13, 400, dist2 + 25, 385, dist2 + 25, 415); //bottom fish tail
fill(255, 73, 177);
ellipse(dist2, 400, 30, 30); //bottom fish body
fill(0);
ellipse(dist2 - 5, 400, 5, 5); //bottom fish eye
fill(0);
ellipse(dist2 + width/2 + 13, 80, 17, 12); //top fish tail
fill(255, 121, 0);
ellipse(dist2 + width/2, 80, 30, 30); //top fish body
fill(0);
ellipse(dist2 - 5 + width/2, 80, 5, 5); //top fish eye
}
With this project, I liked how I was able to play around with a concept. The sun image represents sunlight entering an underwater scene, and all the other elements react to its position.