​

​

                             ☆☾☆☾☆☾☆☾☆☾☆

                             ☆Day 'N' Nite☆

                             ☆☾☆☾☆☾☆☾☆☾☆

                          by Danny Baghdasarians

                           ☆Transitions from☆    

                   [Blue Sky w/ Sun] -> [Night Sky w/ Moon]

                     -Based on Song's Amplitude Level-

​

*/

​

// Global Variables

let music;

let amplitude;

let rotateRate;

let skyTransition;

​

// Preloading our Song

function preload() {

  // Song: Kid Cudi - "Day 'N' Night"

  music = loadSound("./DayNite.mp3");

}

​

function setup() {

  createCanvas(600, 600);

  background(100);

​

  skyTransition = 0;

  rotateRate = 0;

​

  // Get the Amplitude of our song

  amplitude = new p5.Amplitude();

​

  // Play our song

  music.play();

  music.setVolume(0.5);

}

​

function draw() {

  translate(width / 2, height / 2);

​

  // Rate at which the "Sun & Moon" rotate

  rotateRate += 0.3;

​

  // Rate at which the sky transitions from night to day

  skyTransition++;

  if (skyTransition >= 1500) {

    skyTransition = 0;

  }

​

  // Creating our sky

  sky(skyTransition);

  // Creating our Sun and Moon

  sunAndMoon(skyTransition, rotateRate);

}

​

// Creates our sky with Rectangles

function sky(transition) {

  push();

  // Map our amplitude between 150-250

  let ampLevel = map(amplitude.getLevel(), 0, 1, 150, 250);

  let randX = random(-width, width);

  let randY = random(-height, height);

​

  noStroke();

​

  // Begin with a day sky

  if (transition <= 750) {

    fill(173, 216, 255, 100);

    // Next is a night sky

  } else if (transition > 750 && transition <= 1500) {

    fill(ampLevel, 100);

  }

​

  // Rectangle size goes along with the amplitude

  rect(randX, randY, ampLevel);

  pop();

}

​

// Create our Sun and Moon with lines

function sunAndMoon(transition, rate) {

  push();

  // Map our amplitude between 60 - canvas.width

  let ampLevel = map(amplitude.getLevel(), 0, 1, 60, width);

​

  strokeWeight(0.25);

​

  // Begin with a sun

  if (transition <= 750) {

    // Next is a moon

    stroke(255, 255, 224, 100);

  } else if (transition > 750 && transition <= 1500) {

    stroke(255, 100);

  }

​

  // Rotate our lines to create the "Sun and Moon"

  rotate(rate);

​

  // Lines go along with the amplitude of the song

  for (let i = -100; i < 100; i++) {

    line(i, 0, i, ampLevel);

    line(0, i, ampLevel, 0);

    line(-i, 0, -i, -ampLevel);

    line(0, -i, -ampLevel, 0);

  }

  pop();

}

​