![[OLD SEMESTER] 15-104 • Introduction to Computing for Creative Practice](../../wp-content/uploads/2023/09/stop-banner.png)
For this project, I made 2 fish who are lovers that swim randomly around an aquarium looking for each other. When they meet, they fall in love again and the supportive crab in the corner claps for them and a love song plays.
//Catherine Liu
//jianingl@andrew.cmu.edu
//Section D
//project 10
//two fishes swimming around tank (bump sound when they hit the sides)
//when they bump into each other they fall in love (song plays)
//crab clapping for them (clapping sound)
//house bubbles turn into hearts (bubbling sound)
// use http://localhost:8000/ to run html
//variables for pink fish
var x1 = 50;
var y1 = 50;
var dx1 = 50;
var dy1 = 20;
//variables for green fish
var x2 = 300;
var y2 = 300;
var dx2 = 40;
var dy2 = 30;
var meet = false; //checks to see if fish meet
var crabClaw = 1; //keeps track of frame for crab claw clapping
var songCount = 0; //counter for song played
var bubbleArrayX = []; //x value for each bubble
var bubbleArrayY = []; //y value for each bubble
var heartArrayX = []; //x value for each heart
var heartArrayY = []; //y value for each heart
//sound variables
var bump;
var bubbles;
var heart;
var clap;
function preload() {
bump = loadSound("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/11/bump.mp3");
bubbles = loadSound("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/11/bubble-4.wav");
heart = loadSound("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/11/lovesong.mp3");
clap = loadSound("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/11/clap.wav");
}
function setup() {
noStroke();
createCanvas(600, 400);
useSound();
frameRate(10);
//sets up bubble and heart arrays
for (i = 170; i > 50 ; i-=15) {
bubbleArrayX.push(400 + random(-10,10));
bubbleArrayY.push(i);
heartArrayX.push(400 + random(-10,10));
heartArrayY.push(i);
}
}
function soundSetup() {
bump.setVolume(0.2);
bubbles.setVolume(0.2);
clap.setVolume(0.1);
heart.setVolume(0.3)
}
function draw() {
background(65,105,225);
fill(255,250,205);
rect(0,height-50,width,height);
drawCrab();
drawHouse();
//if fish meet, play song and stop bump sounds
if (meet == true) {
bump.stop();
playSong();
}
//if fish have not met, keep moving them
if (meet == false) {
x1 += dx1;
y1 += dy1;
}
fill(255,182,193) //pink fish
drawFish(x1,y1,dx1);
dx1 += random(-5,5);
dy1 += random(-5,5);
if (x1 < 40) {
bump.play();
dx1 = -dx1;
}
if (x1 > width - 40) {
bump.play();
dx1 = -dx1;
}
if (y1 < 40) {
bump.play();
dy1 = -dy1;
}
if (y1 > height - 75) {
bump.play();
dy1 = -dy1;
}
if (meet == false) {
x2 += dx2;
y2 += dy2;
}
fill(173,255,47) //green fish
drawFish(x2,y2,dx2);
dx2 += random(-5,5);
dy2 += random(-5,5);
if (x2 < 40) {
bump.play();
dx2 = -dx2;
}
if (x2 > width - 40) {
bump.play();
dx2 = -dx2;
}
if (y2 < 40) {
bump.play();
dy2 = -dy2;
}
if (y2 > height - 75) {
bump.play();
dy2 = -dy2;
}
meetUp(25); //checks if fish have met
}
function drawFish(x, y, dx) {
ellipse(x, y, 60, 40); //fish body
//checks which direction fish is facing to draw tail
if (dx > 0) {
if (meet == true) { //if fish met, draw smile
push();
fill(0);
circle(x+20,y,10);
pop();
push();
noFill();
stroke(2);
arc(x+10, y+7, 10, 10, 0, PI);
pop();
} else { //no smile
push();
fill(0);
circle(x+20,y,10);
pop();
}
triangle(x-30, y, x-50, y-10, x-50, y+10); //fish tail
} if (dx < 0) {
if (meet == true) { //if fish met, draw smile
push();
fill(0);
circle(x-20,y,10);
pop();
push();
noFill();
stroke(2);
arc(x-10, y+7, 10, 10, 0, -PI);
pop();
} else { //no smile
push();
fill(0);
circle(x-20,y,10);
pop();
}
triangle(x+30, y, x+50, y-10, x+50, y+10); //fish tail
}
}
//checks if fish have "met" by checking distance between them <= 0 and draws heart
function meetUp(size) {
if (dist(x1, y1, x2, y2) <= 40) {
//draws heart
fill("red")
var xPos = x1;
if ((y1-70) < 10) {
var yPos = y1 + 70;
} else {
var yPos = y1 - 70;
}
beginShape();
vertex(xPos, yPos);
bezierVertex(xPos - size / 2, yPos - size / 2, xPos - size, yPos + size / 3, xPos, yPos + size);
bezierVertex(xPos + size, yPos + size / 3, xPos + size / 2, yPos - size / 2, xPos, yPos);
endShape();
meet = true; //change variable to true to show fish have met
}
}
function drawCrab() {
fill("orange");
ellipse(100, height-80,80,50);
circle(60,height-100,20);
circle(140,height-100,20);
arc(60,height-130, 50, 50, -(radians(30)), -HALF_PI);
arc(150,height-130, 50, 50, -(radians(30)), -HALF_PI);
push();
noFill();
strokeWeight(10);
stroke("orange");
arc(120, height-35, 80, 80, PI + QUARTER_PI, TWO_PI);
arc(80, height-35, 80, 80, PI, PI + HALF_PI);
pop();
fill(0);
circle(120,height-90, 8);
circle(100,height-90, 8);
//if fish have met, crab claps by drawing circles on top of arcs
if (meet == true) {
arc(100, height-80, 20, 20, 0, -PI);
//alternating variable so crab claws open and close with every frame
if (crabClaw == 1) {
clap.play();
fill("orange");
circle(60, height-130,50,50);
circle(150,height-130,50,50);
crabClaw += 1;
} else if (crabClaw == 2) {
crabClaw = 1;
}
}
}
function drawHouse() {
fill(160,82,45); //brown
rect(width-200, height-170, 120,120);
triangle(width-220,height-170,width-140,height-250,width-60,height-170);
rect(width-200,height-230,20,80);
fill(173,216,230); //light blue
rect(width-160, height-110,40,60);
fill(0); //black
circle(width-155,height-70,5);
fill(173,216,230); //light blue
rect(width-180,height-150,20,20);
rect(width-120,height-150,20,20);
fill(224,255,255); //light cyan
bubbles.play();
//moving bubbles up the canvas by adding random dx and dy
for (i = 0; i < bubbleArrayX.length; i++) {
var randomDx = (random(-5,5));
var randomDy = (random(-10,0));
if (meet == false) { //if fish have not met, house bubbles
bubbleArrayX[i] += randomDx;
bubbleArrayY[i] += randomDy;
//reset x and y position if bubble leaves canvas
if (bubbleArrayY[i] <= 0) {
bubbleArrayX[i] = 400 + random(-10,10);
bubbleArrayY[i] = 150;
}
circle(bubbleArrayX[i], bubbleArrayY[i], 5)
} else if (meet == true) { //if fish have met, house bubbles hearts
heartArrayX[i] += randomDx;
heartArrayY[i] += randomDy;
var size = 10;
fill("pink")
beginShape();
vertex(heartArrayX[i], heartArrayY[i]);
bezierVertex(heartArrayX[i] - size / 2, heartArrayY[i] - size / 2, heartArrayX[i] - size, heartArrayY[i] + size / 3, heartArrayX[i], heartArrayY[i] + size);
bezierVertex(heartArrayX[i] + size, heartArrayY[i] + size / 3, heartArrayX[i] + size / 2, heartArrayY[i] - size / 2, heartArrayX[i], heartArrayY[i]);
endShape();
//reset x and y position if heart leaves canvas
if (heartArrayY[i] <= 0) {
heartArrayX[i] = 400 + random(-10,10);
heartArrayY[i] = 150;
}
}
}
}
//plays love song after fish meet
function playSong() {
//only want song to play once so use counter
if (songCount == 0) {
heart.play();
songCount += 1;
} else {
//do nothing
}
}
