sketch
var fish = []
var bigfish
var smallfish
var fishrod
var bigx = 480
var bigy = 240
var smallx = 0
var smally = 240
var chew
var frameCount
var waves
var lineY = 200
var lineX = 160
function preload() {
chew = loadSound('https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/412068__inspectorj__chewing-carrot-a.wav');
waves = loadSound('https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/531453__mitchanary__ocean-designed-loop.wav');
}
function setup() {
createCanvas(480, 480);
for (var i = 0; i < 104; i++) {
fish[i] = new Object();
fish[i].x = random(25, width-25);
fish[i].y = random(25, height-25);
fish[i].dx = random(-2, 2);
fish[i].c = color(random(255), random(255),0);
}
frameRate(5)
}
function soundSetup(){
chew.setVolume(10)
waves.setVolume(1)
}
function draw() {
background(74, 142, 237);
text(frameCount,10,10)
for (var i = 0; i < 104; i++) {
draw_fish(fish[i]);
fish[i].x += fish[i].dx;
if (fish[i].x > width-25 || fish[i].x < 25) {
fish[i].dx = -fish[i].dx;
}
}
stroke(70)
strokeWeight(3)
line(lineX,0,lineX,lineY)
noFill()
arc(lineX,lineY-25,50,50,0,PI + QUARTER_PI)
drawsmallfish()
drawbigfish()
if(frameCount == 1){
waves.play()
}
if(frameCount == 5){
bigx -= 22
smallx += 22
lineY -=10
}
if(frameCount == 10){
bigx -= 22
smallx += 22
lineY -=10
}
if(frameCount == 15){
bigx -= 22
smallx += 22
lineY -=10
}
if(frameCount == 20){
bigx -= 22
smallx += 22
lineY -=10
}
if(frameCount == 25){
bigx -= 22
smallx += 22
lineY -=10
}
if(frameCount == 30){
bigx -= 22
smallx += 22
lineY -=10
}
if(frameCount == 35){
bigx -= 22
smallx += 22
lineY -=10
}
if(frameCount == 40){
bigx -= 22
smallx += 22
lineY -=10
}
if(frameCount == 45){
bigx -= 22
smallx += 22
lineY -=10
}
if(frameCount == 55){
bigx -= 22
smallx += 40
lineY -=10
chew.play()
}
if(frameCount >= 55){
bigx -= 30
smallx -= 30
lineY -=10
}
}
function drawbigfish() {
stroke(0)
strokeWeight(3)
fill(237, 164, 74)
ellipse(bigx, bigy, 60, 40);
triangle(bigx+30,bigy, bigx+45, bigy-15, bigx+45, bigy+15);
}
function drawsmallfish() {
stroke(0)
strokeWeight(3)
fill(111, 227, 113)
ellipse(smallx, smally, 30, 20);
triangle(smallx-15,smally, smallx-20, smally+10, smallx-20, smally-10);
}
function draw_fish(f) {
strokeWeight(1)
fill(f.c);
ellipse(f.x, f.y, 20, 10);
if (f.dx < 0) {
triangle(f.x+10, f.y, f.x+15, f.y-5, f.x+15, f.y+5);
} else {
triangle(f.x-10, f.y, f.x-15, f.y-5, f.x-15, f.y+5);
}
}
I tried to tackle this with a graphically relatively simple approach because I wanted to be able to grasp how the code works first. I found using frameCount to keep track of each frame and coordinate individual characters very helpful. Framecount was a great tool for implementing sound at the right time and animation in general.