Project 10 – Sonic Story

//global variables
var frameCount = 0;
var sky;
var cat;
var sofa;
var clock;
var playlist;
var table;
var rain = [];
const numOfRaindrops = 100;

function preload() { 
  //preload images
  sky = loadImage("https://i.imgur.com/6PCHwrN.png");
  cat = loadImage("https://i.imgur.com/qApZuXa.png");
  sofa = loadImage("https://i.imgur.com/sESZJWa.png");
  clock = loadImage("https://i.imgur.com/hbfe35l.png");
  playlist = loadImage("https://i.imgur.com/wKD6EsD.png");
  table = loadImage("https://i.imgur.com/74DxEGR.png");

  //preload sounds
  clockSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/11/clock.wav");
  playlistSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/11/playlist.wav");
  rainSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/11/rain-1.wav");
  catSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/11/cat.wav");
  // clockSound = loadSound("clock.wav");
  // playlistSound = loadSound("playlist.wav");
  // rainSound = loadSound("rain.wav");
  // catSound = loadSound("cat.wav");
}

function setup() {
  createCanvas(480, 400);
  useSound();
  frameRate(20);

  //rain
  rain_color = color(225, 235, 244);
  background_color = color(21, 39, 56);
  for (var i = 0; i < numOfRaindrops; i++) {
    rain[i] = new drawFallingRain();
  }
}

function soundSetup() {
  clockSound.setVolume(0.4);
  playlistSound.setVolume(0.7);
  rainSound.setVolume(0.5);
  catSound.setVolume(0.4);
}

function draw() {

  background(background_color);

  //gradient sky
  image(sky, 0, 0, width, 210);

  //rain
  for (var i = 0; i < rain.length; i ++) {
      rain[i].rainDisplay();
      rain[i].rainDrop();
  }

  //room wall
  fill(109, 115, 147);
  noStroke();
  rect(0, 0, 100, 600);
  rect(400, 0, 100, 600);
  rect(0, 210, 800, 300);
  fill(88, 87, 103);
  rect(-100, 340, 800, 300);

  //window
  fill(109, 115, 147);
  rect(100, 100, 300, 10);
  rect(250, 0, 10, 200);
  fill(71, 72, 90);
  rect(100, 200, 300, 15);
  fill(144);
  rect(100, 200, 300, 5);

  //clock
  image(clock, 385, 30, 90, 140);

  //sofa
  image(sofa, -55, 10, 420, 400);

  //cat
  image(cat, 290, 130, 80, 80);

  //table
  image(table, 340, 250, 150, 150);

  //playlist
  image(playlist, 375, 230, 80, 80)

    if (frameCount % 460 == 0 || frameCount % 460 == 1) {
        rainSound.stop();
        rainSound.play();
    }
    if (frameCount % 340 == 0 || frameCount % 340 == 1) {
        print("Starting playlist")
        playlistSound.stop();
        playlistSound.play();
    }
    if (frameCount % 200 == 0 || frameCount % 200 == 1) {
        catSound.stop();
        catSound.play();
    }
    if (frameCount % 160 == 0 || frameCount % 160 == 1) {
        clockSound.stop();
        clockSound.play();
    }
    frameCount += 1;
}

function drawFallingRain() {
    this.rx = random(0, 400); //width of the canvas
    this.ry = random(0, 400); //height of the canvas
    this.rain_size = random(0, 8);
    this.rain_rate = map(this.rain_size, 0, 10, 8, 10);
    this.rain_range = map(this.rain_size, 0, 10, 7, 18);

    this.rainDisplay = function() {
        var raindrop_size = map(this.rain_size, 0, 20, 0.7, 0.3);
        stroke(rain_color);
        strokeWeight(raindrop_size);
        line(this.rx, this.ry, this.rx, this.ry + this.rain_range);
    }
    this.rainDrop = function() {
        this.ry = this.ry + this.rain_rate;
        var dropsOfRain = map(this.rain_size, 0, 10, 2, 1); //indicates the raindrop rate
        this.rain_rate = dropsOfRain + this.rain_rate;
        if (this.ry >= 300) { //continue raining
            this.ry = random(-100, 0);
            this.rain_rate = map(this.rain_size, 0, 10, 3, 15);
        }
    }
}