Audio viz1

// here we can place any "global" variables we need to be referenced throughout the sketch.

var canvas,

    bgColor,

    fft,

    soundFile,

    soundSpectrum;

let pg;

function setup() {

  colorMode(HSB,360,100,50); // set colour mode of sketch to HSB (360 degrees, 100%, 100%)

  frameRate(60); // set framerate if you need it to be something other than the default 60fps

  bgColor = color(330,0,5); // set BG colour in HSB

  background(bgColor); // draw bg

  canvas = createCanvas(1000  ,1000); // create canvas 

  canvas.drop(gotFile); // listen for file drop onto canvas

  textAlign(CENTER); // welcome text

  fill(0,0,90);

  text('Drop MP3 here, then click canvas to play when uploaded.', width / 2, height / 2);

pg = createGraphics(3000,3000)

  pg.background(32)

  frameRate(30)

}

​

function gotFile(file) {

  if((!soundFile) && (file.type == "audio")) { // if don't already have sound && is audio

    background(bgColor);

    soundFile = new p5.SoundFile(file.data); // create soundFile from dropped audio file

    initSound(); // init sound & FFT 

    canvas.mouseClicked(togglePlay); // listen for mouse click to play sound

  }

}

​

function circles(){

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

if(soundFile) {

    // set the BG colour, and so clearing the canvas

    //background(bgColor); // comment this line out if you want to "paint" with the ellipse you draw

    // analyse the current sound

    analyseSound();

    // get the latest "amplitude" or "energy" value from the audio analysis, returned in range from 0 to 1

    var myDataVal = getNewSoundDataValue("bass")*1.3; // requesting the "amplitude data for the "bass" frequency.

​

    // get a colour from our custom "getDataHSBColor" function.

    // that function takes our data value, and returns an HSB colour created by mapping the data value

    // independently to Hue, Saturation and Brightness

    var myDataColor = getDataHSBColor(myDataVal);

​

    // draw a simple ellipse, at the current position of your mouse, scaled and coloured according to the value of the latest data

    noStroke();

    fill(myDataColor);

    var myEllipseSize = 200 * myDataVal;

    ellipse(random(1000),random(1000),myEllipseSize/6,myEllipseSize/6);

  //print(myDataColor)

  }

  }

}

​

function draw() {

circles()

​

}

​

function getDataHSBColor(d) {

  this.dataHue = map(d,0,1,0,360); // value moves across full 360 degrees of hue range

  this.dataSaturation = map(d,0,1,0,100); // higher data value = more saturated colour

  this.dataBrightness = map(d,0,1,0,100); // higher data value = brighter colour

  return color(this.dataHue,this.dataSaturation,this.dataBrightness);

}

​

// -------------------------  Sound Stuff -------------------------------

// a custom function for requesting the data from the audio analysis.

// this function converts the response from the API from a range of 0 to 255, to a range of 0 to 1.

// it's helpful to convert your data to this range as you can use it more easily when mapping the data value

// to visual parameters like scale, speed or colour, etc...

function getNewSoundDataValue(freqType) { 

  return map(fft.getEnergy(freqType),0,255,0,1); // get energy from frequency, scaled from 0 to 1

}

​

//Setup a new FFT instance (to analyse the sound) and set the sound’s amplification.

function initSound() { 

  fft = new p5.FFT(0.4,1024); // (smoothing, bins)

  soundFile.amp(0.7); 

}

​

function mousePressed(){

  //background(0)

//circles()

//pg.save("pg.png");

}

​

function togglePlay() {

  if (soundFile.isPlaying()) {

    soundFile.pause();

  } else {

    soundFile.loop();

  }

}

​

function analyseSound() {

  soundSpectrum = fft.analyze(); // spectrum is array of amplitudes of each frequency?

}