let lunghezza_tastiera;

let nomi_note = ["DO", "RE", "MI", "FA", "SOL", "LA", "SI","DO", "RE", "MI", "FA", "SOL", "LA", "SI", "DO"];

​

let x_tasto = [];

let y_tasto = [];

let w_tasto = [];

let h_tasto = [];

let tasto_premuto = [];

let tasto_premuto_pre = [];

​

let distanza_tasti =   [0, 0, 1, 1, 2, 3, 3, 4, 4, 5, 5, 6, 7, 7, 8, 8, 9, 10, 10, 11, 11, 12, 12, 13, 14];

​

​

let synth;

let interazione = [];

let interazione_pre = [];

let audio_attivo = false;

​

let sel_tonica; //menu grafico

let tonica = 60; //parto da DO

​

let tasti_consentiti = [];

​

let sel_scala; //menu grafico

let scala = 0; //parto dalla scala maggiore

​

let intervalli_scala = [];

intervalli_scala[0] = [0, 2, 4 , 5, 7, 9, 11, 12, 14, 16, 17, 19, 21, 23, 24]; //maggiore

intervalli_scala[1] = [0, 2, 3 , 5, 7, 8, 10, 12, 14, 15, 17, 19, 20, 22, 24]; //minore 

intervalli_scala[2] = [0, 1, 4 , 5, 7, 8, 11, 12, 13, 16, 17, 19, 20, 23, 24]; //araba

intervalli_scala[3] = [0, 2, 4 , 6, 8, 10,10, 12, 14, 16, 18, 18, 20, 22, 24]; //esatonale

​

let gui;

​

let pulsante_start;

let play = false;

let play_pre;

let tempo = 0;

​

let slider_bpm;

let millis_metronomo;

​

​

function setup() {

  cnv = createCanvas(windowWidth,windowHeight);

  cnv.mouseClicked(attiva_audio);

  altezza_tastiera = height * 0.5;

  lunghezza_tastiera = width * 0.9;

  synth_interazione = new p5.MonoSynth();

  synth = new p5.MonoSynth();

 // synth.setADSR(0.005, 0.001, 1, 20);

  gui = createGui();

  // creo interfaccia grafica

  let x_toggle = width * 0.5 - (lunghezza_tastiera * 0.2);

  let y_toggle = height * 0.33;

  pulsante_start = createToggle("PLAY", x_toggle, y_toggle, lunghezza_tastiera * 0.4, 50);

  pulsante_start.setStyle("fillBgOff", color(200, 0, 0));

  pulsante_start.setStyle("fillBgOffHover", color(255, 0, 0));

  pulsante_start.setStyle("fillBgOn", color(0, 200, 0));

  pulsante_start.setStyle("fillBgOnHover", color(0, 255, 0));

  slider_bpm = createSlider("BPM", x_toggle, y_toggle - y_toggle * 0.35, lunghezza_tastiera * 0.4, 50);

  slider_bpm.setStyle("fillBg", color(0, 100, 200));

  slider_bpm.setStyle("fillBgHover", color(0, 100, 255));

  slider_bpm.setStyle("fillBgActive", color(0, 100, 255));

  slider_bpm.setStyle("fillHandle", color(0, 200, 150));

  slider_bpm.setStyle("fillHandleHover", color(0, 255, 150));  

  slider_bpm.setStyle("fillTrack", color(0, 200, 150));

  slider_bpm.setStyle("fillTrackHover", color(0, 255, 150));

  slider_bpm.setStyle("fillTrackActive", color(0, 255, 150));

  sel_tonica = createSelect();

  sel_tonica.position(10, 50);

  sel_tonica.option('Do',  60);

  sel_tonica.option('Do#', 61);

  sel_tonica.option('Re',  62);

  sel_tonica.option('Re#', 63);

  sel_tonica.option('Mi',  64);

  sel_tonica.option('Fa',  65);

  sel_tonica.option('Fa#', 66);

  sel_tonica.option('Sol', 67);

  sel_tonica.option('Sol#',68);

  sel_tonica.option('La',  69);

  sel_tonica.option('La#', 70);

  sel_tonica.option('Si',  71); 

  sel_tonica.selected('Do', 60);

  sel_tonica.changed(seleziona_tonica); //richiamo funzione

  sel_scala = createSelect();

  sel_scala.position(10, 100);

  sel_scala.option('Maggiore',  0);

  sel_scala.option('Minore',    1);

  sel_scala.option('Araba',     2);

  sel_scala.option('Esatonale', 3);

​

  sel_scala.selected('Maggiore', 0);

  sel_scala.changed(seleziona_scala); //richiamo funzione

}

​

function draw() {

  background(0, 200, 155);

  drawGui();

  let BPM = int(map(slider_bpm.val, 0, 1, 20, 220));

  millis_metronomo = int (60000 / BPM);

  if (pulsante_start.isPressed) {

​

    play = !play;

  }

 //----- disegno tastiera----//

  fill(0, 250, 255);

  let x_tastiera = (width - lunghezza_tastiera) * 0.5;

  let y_tastiera = (height - altezza_tastiera - 30);

  rect(x_tastiera, y_tastiera , lunghezza_tastiera, altezza_tastiera);

​

  let lung_tasto = lunghezza_tastiera / 15.8; 

  let alt_tasto = altezza_tastiera * 0.8;

    for (let a = 0; a < 15; a++) {

//---- nomi note-----//

// il testo può essere levato e messo

    fill(0, 0, 0);

    textSize(lung_tasto * 0.4);

    textAlign(LEFT);

    text(nomi_note[a], x_tastiera + 15 + a * lung_tasto, y_tastiera + alt_tasto + 2 * lung_tasto * 0.4);

    }

//------- testi GUI----------//

  text('SELEZIONA LA TONICA ', 10, 45);

  text('SELEZIONA LA SCALA', 10, 95);

​

  textAlign(CENTER)

  text('BPM: ' + BPM, width * 0.5,  height * 0.27);

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

//------tasti bianchi-----// 

  if (i == 0 || i == 2 || i == 4 || i == 5 || i == 7 || i == 9 || i == 11 || i == 12 || i == 14 || i == 16 || i == 17 || i == 19 || i == 21 || i == 23 || i == 24) {

​

     fill(255, 255, 255);

     x_tasto[i] = x_tastiera + 10 + distanza_tasti[i] * lung_tasto;

     y_tasto[i] = y_tastiera + 10;

     w_tasto[i] = lung_tasto;

     h_tasto[i] = alt_tasto;

     rect (x_tasto[i], y_tasto[i], w_tasto[i], h_tasto[i]);

    if (sul_tasto_bianco(x_tasto[i], y_tasto[i], w_tasto[i], h_tasto[i]) == true) {

      fill(255, 0, 0, 50);

      rect (x_tasto[i], y_tasto[i], w_tasto[i], h_tasto[i]);

      tasto_premuto[i] = true;  

      if (mouseIsPressed) {

       interazione[i] = true;

       }

  else {

     interazione[i] = false;

  }

    }

    else {

      tasto_premuto[i] = false; 

    }

   for (let k = 0; k < 16; k++) {

    tasti_consentiti[k] = tonica + intervalli_scala[scala][k];

    if ((i + 60) == tasti_consentiti[k]) {

       fill(0, 255, 0, 30);

       rect (x_tasto[i], y_tasto[i], w_tasto[i], h_tasto[i]);

       }

     }

   } //fine if tasti bianchi

  }

 for (i = 0; i < 25; i++) {   

  if (i == 1 || i == 3 || i == 6 || i == 8 || i == 10 || i == 13 || i == 15 || i == 18 || i == 20 || i == 22) {

  //----- tasti_neri

    fill(0, 0, 0);

    x_tasto[i] = lung_tasto * 0.5 + x_tastiera + 10 + distanza_tasti[i] * lung_tasto;

    y_tasto[i] = y_tastiera + 10;

    w_tasto[i] = lung_tasto * 0.8;

    h_tasto[i] = alt_tasto * 0.6;

    rect (x_tasto[i], y_tasto[i], w_tasto[i], h_tasto[i]);

    if (sul_tasto_nero(x_tasto[i], y_tasto[i], w_tasto[i], h_tasto[i]) == true) {

      fill(255, 0, 0, 100);

      rect (x_tasto[i], y_tasto[i], w_tasto[i], h_tasto[i]);

      tasto_premuto[i] = true;

      if (mouseIsPressed) {

       interazione[i] = true;

       }

  else {

     interazione[i] = false;

  }

    }

    else {

       tasto_premuto[i] = false;

    }

       for (let k = 0; k < 16; k++) {

    tasti_consentiti[k] = tonica + intervalli_scala[scala][k];

     if ((i + 60) == tasti_consentiti[k]) {

       fill(0, 255, 0, 90);

       rect (x_tasto[i], y_tasto[i], w_tasto[i], h_tasto[i]);

       }

     }

​

   } //fine else tasti neri

​

  } //fine for tasti

//-----tasti della scala-----//

​

for (i = 0; i < 16; i ++) {

    tasti_consentiti[i] = tonica + intervalli_scala[scala][i];

}

​

//--------sintesi audio-------//  

   for (i = 0; i < 25; i++) {

     if (interazione[i] == true && interazione_pre[i] == false) {

     let nota_midi = 60 + i;

     let frequenza = midiToFreq(nota_midi); 

     synth_interazione.play(frequenza, 1.0, 0, 0.5);

     }

        tasto_premuto_pre[i] = tasto_premuto[i];

        interazione_pre[i] = interazione[i];

   // scrivo numero nota midi e frequenza

   }

​

// ------- generazione sonora automatica ----//

   if (play == true) {

     if (millis() - tempo >= millis_metronomo) {

     tempo = millis();

     let nota_midi = tonica + intervalli_scala[scala][int(random(16))];

     let frequenza = midiToFreq(nota_midi); 

     synth.play(frequenza, 0.4, 0, millis_metronomo * 1000 * 0.9);

      }  

    }

   if (play == false && play_pre == true) {

      synth.play(60, 0, 0, 0);

   }

play_pre = play;

} // fine draw

​

​

​

​

function sul_tasto_nero(x, y, w, h) {

  if (mouseX > x && mouseX < x+w && mouseY > y && mouseY < y+h) {

      return true;  

    } 

      else {

      return false; 

    }

}

​

function sul_tasto_bianco(x, y, w, h) {

  if (mouseX > x && mouseX < x+w && mouseY > y + 0.52 * y && mouseY < y+h) {

      return true;  

    } 

      else {

      return false; 

    }

}

​

function seleziona_tonica() {

  tonica=  int(sel_tonica.value()); 

}

​

function seleziona_scala() {

  scala =  sel_scala.value();

}

​

function attiva_audio() {

 if (audio_attivo == false) {

   audio_attivo = true;

     if (getAudioContext().state !== 'running') {

          userStartAudio();

     }   

   }

 }

​

/// Add these lines below sketch to prevent scrolling on mobile

function touchMoved() {

  // do some stuff

  return false;

}