let wave = [];

let fishImage;

let fish = [];

​

function preload() {

  // Load the dolphin and fish images

  dolphinImg = loadImage('dolphin.png');

  fishImage = loadImage('fish.png');

}

​

function setup() {

  createCanvas(800, 400);

​

  // Create the wave using Perlin noise for a more natural look

  let xOff = 0;

  for (let x = 0; x <= width + 10; x += 20) {

    let yOff = 0;

    let y = height - 100 + map(noise(xOff, yOff), 0, 1, -20, 20);

    wave.push(createVector(x, y));

    xOff += 0.1; // Adjust the noise detail for different wave patterns

  }

​

  // Create fish objects

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

    fish.push(new Fish());

  }

}

​

function draw() {

  background(0);

​

  // Display and move the wave

  beginShape();

  fill(0, 0, 255, 50);

  stroke(0, 0, 255);

  strokeWeight(2);

  for (let i = 0; i < wave.length; i++) {

    let x = wave[i].x;

    let y = wave[i].y + sin(frameCount * 0.1 + i * 0.2) * 10;

    vertex(x, y);

  }

  vertex(width, height);

  vertex(0, height);

  endShape(CLOSE);

​

  // Display and move the realistic dolphin image

  let dolphinX = width / 2;

  let dolphinY = height - 100 + sin(frameCount * 0.1) * 10;

  image(dolphinImg, dolphinX, dolphinY, 100, 60); // Adjust the size as needed

​

  // Display and move the fish

  for (let i = 0; i < fish.length; i++) {

    fish[i].update();

    fish[i].display();

  }

}

​

class Fish {

  constructor() {

    this.x = random(width);

    this.y = random(height - 100);

    this.speedX = random(1, 3);

    this.speedY = random(1, 3);

  }

​

  update() {

    // Move the fish

    this.x += this.speedX;

    this.y += this.speedY;

​

    // Wrap around the screen

    if (this.x > width) {

      this.x = -50;

      this.y = random(height - 100);

    }

  }

​

  display() {

    // Draw the fish image

    image(fishImage, this.x, this.y, 40, 20); // Adjust the size as needed

  }

}

​

​