let dropArray = [];

let circleArray = [];

let textArray = [];

​

function preload() {

  mySound = loadSound("some-things-last-a-long-time.mp3");

  bgImg = loadImage("cloud.jpeg");

  chalkFont = loadFont("chalk.ttf");

}

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  textFont(chalkFont);

  textSize(50);

  textAlign(CENTER, CENTER);

  frameRate(30);

  mySound.loop();

}

​

function draw() {

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

  // 1st effect: rain drops slowly falling down

  if (mySound.currentTime() >= 0 && mySound.currentTime() < 8) {

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

      dropArray.push(new Drop());

    }

    for (let drop of dropArray) {

      drop.show();

      drop.fall(2);

    }

  }

​

  // 2nd effect: slowly growing circle

  if (mySound.currentTime() > 20 && mySound.currentTime() < 30) {

    if (circleArray.length < 100 && frameCount % 1 == 0) {

      circleArray.push(new Circle());

    }

    for (let circle of circleArray) {

      circle.show();

      circle.grow();

    }

  } 

​

  // 3rd effect: chalk writing and erasing text

  if (mySound.currentTime() >= 8 && mySound.currentTime() < 30) {

    if (textArray.length == 0) {

      textArray.push(new ChalkText(width / 2, height / 2 - 200, "Your Picture is Still On My Wall"));

      textArray.push(new ChalkText(width / 2, height / 2 - 100, "Some Things Last A Long Time"));

      textArray.push(new ChalkText(width / 2, height / 2, "A Long Time"));

       textArray.push(new ChalkText(width / 2, height / 2 + 100, "Time"));

      textArray.push(new ChalkText(width / 2, height / 2 + 200, "Erase Me"));

    }

    for (let text of textArray) {

      text.show();

      if (random(1) < 0.2) { // Randomly erase characters

        text.randomErase();

      }

    }

  }

​

  // 4th effect: rain drops slowly rising up

  if (mySound.currentTime() >= 30 && mySound.currentTime() < 43) {

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

      dropArray.push(new Drop(true));

    }

    for (let drop of dropArray) {

      drop.show();

      drop.rise();

    }

  }

​

  // floating text

  let textX = width / 2;

  let textY = height / 2;

  let floatingText = "As Ever";

  if (mySound.currentTime() >= 39 && mySound.currentTime() < 43) {

    textSize(50);

    fill(255);

    noStroke();

    text(floatingText, textX, textY);

    textY -= 2;

  }

}

​

​

class Drop {

  constructor(riseUp = false) {

    this.x = random(width);

    this.y = random(-500, -50);

    this.z = random(0, 20);

    this.len = map(this.z, 0, 20, 10, 20);

    this.yspeed = map(this.z, 0, 20, 1, 20);

    this.riseUp = riseUp;

    this.r = 0;

​

  }

​

  fall() {

    if (this.riseUp) {

      this.y -= this.yspeed / 2;

    } else {

      this.y += this.yspeed;

    }

    let grav = map(this.z, 0, 20, 0, 0.2);

    this.yspeed += grav;

​

    if (this.y > height) {

      this.y = random(-200, -100);

      this.yspeed = map(this.z, 0, 20, 1, 20);

    }

  }

​

  rise() {

    if (this.riseUp) {

      this.y += this.yspeed / 2;

    } else {

      this.y -= this.yspeed;

    }

    let grav = map(this.z, 0, 20, 0, 0.2);

    this.yspeed -= grav;

​

    if (this.y < -50) {

      this.y = random(height + 100, height + 200);

      this.yspeed = map(this.z, 0, 20, 1, 20);

    }

  }

​

  show() {

    let thick = map(this.z, 0, 20, 1, 3);

    strokeWeight(thick);

    stroke(138, 43, 226);

    if (this.r > 0) {

      Fill(255, 165, 0);

      stroke(255, 165, 0);

      ellipse(this.x, this.y, this.r * 2);

    } else {

      line(this.x, this.y, this.x, this.y + this.len);

    }

  }

​

  ripple() {

    this.r += 5;

    if (this.r > this.len) {

      this.r = 0;

    }

  }

}

​

class Circle {

  constructor() {

    this.x = random(width);

    this.y = random(height);

    this.r = 3;

    this.growing = true;

  }

​

  grow() {

    if (this.growing) {

      this.r += 1;

    }

  }

​

  show() {

    noFill();

    strokeWeight(2);

    stroke(105,105,105);

    ellipse(this.x, this.y, this.r * 2);

  }

}

​

​

class ChalkText {

  constructor(x, y, text) {

    this.x = x;

    this.y = y;

    this.text = text;

    this.opacity = 255;

    this.eraseTime = 0;

  }

​

  show() {

    textSize(50);

    fill(255, this.opacity);

    noStroke();

    text(this.text, this.x, this.y);

  }

​

  randomErase() {

    if (this.eraseTime > 0) {

      this.opacity = map(this.eraseTime, 0, 3, 255, 0);

      this.eraseTime -= 0.1;

    } else {

      let index = floor(random(this.text.length));

      this.text = this.text.substring(0, index) + " " + this.text.substring(index + 1);

      this.eraseTime = 1;

    }

  }

}

​

​