var g = 255;

var fUp = 0;

var gUp = 0;

var speed = 0.5;

var board1Index = 0;

var board2Index = 1;

var beat = 1;

var bar = 1;

var num= 6

​

let board1 = [

  ['', '', '', '+', '', '', ''],

  ['', '', '', '+', '', '', ''],

  ['', '', '', '+', '', '', ''],

  ['+', '+', '+', '+', '+', '+', '+'],

  ['', '', '', '+', '', '', ''],

  ['', '', '', '+', '', '', '']

];

​

​

let board2 = [

  ['a', '', '', '', '', '', ''],

  ['', 'a', '', '', '', '', ''],

  ['', '', 'a', '', '', '', ''],

  ['', '', '', 'a', '', '', ''],

  ['', '', '', '', 'a', '', ''],

  ['', '', '', '', '', 'a', '']

];

​

​

let board3 = [

  ['', '', '', '', '', 'b', ''],

  ['', '', '', '', 'b', '', ''],

  ['', '', '', 'b', '', '', ''],

  ['', '', 'b', '', '', '', ''],

  ['', 'b', '', '', '', '', ''],

  ['b', '', '', '', '', '', '']

];

​

let board4 = [

  ['c', '', '', '', '', '', ''],

  ['',  'c', '', '', '', ''],

  ['', '', 'c', '', '', '', ''],

  ['', '', '', 'c', '', '', ''],

  ['', '', '', '', 'c', '', ''],

  ['', '', '', '', '', 'c', '']

];

​

boardArray = [board1, board2, board3, board4,

  board1, board2, board3, board4,

  board1, board2, board3, board4,

  board1, board2, board3, board4,

  board1, board2, board3, board4,

  board1, board2, board3, board4,

  board1, board2, board3, board4,

  board1, board2, board3, board4,

  board1, board2, board3, board4,

  board1, board2, board3, board4,

  board1, board2, board3, board4,

  board1, board2, board3, board4,

  board1, board2, board3, board4,

  board1, board2, board3, board4,

  board1, board2, board3, board4,

  board1, board2, board3, board4,

  board1, board2, board3, board4,

  board1, board2, board3, board4,

  board1, board2, board3, board4,

  board1, board2, board3, board4,

  board1, board2, board3, board4,

  board1, board2, board3, board4

];

​

​

​

​

function preload() {

  blip = loadSound("blip.mp3");

  blop = loadSound("blop.mp3");

}

​

function setup() {

  createCanvas(1200, 800);

}

​

function draw() {

  background(220);

​

  let w = (width / 2) / num;

  let h = (height / 2) / 6;

​

  //GRID vertival 

  for(i = 1; i < num; i++){

  line(w * i, 0, w * i, height);

}

​

//Grid Horizontal 

  line(0, h * 1, width, h * 1);

  line(0, h * 2, width, h * 2);

  line(0, h * 3, width, h * 3);

  line(0, h * 4, width, h * 4);

  line(0, h * 5, width, h * 5);

  line(0, h * 6, width, h * 6);

​

​

​

  //Board1  

  for (let j = 0; j < 6; j++) {

​

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

      let x = w * i;

      let y = h * j;

      let spot = boardArray[board1Index][j][i];

      textSize(32);

      fill(255, 0, 0, f);

      text(spot, x + w / 3.5, y + h / 2.5);

​

      //FadeOut Board1

      if (frameCount > 220) {

        f -= 0.5 * speed;

        fill(255, 0, 0, f);

        text(spot, x + w / 3.5, y + h / 2.5);

      }

    }

  }

​

  //Board2 FadeIn

​

  if (frameCount > 120  ) {

    for (let j = 0; j < 6; j++) {

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

        let x = w * i;

        let y = h * j;

        let spot = boardArray[board2Index][j][i];

        textSize(32);

​

        gUp += 0.25 * speed;

        fill(0, 255, 0, gUp);

        text(spot, x + w / 1.5, y + h / 1.2);

      }

    }

  }

​

  //Board2 FadeOut

  if (bar > 1 && frameCount > 1) {

    for (let j = 0; j < 6; j++) {

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

        let x = w * i;

        let y = h * j;

        let spot = boardArray[board2Index][j][i];

        textSize(32);

        g -=  speed;

        fill(0, 255, 0, g);

        text(spot, x + w / 1.5, y + h / 1.2);

      }

    }

  }

​

  //Board1 Pre-Repeat FadeIn

  if (frameCount > 360) {

    for (let j = 0; j < 6; j++) {

​

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

        let x = w * i;

        let y = h * j;

        let spot = boardArray[board1Index + 2][j][i];

        //textAlign(CENTER);

        textSize(32);

​

        fUp += 0.05 * speed;

        fill(255, 0, 0, fUp);

        text(spot, x + w / 3.5, y + h / 2.5);

      }

    }

  }

​

  //Counter  

  if (frameCount % 60 == 0){

​

    blip.play();

​

    beat += 1;

    if (beat % 5 == 0){

      beat = 1;

      bar += 1;

              blop.play();

    }

  }

​

  if (frameCount > 480) {

    frameCount = 1;

    f = 255;

    g = 255;

    fUp = 0;

    gUp = 0;

    board1Index += 2;

  }

​

  if (bar > 1 && frameCount == 100){

  board2Index += 2;

  }

}