WebCage

let playerONE;

let playerTWO;

let playerTHREE;

let playerFOUR;

​

let one = [];

let two = [];

let three = [];

let four = [];

​

let playingOne = false;

let playingTwo = false;

let playingThree = false;

let playingFour = false;

​

let oneStartArray  = [];

let oneStopArray = [];

let twoStartArray  = [];

let twoStopArray = [];

let threeStartArray = [];

let threeStopArray = [];

let fourStartArray = [];

let fourStopArray = [];

​

let x1 = 0;

let x2 = 0;

let x3 = 0;

let x4 = 0;

​

let soundOne = [];

let soundTwo = [];

let soundThree = [];

let soundFour = [];

let soundNew = [];

​

let sec = 0;

let min = 0;

let mapTime;

​

let start = [];

let stop = [];

let randomStart = [];

let randomStop = [];

​

let spectrum;

let fft;

let mic;

let switchColor; 

​

let font;

let timer; 

let startTime;

​

let buttonX;

let buttonY;

let buttonW;

let buttonH;

let buttonAlpha;

​

// TO DO 

// fix background scaling 

// fix typo scaling

​

function preload() {

  // sounds

  for (s = 1; s < 14; s++) {

    soundOne = loadSound(s + '-one.mp3');

    append(one, soundOne);

  }

  for (s = 1; s < 14; s++) {

    soundTwo = loadSound(s + '-two.mp3');

    append(two, soundTwo);

  }

  for (s = 1; s < 14; s++) {

    soundThree = loadSound(+ s + '-three.mp3');

    append(three, soundThree);

  }

  for (s = 1; s < 14; s++) {

    soundFour = loadSound(s + '-four.mp3');

    append(four, soundFour);

  }

​

  // table playerONE, TWO, THREE, FOUR

  playerONE = loadTable('four6-PLAYER1.csv', 'csv', 'header');

  playerTWO = loadTable('four6-PLAYER2.csv', 'csv', 'header');

  playerTHREE = loadTable('four6-PLAYER3.csv', 'csv', 'header');

  playerFOUR = loadTable('four6-PLAYER4.csv', 'csv', 'header');

​

  font = loadFont('AkzidenzGrotesk-MediumExtended.otf');

}

​

function setup() {

  setInterval(time, 1000);

  frameRate(30);

  let cnv = createCanvas(windowWidth, windowHeight);

​

  Player(playerONE, oneStartArray, oneStopArray, soundOne);

  Player(playerTWO, twoStartArray, twoStopArray, soundTwo);

  Player(playerTHREE, threeStartArray, threeStopArray, soundThree);

  Player(playerFOUR, fourStartArray, fourStopArray, soundFour);

​

  fft = new p5.FFT(0.5, 64);

  mic = new p5.AudioIn();

  switchColor = 0;

​

  textFont(font);

​

  buttonX = windowWidth/2;

  buttonY = windowHeight/2;

  buttonW = windowWidth;

  buttonH = windowHeight;

  buttonAlpha = 180;

  startTime = false;

}

​

function draw() {

  background(255, 239, 0); // yellow 1 (255, 239, 0), yellow 2 (255, 249, 37)

  fill(255);

​

  mapTime = (map(sec, 0.0, 0.59, 0.0, 0.99))/100 + min;

  // Visulizer

  spectrum = fft.analyze();

  push();

  switch(switchColor) {

    case 0: 

      let go = color(199, 0, 255);

      go.setAlpha(70);

      rectColor = go;

      break;

    case 1: 

      let purple = color(199, 0, 255);

      purple.setAlpha(70);  

      rectColor = purple;

      break;

    case 2:

      let blue = color(34, 0, 255);

      blue.setAlpha(70);

      rectColor = blue;

      break;

    case 3: 

      let orange = color(255, 85, 0);

      orange.setAlpha(70);

      rectColor = orange;

      break;

    case 4: 

      let green = color(183, 243, 78);

      green.setAlpha(70);

      rectColor = green;

      break;

  }

  fill (rectColor);

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

    var amp = spectrum[i];

    var w = map(amp, 0, 256, windowHeight, 0);

    var stroke = 10;

    strokeWeight(stroke);

    rectW = windowWidth - w;

    rectH = 3 * i - w;

    rect(windowWidth/2 - rectW/2, stroke/2, rectW, -rectH);  

  }

  pop();

​

  // Players playing 

  cageOne(playerONE, one, oneStartArray, oneStopArray, soundOne);

  cageTwo(playerTWO, two, twoStartArray, twoStopArray, soundTwo);

  cageThree(playerTHREE, three, threeStartArray, threeStopArray, soundThree);

  cageFour(playerFOUR, four, fourStartArray, fourStopArray, soundFour);

​

​

  // Typo Style

  fill (255, 239, 0);

  // TIME

  textSize(windowWidth*0.065);

  textAlign(LEFT, CENTER);

  timer = (sec)/100 + min;

  text(nf(float(timer), 2, 2), windowWidth*0.5, windowHeight*0.77);

  //TEXT

  textSize(windowWidth*0.025);

  textAlign(RIGHT, CENTER);

  text('FOUR 6', windowWidth/2 - windowWidth*0.27, windowHeight*0.1);

  textAlign(LEFT, CENTER);

  text('JOHN CAGE', windowWidth/2 + windowWidth*0.27, windowHeight*0.1);

​

  //start button

  push();

  rectMode(CENTER);

  fill(0,0,0,buttonAlpha);

  noStroke();

  rect(buttonX, buttonY, buttonW, buttonH);

  fill (255, 239, 0, buttonAlpha);

  textSize(windowWidth*0.025);

  textAlign(CENTER, CENTER);

  text('PRESS TO START', windowWidth/2, windowHeight/2 - windowHeight * 0.2);

  pop();

}

​

function time() {

  if (startTime == true) {

    if (sec < 59) {

      sec ++;

      } else {

        sec = 0;

        min ++;

      }

    if (timer > 30.00) {

      timer = 0;

    }

  }

}

​

function Player(rules, startArray, stopArray, sound) {

  for (let r = 0; r < rules.getRowCount(); r++) {

    // get sound number

    sound[r] = rules.getString(r, 0);

​

    // get random start time

    start[r] = rules.getString(r, 1);

    let splitStart = split(start[r], ', ');

    splitStart = float(splitStart);

​

    let a = round(random(splitStart[0], splitStart[1]), 2);

    append(startArray, a);

​

    // get random stop time 

    stop[r] = rules.getString(r, 2);

    let splitStop = split(stop[r], ', ');

    splitStop = float(splitStop);

    let b = round(random(splitStop[0], splitStop[1]), 2);

    append(stopArray, b);

​

​

    ////////////// BEDINGUNGEN ///////////////

​

    // new start > last start - eingrenzen durch random start -1 

    if (startArray[r] < startArray[r-1]) {

      a = round(random(startArray[r-1], splitStart[1]), 2);

      startArray[r] = a;

    }

​

    // current stop < current start

    if (b < a) {

      while (b < a) {

        b = round(random(splitStop[0], splitStop[1]), 2);

      }

      stopArray[r] = b;

    }

​

    // new random start > last random stop - calculate new last stop point!

    if (startArray[r] < stopArray[r-1]) {

      b = round(random(splitStop[0], startArray[r]), 2);

      stopArray[r-1] = b;

    }

​

    // check start again, current start < last stop? 

    if (startArray[r] < stopArray[r-1]) {

      a = round(random(stopArray[r-1], splitStart[1]), 2);

      startArray[r] = a;

    }

  }

​

}

​

function cageOne(player, num, startArray, stopArray, sound) {

  if (x1 < player.getRowCount()) {

    let s = sound[x1];

    if (playingOne == false) {

      if(mapTime >= startArray[x1]) {

          num[s].play();;

          switchColor = 1;

          playingOne = true;

      }

    }

    if (playingOne == true) {

      if(mapTime >= stopArray[x1]) {

        num[s].stop();

        x1 ++;

        playingOne = false;

      }

    }

  }

}

function cageTwo(player, num, startArray, stopArray, sound) {

  if (x2 < player.getRowCount()) {

    let s = sound[x2];

    if (playingTwo == false) {

      if(mapTime >= startArray[x2]) {

          num[s].play();

          switchColor = 2;

          playingTwo = true;

      }

    }

    if (playingTwo == true) {

      if(mapTime >= stopArray[x2]) {

        x2 ++;

        playingTwo = false;

      }

    }

  }

}

function cageThree(player, num, startArray, stopArray, sound) {

  if (x3 < player.getRowCount()) {

    let s = sound[x3];

    if (playingThree == false) {

      if(mapTime >= startArray[x3]) {

          num[s].play();

          switchColor = 3;

          playingThree = true;

      }

    }

    if (playingThree == true) {

      if(mapTime >= stopArray[x3]) {

        num[s].stop();

        x3 ++;

        playingThree = false;

      }

    }

  }

}

function cageFour(player, num, startArray, stopArray, sound) {

  if (x4 < player.getRowCount()) {

    let s = sound[x4];

    if (playingFour == false) {

      if(mapTime >= startArray[x4]) {

          num[s].play();

          switchColor = 4; 

          playingFour = true;

      }

    }

    if (playingFour == true) {

      if(mapTime >= stopArray[x4]) {

        num[s].stop();

        x4 ++;

        playingFour = false;

      }

    }

  }

}

​

function mousePressed() {

    userStartAudio();

    buttonAlpha = 0;

    //timer = 0;

    startTime = true;         

}

​