SP

let moon

let building

let stars

let background

​

​

var sound, amp, freq1,freq2,freq3;

function preload() {

​

  moon = loadImage('moon.png')

  building = loadImage('building.jpg')

  stars = loadImage('stars.png')

  sound = loadSound('Music.mp3');

  background = loadImage('background.jpg')

​

}

​

​

​

function setup() {

  createCanvas(1920, 1200);

​

​

​

  //colorMode(HSB);

  sound.play();

​

  amp = new p5.Amplitude();

  amp.setInput(sound);

  rectMode(CORNER);

  // rotation = shape degree

  angleMode(DEGREES)

​

  //Fourier transform to get the amplitudes of the frequncies

  freq = new p5.FFT(0.9,256);

  freq.setInput(sound);

​

​

}

​

function draw() {

  // Call function to set the background

  // document.body.style.backgroundImage = "url('background.jpg')";

  image(background,0,0,width,height)

​

​

  // Store frequncy spectrum in spectrum variable

    var spectrum = freq.analyze();

​

  //Drawing the bars iterate through each element in the spectrum variable in line 45

  for(var i=0; i<spectrum.length;i++) {

​

​

    // Position the bar should be drawn

    var x = width / spectrum.length * i;

    var y = 520;

    //Size of the bars to be drawn

    var w = width / spectrum.length;

    var h = spectrum[i]

    // Draw bars

    push();

    // Colour

    fill(10, 153, 255);

    // No outline of bar

    noStroke();

    // Position the bar

    translate(width, height+525);

    // To draw vertical bars rotate 180degrees

    rotate(180);

    // Draw the rectange bars

    // rect(x*5+width/2,y,w+16,h*2);

    image(building,x*5+width/2,y,w+16,h*2)

    pop();

​

    // Mirror the bars about the center of the page to get the sysmmetry in the spectrum

    // Same thing we did starting from line 62 but the x position is flipped using negative sign in line 83

    push();

    fill(10, 153, 255);

    noStroke();

    translate(width, height+525);

    rotate(180);

    // rect(-x*5+width/2,y,w+16,h*2);

        image(building,-x*5+width/2,y,w+16,h*2)

    pop();

​

​

  }

​

  }

​

  function setGradient(c1, c2) {

    // noprotect

    noFill();

    for (var y = 0; y < height; y++) {

      var inter = map(y, 0, height, 0, 1);

      var c = lerpColor(c1, c2, inter);

      stroke(c);

      line(0, y, width, y);

    }

    }