var f = 255;

var g = 255;

var fUp = 0;

var gUp = 0;

var speed = 0.5;

var seconds = 0;

var board1Index = 0;

var board2Index = 1;

var beat = 1;

var bar = 1;

​

let board1 = [

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

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

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

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

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

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

];

​

let board2 = [

  ['-', '', '', '', '', '', ''],

  ['', '-', '', '', '', '', ''],

  ['', '', '-', '', '', '', ''],

  ['', '', '', '-', '', '', ''],

  ['', '', '', '', '-', '', ''],

  ['', '', '', '', '', '-', '']

];

​

var numF = board1[0].length;

​

​

boardArray = [board1, board2, board1, board2, board1, board2];

​

function preload() {

  blip = loadSound("blip.mp3");

  blop = loadSound("blop.mp3");

}

​

function setup() {

  createCanvas(1200, 800);

  //frameRate(1); 

  info();

  slider_setup();

}

​

function draw() {

  background(220);

  stroke(100,0,100);

  strokeWeight(0.3);

  let w = (width / 2) / numF;

  let h = (height / 2) / 6;

  for (i = 1; i < numF; i++) line(w * i, 0, w * i, height);  //     Grid vertical

  for (i = 1; i < 6; i++) line(0, h * i, width, h * i);  //     

​

  metronom(true);

  screens();

​

  textSize(32);

  fadeIn(board1Index, 0, 0); // (bxIndex, bxBar, bxFrame)

  fadeOut(board1Index, 1, 0); // (bxIndex, bxBar, bxFrame)

  fadeIn(board2Index, 1, 1);

  fadeOut(board2Index, 2, 1);

​

  function fadeIn(bxIndex, bxState, offset) {

    if (bxState == state) {

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

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

          let x = w * i;

          let y = h * j;

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

          //textAlign(CENTER);

          fUp += 0.5 * speed;

​

          if (offset == 0) {

            fill(255, 0, 0, fUp);

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

          } else {

            fill(0, 255, 0, fUp);

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

          }

​

        }

      }

    }

  }

​

​

  function fadeOut(bxIndex, bxState, offset) {

    if (bxState == state) {

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

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

          let x = w * i;

          let y = h * j;

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

          f -= 0.5 * speed;

​

          if (offset == 0) {

            fill(255, 0, 0, f);

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

          } else {

            fill(0, 255, 0, f);

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

          }

        }

      }

    }

  }

​

} //end draw

​

function info() {

  print("copy from:");

  print("https://editor.p5js.org/byxx/sketches/KUi1Xayag ");

  print("https://discourse.processing.org/t/beat-unstable-in-graphic-animation/15493/11 ");

  print("https://editor.p5js.org/byxx/sketches/EuJCp1iVI ");

}

​

var ntime = 0; //___________________________________________ timer vars

var dt = 1000; //___________________________________________ milli sec to timer event 

var tick = false; //________________________________________ bit for toggle logic use

var count = 0; //___________________________________________ event counter

​

var blip, blop; //__________________________________________ sound vars

var blopOn = 4; //__________________________________________ blip blip blip blop

var playsound = true;

​

let setBPM = 120; //________________________________________ mod for OPERATION BPM by slider

let slider;

​

let mbeat = 0; //____________________________________________ abs counter for screen animation

​

function slider_setup() {

  slider = createSlider(0, 200, 60);

  slider.style('width', '120px');

}

​

function slider_check() {

  let val = slider.value();

  if (val != setBPM) { //___________________________________ user changed

    setBPM = val;

    dt = int(60 * 1000 / setBPM);

    print("new BPM: " + setBPM + " dt " + dt);

  }

}

​

function preload() {

  blip = loadSound('blip.mp3'); //__ blip.play();

  blop = loadSound('blop.mp3'); //__ blop.play();

}

​

function metronom(showclock) {

  let metronomePosition = width - 100;

​

  strokeWeight(3);

  stroke(200, 0, 200);

  fill(0, 200, 200);

  timer();

  let x = tick ? metronomePosition  - 50 : metronomePosition + 50;

  line(metronomePosition , 100, x, 15); //__________________________ draw a visual cue

  circle(x, 15, 15);

  if (showclock) {

    noStroke();

    fill(0);

    textSize(12);

    text(timeString(), 3, height - 5);

    text(setBPM + " BPM", metronomePosition  - 25, 20);

  }

}

​

function timer() { //_ check the difference between now and the previously stored time is greater than the wait interval

  if (millis() - ntime >= dt) {

    ntime += dt; //_________________________________________ also update the time for next event

    timer_event(); //_______________________________________ action on event

  }

}

​

function timeString() {

  return year() + "-" + nf(month(), 2) + "-" + nf(day(), 2) + " " +

    nf(hour(), 2) + ":" + nf(minute(), 2) + ":" + nf(second(), 2);

}

​

function timer_event() { //_________________________________ what to do on timer event

  tick = !tick; //__________________________________________ for toggle use

  count++;

  mbeat++;

  if (playsound) {

    if (count % blopOn == 0) blop.play();

    else blip.play();

  }

  if (count >= setBPM) {

    count = 0;

    print(timeString()); //__ report computer time after BPM should still be 1 minute delta

  }

  slider_check(); //________________________________________ see slider operation

}

​

let texts = " screen ";

let state = 0;

​

function screens() {

​

  if (state == 0 && mbeat >= 2) {

    state++; resetFadeValues()

  }

  if (state == 1 && mbeat >= 4) {

    state++; resetFadeValues()

  }

  if (state == 2 && mbeat >= 6) {

    state++; resetFadeValues()

  }

  if (state == 3 && mbeat >= 8) {

    state = 0;

    mbeat = 0;

    fUp = 0;

    f = 255;

  }

​

  function resetFadeValues() {

    fUp = 0;

    f = 255;

  }

​

  text(mbeat + texts + state, width  - 130, 150);

​

}