let accidental = 0;

let i = 0,

    lasti = 0;

let flat = '♭', 

    sharp = '♯',

    aX = 0, //accidental X and Y

    aY = 0,

    aS = 0, //accidental size

    nX = 0, //note X and Y

    nY = 0,

    nS = 0;

​

let delaySlider;

let delayBetweenChords = 1000;

let lastChordTime = -1;

let msEllapsed = 0;

​

let pauseCheckbox;

let play = true;

​

let synth;

​

function setup() {

  createCanvas(320, 568); //iphone SE logical size

  //  createCanvas(640, 1136); iphone SE pixel size

​

  //determine note positions based on screen dimensions

  nX = width * 0.4;

  nY = height * 0.45;

  nS = width * 0.7;

​

  //set accidental based on note position

  aS = width * 0.3;

  aX = nX + aS;

  aY = nY - aS;

  //Build GUI

  delaySlider = createSlider(500, 4000, 2000);

  delaySlider.position(10, 10);

  delaySlider.class('slider');

​

  pauseCheckbox = createCheckbox("", true);

  pauseCheckbox.position(240, 9);

  pauseCheckbox.changed(togglePause);

  //record the current time  

  lastChordTime = millis();

}

​

function draw() {

  background(220);

  msEllapsed = millis() - lastChordTime;

​

  if (msEllapsed >= delaySlider.value()) {

    //Pick a new chord

    i = floor(random(7));

    while (lasti==i) { //fix repeats

      i = floor(random(7));      

    }

    lasti = i;

    accidental = random(100);

    lastChordTime = millis();

    //playAudioSupport(); This sounds terrible!

  } 

  //audio

  synth = new p5.MonoSynth();

  renderTimer();

  renderChord();

}

​

//draw the countdown indicator

function renderTimer() {

  var r = 50;

  fill(50, 115, 246);

  stroke(50, 115, 246);

  arc(width-r, height*0.6, r, r, 0, TWO_PI * msEllapsed / delaySlider.value());

}

​

//Draw the chord

function renderChord() {

  fill(0, 0, 0);

  stroke(0);

​

  textSize(nS);

  textAlign(CENTER, CENTER);

​

  //note name

  text(notes[i], nX, nY);

  //sharp flat?

  textSize(aS);

  if (accidental < 33) {

    //flat

    text(flat, aX, aY);

  } else if (accidental > 66) {

    //sharp

    text(sharp, aX, aY);

  }

}

​

function togglePause() {

  play = this.checked();

  if (play) {

    lastChordTime = millis();

    loop();

  }

  else noLoop();  

}

​

//play a sound

function playAudioSupport() {

  //userStartAudio();

  // notes can overlap with each other

  synth.play('G4', 0.1, 0, 0.1);

  //synth.play('C4', vel, 0, dur);

  //synth.play('G5', vel, 0, dur);

}

​

​