Assignment 3 - Final

I created an interactive fish pond using that features moving fish, bubbles, and food. The pond has multiple fish that swim around, bounce off the edges, and randomly change color when they hit the walls. Each fish has a simple body, tail, and eye, and there are two different shapes for variety. Users can click anywhere in the pond to drop food: while the mouse is pressed, an image of food appears at the cursor, and when released, a small circle representing the food stays behind. Bubbles float randomly across the pond to make it feel alive, and all the elements together create a dynamic, playful underwater scene.

Controls

- Mouse Click: Drop food at the cursor. The image appears while pressing, leaving a circle behind when released.

- S key: Toggle fish speed boost.

- B key: Toggle bubbles on or off.

- F key: Toggle fish size between normal and larger.

- R key: Reset all fish to new random positions.

If I had more time, I would make the fish actually swim toward the food and “eat” it, disappearing the food when they reach it. I would also add more variety in fish movement, like swimming at different angles or turning smoothly instead of just bouncing off the edges. 

let fish = [];

let food = [];

let pondGif, foodImg;

let bubblesOn = true;

let speedBoost = false;

let bigFish = false;

function preload() {

  pondGif = loadImage('assets/background.gif');

  foodImg = loadImage('assets/food.png');

}

function setup() {

  createCanvas(1280, 720);

  for (let i = 0; i < 10; i++) {

    let f = {

      x: random(width),

      y: random(height),

      size: random(0.8, 1.5),

      speedX: random(1, 3),

      speedY: random(0.5, 2),

      color: [random(150, 255), random(50, 200), random(0, 150)],

      shapeType: int(random(2))

    };

    fish.push(f);

  }

}

function draw() {

  image(pondGif, 0, 0, width, height);

  if (bubblesOn) drawBubbles();

  for (let f of food) {

    fill(200, 150, 0);

    noStroke();

    ellipse(f.x, f.y, 20, 20);

  }

  for (let f of fish) {

    let speedMultiplier = speedBoost ? 2 : 1;

    let sizeMultiplier = bigFish ? 1.5 : 1;

    f.x += f.speedX * speedMultiplier;

    f.y += f.speedY * speedMultiplier;

    if (f.x > width || f.x < 0) {

      f.speedX *= -1;

      f.color = [random(150, 255), random(50, 200), random(0, 150)];

    }

    if (f.y > height || f.y < 0) {

      f.speedY *= -1;

      f.color = [random(150, 255), random(50, 200), random(0, 150)];

    }

    drawFish(f, sizeMultiplier);

  }

  if (mouseIsPressed) {

    image(foodImg, mouseX - 15, mouseY - 15, 30, 30);

  }

}

function drawFish(f, sizeMultiplier) {

  push();

  translate(f.x, f.y);

  noStroke();

  fill(f.color);

  let s = f.size * 50 * sizeMultiplier;

  if (f.shapeType == 0) {

    ellipse(0, 0, s, s / 2);

    triangle(-s / 2, 0, -s, -s / 4, -s, s / 4);

  } else {

    rect(-s / 2, -s / 4, s, s / 2);

    triangle(-s / 2, 0, -s, -s / 4, -s, s / 4);

  }

  fill(255);

  ellipse(s / 4, -s / 8, s / 5, s / 5);

  fill(0);

  ellipse(s / 4, -s / 8, s / 10, s / 10);

  pop();

}

function drawBubbles() {

  noStroke();

  fill(255, 255, 255, 100);

  for (let i = 0; i < 15; i++) {

    let bx = random(width);

    let by = random(height);

    ellipse(bx, by, random(5, 15));

  }

}

function mousePressed() {

  food.push({ x: mouseX, y: mouseY });

}

function keyPressed() {

  if (key == 'B' || key == 'b') bubblesOn = !bubblesOn;

  if (key == 'S' || key == 's') speedBoost = !speedBoost;

  if (key == 'F' || key == 'f') bigFish = !bigFish;

  if (key == 'R' || key == 'r') resetFishPositions();

}

function resetFishPositions() {

  for (let f of fish) {

    f.x = random(width);

    f.y = random(height);

  }

}