​

let sun;

let fishes = [];

let fishMdl, duckMdl, duck;

let bodyDiffuse, wingDiffuse, duckDiffuse, landDiff;

let bgm;

let defaultFont;

let isAnimating = true; // global boolean to check when to pause animations

​

function preload() {

  // Suonatore di Liuto - Kevin MacLeod

  bgm = loadSound("media/bgm.mp3");

  bgm.setVolume(1.2);

​

  // Flying Fish

  fishMdl = loadModel("media/fish.obj", true);

  bodyDiffuse = loadImage("media/bodyDiff.png");

  //wingDiffuse = loadImage('media/wingDiff.png');

​

  // Swimming Bird

  duckMdl = loadModel("media/duck.obj", true);

  duckDiffuse = loadImage("media/duck3.png");

​

  landDiff = loadImage("media/grassy.png");

​

  defaultFont = loadFont("media/Roboto-Regular.ttf");

}

​

function keyPressed() {

  if (keyCode === 32) {

    isAnimating = !isAnimating; // Toggle animation

  }

}

​

function setup() {

  createCanvas(windowWidth, windowHeight, WEBGL);

  noStroke();

  bgm.loop();

  sun = new Sun();

  textFont(defaultFont);

​

  fishes.push(new Fish(-100, -400, -500, 2));

  fishes.push(new Fish(-100, -500, -500, 3));

  fishes.push(new Fish(-50, -400, -300, 5));

  fishes.push(new Fish(-100, -300, -500, 2));

  fishes.push(new Fish(-100, -500, -500, 6));

  fishes.push(new Fish(-300, -400, -800, 1.2));

  fishes.push(new Fish(-50, -400, -300, 7));

  fishes.push(new Fish(500, -300, -500, 8));

  fishes.push(new Fish(100, -500, -500, 9));

  fishes.push(new Fish(350, -400, -800, 10));

  fishes.push(new Fish(150, -400, -500, 2));

  fishes.push(new Fish(120, -500, -500, 3));

  fishes.push(new Fish(51, -480, -300, 5));

  fishes.push(new Fish(115, -370, -500, 2));

  fishes.push(new Fish(130, -560, -500, 6));

  fishes.push(new Fish(320, -450, -800, 1));

  fishes.push(new Fish(54, -450, -300, 7));

  fishes.push(new Fish(-540, -350, -500, 8));

  fishes.push(new Fish(-130, -550, -500, 9));

  fishes.push(new Fish(-370, -300, -800, 10));

​

  duck = new Duck(0, 30, -50);

}

​

function draw() {

  // Update sun position

  if (isAnimating) {

    sun.update();

    for (let fish of fishes) {

      fish.update();

    }

    duck.update();

  }

​

  // Always update sky color and display current time

  let r = map(sun.y, -500, 500, 135, 0);

  let g = map(sun.y, -500, 500, 206, 0);

  let b = map(sun.y, -500, 500, 235, 64);

  background(r, g, b);

​

  orbitControl(1.2, 0, 0);

​

  // Display objects

  sun.display();

  drawLand();

  fishes.forEach((fish) => fish.display());

  duck.display();

​

  // Display current time

  displayCurrentTime();

​

  // Display helper text

  displayHelperText();

​

  // Lighting

  ambientLight(100);

  directionalLight(255, 255, 255, -sun.x, -sun.y, 500);

}

​

class Sun {

  constructor() {

    this.radius = 50;

    this.angle = 0;

    this.x = 0;

    this.y = 0;

  }

​

  update() {

    // Sun's x and y coordinates

    this.x = 500 * cos(this.angle);

    this.y = 500 * sin(this.angle);

    this.angle += 0.01;

  }

​

  display() {

    push();

    translate(this.x, this.y, 0);

    emissiveMaterial(255, 204, 0);

    sphere(this.radius);

    pop();

  }

}

​

class Fish {

  constructor(startX, startY, startZ, speed) {

    this.x = startX;

    this.y = startY;

    this.z = startZ;

    this.speed = speed;

    //this.startX = startX;

    this.visible = true;

    this.angle = PI;

  }

​

  update() {

    // Move fish forward along the z-axis

    this.z += this.speed;

​

    // Reset position if the fish reaches the end of the visible area

    if (this.z > 2000) {

      this.z = -700;

    }

  }

​

  display() {

    if (this.visible) {

      push();

      translate(this.x, this.y, this.z);

      rotateY(this.angle);

      scale(0.5);

      texture(bodyDiffuse);

      model(fishMdl);

      pop();

    }

  }

}

​

class Duck {

  constructor(startX, startY, startZ) {

    this.x = startX;

    this.y = startY;

    this.z = startZ;

    this.direction = 1; // 1 for forward, -1 for backward

    this.speed = 2; 

  }

​

  update() {

    // Move the duck back and forth along the z-axis

    this.z += this.speed * this.direction;

​

    // Reverse direction when reaching turning points

    if (this.z > 300 || this.z < -300) {

      // bounds

      this.direction *= -1;

    }

  }

​

  display() {

    push();

    translate(this.x, this.y, this.z);

    if (this.direction === 1) {

      rotateY(PI);

    }

    rotateX(PI);

    scale(0.5);

    //specularMaterial("yellow");

    texture(duckDiffuse);

    model(duckMdl);

    pop();

  }

}

​

function drawLand() {

  push();

​

  translate(0, 1000, 0); // Land Position

  fill(25, 155, 50); // Land Color

  sphere(1000); // Land Size

  // Oval river or pond

  fill(0, 100, 200, 150);

  translate(0, -950, 100);

  rotateX(HALF_PI);

  sphere(160);

  pop();

}

​

function displayCurrentTime() {

  let now = new Date();

  let hours = now.getHours();

  let minutes = now.getMinutes();

  let timeString = nf(hours, 2) + ":" + nf(minutes, 2);

​

  textSize(144); 

  fill(255);

  textAlign(CENTER, CENTER); 

​

  push();

  translate(0, -300, 0); 

  text(timeString, 0, 0); // Draw the time

  pop();

}

​

function displayHelperText() {

  push(); 

  resetMatrix(); // Reset all transformations to default

  textSize(15); 

  fill(255); 

  textAlign(CENTER, TOP);

  text("(Press Spacebar to pause animation)", 0, -380);

​

  pop(); 

}

​

/* Todos:

​

- Rotate time text during camera rotation

- Restrict panning

- Add more to scene (trees, hills, clouds, etc)

- Learn more about mesh/3D obj texturing and UV mapping

​

*/

​