///////////////////////////////////////////////////////////////////////////

///////////////////////////////////////////////////////////////////////////

///////////////////////////////////////////////////////////////////////////

///////////////////////////////////////////////////////////////////////////

//////// I DON'T WANNA GO /////////////////////////////////////////////////

//////// BY MODEL 86 //////////////////////////////////////////////////////

///////////////////////////////////////////////////////////////////////////

//////// @modeleightysix //////////////////////////////////////////////////

///////////////////////////////////////////////////////////////////////////

///////////////////////////////////////////////////////////////////////////

//////// VISUALS BY ///////////////////////////////////////////////////////

//////// FABIO CATAPANO ///////////////////////////////////////////////////

///////////////////////////////////////////////////////////////////////////

//////// @fabiocatapano ///////////////////////////////////////////////////

///////////////////////////////////////////////////////////////////////////

///////////////////////////////////////////////////////////////////////////

//////// CC BY-NC-SA 4.0 //////////////////////////////////////////////////

///////////////////////////////////////////////////////////////////////////

///////////////////////////////////////////////////////////////////////////

///////////////////////////////////////////////////////////////////////////

​

​

let posX = 0;

let posY = 0;

let margin = 10;

let gap = 50;

let bassPosX = 0;

let bassPosY = 0;

let midPosX = 0;

let midPosY = 0;

let treblePosX = 0;

let treblePosY = 0;

let highMidPosX =0;

let highMidPosY = 0;

let lowMidPosX = 0;

let lowMidPosY = 0;

​

let isLeft = true;

​

var unitSizeX = 50;

var unitSizeY = 100;

var minTBass = 50;

var maxTBass = 95;

var minTLowmid = 45;

var maxTLowmid = 75;

var minTMid = 35;

var maxTMid = 100;

var minTHighmid = 30;

var maxTHighmid = 85;

var minTTreble = 0;

var maxTTreble = 100;

var aniSpeed = 15;

​

var my_Bass = 1;

var my_LowMid = 1;

var my_Mid = 1;

var my_HighMid = 1;

var my_myTreble = 1;

var my_Speed = 5;

​

let imgColorArray1;

let colorArray1Picked;

let pixelPosition = [];

pixelPosition = [0, 0, 0, 0, 0];

​

let historyPosition = [];

let historyPositionV2 = [];

let gui;

​

let fft;

let bassEnergy, lowMidEnergy, midEnergy, highMidEnergy, trebleEnergy;

let sizeBassEnergy,

    sizeLowMidEnergy,

    sizeMidEnergy,

    sizeHighMidEnergy,

    sizeTrebleEnergy;

​

​

let scriptIsRunning = false;

​

///////////////////////////////////////////////////////////////////////////

function preload(){

​

  // Load audio track

  sound = loadSound('/asset/idont_2_low.mp3');

​

  // Load color palette

  imgColorArray0 = loadImage('/asset/colorArray5.png');

  imgColorArray1 = loadImage('/asset/colorArray5.png');

  imgColorArray2 = loadImage('/asset/colorArray2.png');

​

  // Load font

  font = loadFont('/asset/Space_Mono/SpaceMono-Regular.ttf');

  fontsize = 14;

​

}

///////////////////////////////////////////////////////////////////////////

function setup() {

  //Canvas with size

  let cnv = createCanvas(windowWidth, windowHeight, WEBGL);

​

  //A4 72 PPI

  //let cnv = createCanvas(842,1192, WEBGL);

​

  //A3 300 PPI

  // let cnv = createCanvas(3508,4960, WEBGL);

​

  unitSizeX = width / 100;

  unitSizeY = 310;

​

  frameRate(30);

  pixelDensity();

  setAttributes('antialias', true);

  smooth();

​

  background('#E3E3E3');

​

  textFont(font);

  textSize(fontsize);

  textAlign(LEFT, BASELINE);

  sound.stop();

  scriptIsRunning = false;

​

  ////////////////////////////////////////////////////////////////////////

  // Gui Controller

  sliderRange(1, 100, 1);

  gui = createGui("I Don't Wanna Go – Model 86");

  gui.addGlobals(

                  // 'minTBass',

                  // 'maxTBass',

                  // 'minTLowmid',

                  // 'maxTLowmid',

                  // 'minTMid',

                  // 'maxTMid',

                  // 'minTHighmid',

                  // 'maxTHighmid',

                  // 'minTTreble',

                  // 'maxTTreble',

                  'my_Bass',

                  'my_LowMid',

                  'my_Mid',

                  'my_HighMid',

                  'my_myTreble',

                  'my_Speed'

                );

  ////////////////////////////////////////////////////////////////////////

  // Audio Library

  amplitude = new p5.Amplitude();

  fft = new p5.FFT();

  sound.amp(0.2);

}

///////////////////////////////////////////////////////////////////////////

function draw() {

​

  if (!scriptIsRunning) {

  push();  

  fill(0);

  textAlign(CENTER, BASELINE);

  text("Optimised for desktop experience", 0,-20);

  text("Press 'ENTER' to start", 0,0);

  text("Press 'ARROW UP' to save image", 0,20);

  pop();

​

  } else {

      pickColor();

      rectAnimation();

  }

}

///////////////////////////////////////////////////////////////////////////

function rectAnimation(){

​

​

  // Analyse Audio

  spectrum = fft.analyze();

​

  let bassEnergy = fft.getEnergy("bass");

  let lowMidEnergy = fft.getEnergy("lowMid");

  let midEnergy = fft.getEnergy("mid");

  let highMidEnergy = fft.getEnergy("highMid");

  let trebleEnergy = fft.getEnergy("treble");

​

  bassEnergy = map(bassEnergy, 0, 255, 0, 100);

  lowMidEnergy = map(lowMidEnergy, 0, 255, 0, 100);

  midEnergy = map(midEnergy, 0, 255, 0, 100);

  highMidEnergy = map(highMidEnergy, 0, 255, 0, 100);

  trebleEnergy = map(trebleEnergy, 0, 255, 0, 100);

​

  let sizeBassEnergy = map(bassEnergy,minTBass,maxTBass,10, 60);

  let sizeLowMidEnergy = map(lowMidEnergy,minTLowmid,maxTLowmid, 1, 150);

  let sizeMidEnergy = map(midEnergy,minTMid,maxTMid, 5, 20);

  let sizeHighMidEnergy = map(highMidEnergy, minTHighmid, maxTHighmid, 1, 100);

  let sizeTrebleEnergy = map(trebleEnergy,minTTreble,maxTTreble, 1, 260);

​

​

  let rotateBassEnergy = map(bassEnergy,minTBass,maxTBass,0, 1);

  let rotateMidEnergy = map(midEnergy, 90, 100, 0, 90);

​

  // Find audio amplitude

  let level = amplitude.getLevel();

  aniSpeed = map(level, 0, 0.2, 1, 4);

​

​

  // Mid frequencies

  if(midEnergy > minTMid && midEnergy < maxTMid){

    push();

    translate(-width/2 + posX, -height/2 + posY,0);

    noStroke();

    fill(colorArray1Picked);

    smooth();

    rect(0,120, sizeMidEnergy * my_Mid, 60);

    pop();

  }

​

  //High Mid

  if(highMidEnergy > minTHighmid & highMidEnergy < maxTHighmid){

    push();

    translate(-width/2 + posX, -height/2 + posY,0);

    strokeWeight(1);

    stroke(0);

    fill('#E3E3E3');

    smooth();

    ellipse(0,120 - sizeHighMidEnergy * my_HighMid, sizeHighMidEnergy);

    pop();

  }

​

  roundBassEnergy = round(bassEnergy, 2);

​

  push();

  translate(-width/2 + posX, -height/2 + posY,0);

  noStroke();

  fill('#E3E3E3');

  if (level != 0){

    rect(0,200, 12 * my_Speed,20);

    fill(0);

    rect(0,200, 12 * my_Speed,1);

    rect(0,220, 12 * my_Speed,1);

    text(roundBassEnergy, 10,215);

  } else {

    // my_Speed = 1;

    // rect(0,200, width,20);

    // fill(0);

    // rect(0,200, width,1);

    // rect(0,220, width,1);

    // text("Model 86 | I don't wanna go | @modeleightysix | Visuals Fabio Catapano | CC BY-NC-SA 4.0", 10,215);

  }

​

  pop();

​

  if(bassEnergy > minTBass && bassEnergy < maxTBass){

    push();

    translate(-width/2 + posX, -height/2 + posY,0);

    fill('#E3E3E3');

    stroke('#000000');

    smooth();

    rect(0,240, 5, sizeBassEnergy * my_Bass);

    pop();

  }

​

//////////////////// Red line

  v1 = new p5.Vector(-width/2 + posX, sizeTrebleEnergy * my_myTreble, 0);

  historyPosition.push(v1);

  hPos = historyPosition[1];

​

  if(trebleEnergy > minTTreble && trebleEnergy < maxTTreble){

    push();

    translate(0, (- height/2) + posY);

    strokeWeight(2 * my_myTreble);

    stroke('#d43b3b');

    line(hPos.x, hPos.y, v1.x, v1.y);

    pop();

  }

​

  if (historyPosition.length > 2) {

    historyPosition.splice(0, 1);

  }

​

//////////////////// Green line

  v2 = new p5.Vector(-width/2 + posX, - lowMidEnergy + 370 * my_LowMid, 0);

​

  historyPositionV2.push(v2);

  hPos2 = historyPositionV2[1];

​

  if(lowMidEnergy > minTLowmid && lowMidEnergy < maxTLowmid){

    push();

    translate(0, (-height/2) + posY);

    strokeWeight(2 * my_LowMid);

    stroke('#A7C440');

    line(hPos2.x, hPos2.y, v2.x, v2.y);

    pop();

  }

​

  if (historyPositionV2.length > 2){

    historyPositionV2.splice(0,1);

  }

​

/////////// Change position X

  posX += aniSpeed + my_Speed;

​

  if (posX >= width){

    posY = posY + unitSizeY;

    posX = 0;

    v1.x = -width/2;

    v2.x = -width/2;

    console.log("CALL ME +44 20 7193 8604");

  }

​

  if (posY >= height - posY){

    background('#E3E3E3');

    posY = 0;

  }

​

}

​

​

​

//////////////////

function pickColor(){

​

  colorArray0Picked = imgColorArray0.get(pixelPosition[0],0);

  colorArray1Picked = imgColorArray1.get(pixelPosition[1],0);

​

  if (pixelPosition[0] > imgColorArray0.width) {

    pixelPosition[0] = 0;

  }

​

  if (pixelPosition[1] > imgColorArray0.width) {

    pixelPosition[1] = 0;

  }

​

  pixelPosition[0] = pixelPosition[0] + 10 + random(-90,90);

  pixelPosition[1] = pixelPosition[1] + 10 + random(-90,90);

  //pixelPosition += 10;

​

}

///////////////////////////////////////////////////////////////////////////

​

function keyPressed() {

   if (keyCode === ENTER) {

     if (sound.isPlaying() ){

       sound.stop();

     } else {

       sound.play();

     }

    if (!scriptIsRunning) {

      loop();

      scriptIsRunning = true;

      background('#E3E3E3');

    } else {

      noLoop();

      scriptIsRunning = false;

    }

   }

  if (keyCode === UP_ARROW) {

    saveCanvas('iDontWannGo_Model86', 'png');

    background('#E3E3E3');

  }

   return false; // prevent default

}

​

​

​

// Resize canvas

function windowResized(){

  resizeCanvas(windowWidth, windowHeight);

}

​