// Exercise 4: 30s music audio

// Ming Leng

// Spring 2024

// Use most originary ellipses in p5.js to tell a story of ordinariness.

// Music credit to: Yuanyuan Lu, SVA Animation; https://www.youtube.com/watch?v=Ksx4xTSSJdQ to see the trailer

​

let mySound;

​

function preload() {

  mySound = loadSound("asset/30saudio.mp3");

}

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  mySound.loop();

}

​

function draw() {

  background(20);

​

  // Phase I: 0-11; All White Periods.

  let elapsedTime = mySound.currentTime();

  if (elapsedTime <= 11) {

    frameRate(28);

    let duration = 11;

    let totalEllipses = (width / 50) * (height / 50);

    let ellipsesToShow = map(elapsedTime, 0, duration, 0, totalEllipses);

    noFill();

    strokeWeight(4);

    stroke(255);

​

    let count = 0;

    for (let i = 0; i <= width; i += 50) {

      for (let j = 0; j <= height; j += 50) {

        if (count < ellipsesToShow) {

          ellipse(i, j, 20, 20);

          count++;

        }

      }

    }

  }

​

  // Phase II: 11-12.5; Single Red Period.

  if (elapsedTime >= 11 && elapsedTime <= 12.5) {

    frameRate(15);

    stroke(random(50, 255), 0, 0);

    strokeWeight(4);

    ellipse(width / 2, height / 2, 20, 20); 

  }

​

  // Phase III: 13-19: Half Red, Half White Periods.

  if (elapsedTime > 12.5 && elapsedTime <= 19) {

    frameRate(15);

    let duration = 6.5;

    let totalEllipses = (width / 50) * (height / 50);

    let ellipsesToShow = map(elapsedTime, 13, 17, 0, totalEllipses);

    noFill();

    strokeWeight(4);

​

    let count = 0;

    for (let i = 0; i <= width; i += 50) {

      for (let j = 0; j <= height; j += 50) {

        if (count < ellipsesToShow) {

          if (count < ellipsesToShow / 1.5) {

            stroke(255);

          } else {

            stroke(random(100, 200), 0, 0);

          }

          ellipse(i, j, random(20, 30), random(20, 30));

          count++;

        }

      }

    }

  }

  // Phase IV: 19-26 White ellipse approaching

  if (elapsedTime > 19 && elapsedTime <= 26) {

    frameRate(2.4);

    let ellipseDiameter = map(elapsedTime, 19, 26, height, 0);

​

    noFill();

    strokeWeight(12);

    stroke(255);

    ellipse(width / 2, height / 2, ellipseDiameter, ellipseDiameter);

    stroke(255, 0, 0);

    strokeWeight(4);

    ellipse(width / 2, height / 2, 20, 20); // Draw ellipse at the center

  }

​

  // Phase V: 26-28

  if (elapsedTime > 26 && elapsedTime <= 27.2) {

    frameRate(10); // Set the frame rate for this phase

​

    // Draw all white circles

    noFill();

    strokeWeight(4);

    stroke(255); // White stroke for most circles

    for (let i = 0; i <= width; i += 50) {

      for (let j = 0; j <= height; j += 50) {

        ellipse(i, j, 20, 20);

      }

    }

​

    // Choose one random circle to have a red stroke

    let randomX = floor(random(0, width / 50)) * 50;

    let randomY = floor(random(0, height / 50)) * 50;

    stroke(255, 0, 0); // Red stroke

    ellipse(randomX, randomY, 20, 20);

  }

  // final phase

  if (elapsedTime > 27.2 && elapsedTime <= 30) {

    noFill();

    strokeWeight(4);

    stroke(255, 0, 0);

    for (let i = 0; i <= width; i += 50) {

      for (let j = 0; j <= height; j += 50) {

        ellipse(i, j, 20, 20);

      }

    }

  }

}

​

// Start of the audio.

function mousePressed() {

  if (mySound.isPlaying()) {

    mySound.stop();

  } else {

    mySound.play();

  }

}

​

​

// saveframe comand

function mousePressed(){

  if (key === 's'){

    saveFrames("frame", "png", "30", "2");

  }

}

​