2AM

//Pierre MARZIN 01/2019

//I'm using p5js Sound library to load and analyse 

//a song. Then, I pass the results of the analysis, as a texture, to the fragment shader.

//This shader will transform these informations in a 3d "landscape",

//using distance functions, and a rotating camera...

var button, song, amplitude, fft;

var waiting=true;

var img;

var program;

var texture,gl;

function preload() {

  song = loadSound('alina.ogg');

}

function setup() {

  pixelDensity(1);

  createCanvas(windowWidth, windowHeight,WEBGL);

  //img is the image where the spectrum data will be stored

  img=createImage(256,1);

  img.loadPixels();

  rectMode(CENTER);

  //shader is loaded with vert and frag definitions

  program = new p5.Shader(this._renderer,vert, frag);

  //cf Sound library doc

  amplitude = new p5.Amplitude();

  fft = new p5.FFT();

  //Since Chrome wont allow the creation of an audio context unless user use a gesture

  //this "fake" button asks you to click or touch the screen.This will trigger sound playing...

  var button=createButton('click or touch me!');

  button.position(.4*width,.25*width);

  button.style('font-size', '32px');

  button.size(.2*width,.1*height);

}

function draw() {  

  //Once you clicked or touch

  if (!waiting) {    

    //level reflects sound amplitude

    var level=.2+pow(amplitude.getLevel(),.6);

    var spectrum = fft.analyze();

    //spectrum is an array, containing the levels of each frequency

    //I convert it into a P5 Image, so to pass it to the shader as a texture

    for (var i = 0; i<4*256; i+=4) {

      var s=spectrum[i/4];

      img.pixels[i]=s;

      img.pixels[i+1]=s;

      img.pixels[i+2]=s;

      img.pixels[i+3]=s;

    }

    img.updatePixels();

    this.shader(program);

    //shaders uniforms are fed with our data

    program.setUniform('volume', level);

    program.setUniform('iMouse', [mouseX, mouseY]);

    program.setUniform('iResolution', [width, height]);

    program.setUniform('iTime', millis()/1000);

    program.setUniform('iChannel0',img);

    //the scene is rendered as a rectangle

    rect(0, 0, width, height);

  }

}

function mousePressed() {

  //if the sound file is loaded...

  if (song.isLoaded()) {

    if (waiting) {

      song.play();  

      waiting=false;

      removeElements();

    }

  } 

  //if not send an alert message

  else alert('Sound file is loading...');

}