​

let pulsante_start;

let play = false;

let play_pre;

let tempo = 0;

let tempo_figure = 0;

let random_tempo = 1000;

​

let slider_vel;

let slidere_durata;

let millis_metronomo;

let durata = 30;

let velocità;

let millis_figure = 1000;

​

let sel_esecutori;

let sel_simboli;

let sel_forma;

​

let numero_esecutori = 1;

let tipo_simboli = 1;

let tipo_forma = 1;

let numero_simboli = 1;

let simboli_max = 10;

​

let incremento_x = 2;

let x_simbolo = [];

let y_simbolo = [];

​

let colore = [];

colore[0] = [255,   0,   0, 150];

colore[1] = [0  , 255,   0, 150];

colore[2] = [0  ,   0, 255, 150];

colore[3] = [255,   0, 255, 150];

​

let grandezza_figura = [];

let grandezza_random = 120;

​

let forma_figura = [];

let numero_figure_diverse = 4;

​

function setup() {

  cnv = createCanvas(windowWidth,windowHeight);

​

  gui = createGui();

  let x_toggle = 500;

  let y_toggle = 10;

  pulsante_start = createToggle("PLAY", width - 120, y_toggle, 100, 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_vel = createSlider("Velocità", width - 130 - width * 0.2, y_toggle, width * 0.2, 50);

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

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

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

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

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

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

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

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

  slider_durata = createSlider("Durata", 350, y_toggle, width * 0.2, 50);

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

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

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

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

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

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

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

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

  sel_esecutori = createSelect();

  sel_esecutori.position(10, 30);

  sel_esecutori.option('Uno',     1);

  sel_esecutori.option('Due',     2);

  sel_esecutori.option('Tre',     3);

  sel_esecutori.option('Quattro', 4);

​

  sel_esecutori.changed(seleziona_esecutori); //richiamo funzione

  sel_simboli = createSelect();

  sel_simboli.position(90, 30);

  sel_simboli.option('Orff',   0);

  sel_simboli.option('Kurtag', 1);

  sel_simboli.option('Spiral', 2);

  sel_simboli.option('Custom', 3);

​

  sel_simboli.selected(3);

  sel_simboli.changed(seleziona_simboli); //richiamo funzione

  sel_numero_simboli = createSelect();

  sel_numero_simboli.position(170, 30);

  sel_numero_simboli.option('Uno', 1);

  sel_numero_simboli.option('Due', 2);

  sel_numero_simboli.option('Tre   ', 3);

  sel_numero_simboli.option('Quattro ', 4);

​

  sel_numero_simboli.selected(1);

  sel_numero_simboli.changed(seleziona_numero_simboli); //richiamo funzione

  sel_forma = createSelect();

  sel_forma.position(250, 30);

  sel_forma.option('A-B',   0);

  sel_forma.option('A-B-A1', 1);

  sel_forma.option('A-B-C-A', 2);

  sel_forma.option('Custom', 3);

​

  sel_forma.selected('A-B', 0);

  sel_forma.changed(seleziona_forma); //richiamo funzione

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

    x_simbolo[i] = [];

    y_simbolo[i] = [];

    grandezza_figura[i] = [];

    forma_figura[i] = [];

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

     grandezza_figura[i][j] = 20 + random(100);

     x_simbolo[i][j] = -grandezza_figura[i][j] - 50;

     y_simbolo[i][j] = random(height -  grandezza_figura[i][j] - 70) + grandezza_figura[i][j] + 70;

     forma_figura[i][j] = 0;

   }

  }

}//fine setup

​

function draw() {

  rectMode(CORNER);

  background(255);

  //rettangolo interfaccia

  fill(0, 200, 155);

  rect(0, 0, width, 70); 

//-------disegno rettangoli esecuzione ------//

  noStroke();

  let alfa_rett = 30;

  //rettangolo rosso ritardo

  fill(255, 0, 0, alfa_rett);

  rect(width - 100, 70, 100, height - 70);

  //rettangolo arancio ritardo

  fill(255, 155, 0, alfa_rett);

  rect(width - 200, 70, 100, height - 70);

  //rettangolo verde 

  fill(0, 255, 0, alfa_rett);

  rect(width - 400, 70, 200, height - 70);

  //rettangolo arancio anticipo

  fill(255, 155, 0, alfa_rett);

  rect(width - 500, 70, 100, height - 70);

  //rettangolo rosso anticipo

  fill(255, 0, 0, alfa_rett);

  rect(width - 600, 70, 100, height - 70);

  drawGui();

  stroke(0.5);

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

  fill(0, 0, 0);

  textAlign(LEFT);

  text('Nr. esecutori ', 10, 18);

  text('Simboli', 90, 18);

  text('Nr. simboli', 170, 18);

  text('Forma', 250, 18);

​

  textAlign(CENTER);

  text('Velocità: ' + velocità, width - 130 - width * 0.1,  40);

  text('Durata: ' + durata + ' sec', 470,  40);

  text('ANTICIPO', width - 500, 90);

  text('SUONA', width - 300, 90);

  text('RITARDO', width - 100, 90);

//------------gestione tempo---------//

  velocità = int(map(slider_vel.val, 0, 1, 1, 100));

  durata = int(map(slider_durata.val, 0, 1, 30, 180));

  millis_metronomo = map((velocità), 1, 100, 40, 1);

 // millis_figure = 2000 + millis_metronomo;

  millis_figure = 4000;

  if (pulsante_start.isPressed) {

​

    play = !play;

  }

​

​

// ------- generazione grafica automatica ----//

   if (play == true) {

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

     tempo = millis();

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

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

        x_simbolo[i][j] += incremento_x;

        if (x_simbolo[i][j] > width + grandezza_figura[i][j]) {

          grandezza_figura[i][j] = 20 + random(grandezza_random);

          x_simbolo[i][j] = - 50 - grandezza_figura[i][j];

          y_simbolo [i][j] = random(height - grandezza_figura[i][j] - 70) + grandezza_figura[i][j] + 70;

          random_tempo = random(1500);

          forma_figura[i][j] = floor(random(numero_figure_diverse));

        }

       }//fine for numero simboli

     }//fine for numero esecutori

  }//fine if millis() movimento

     if (millis() - tempo_figure >= (millis_figure + random_tempo)) {

       tempo_figure = millis();

       if(numero_simboli < simboli_max) {

       numero_simboli++;     

     }

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

         grandezza_figura[i][numero_simboli] = 20 + random(grandezza_random);

         x_simbolo[i][numero_simboli] = -50 - grandezza_figura[i][numero_simboli];

         y_simbolo[i][numero_simboli] = random(height - grandezza_figura[i][numero_simboli] - 70) +

                                        grandezza_figura[i][numero_simboli] + 70;

       }

     } //fine if millis() figure

 } // fine play

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

   }

//--------- disegno simboli -----//

   rectMode(CENTER);

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

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

     fill(colore[i]);

     if (forma_figura[i][j] == 0) {

        ellipse(x_simbolo[i][j], y_simbolo[i][j],  grandezza_figura[i][j],  grandezza_figura[i][j]);  

          }

     else if (forma_figura[i][j] == 1) {

       rect(x_simbolo[i][j], y_simbolo[i][j], grandezza_figura[i][j] * 2.5, grandezza_figura[i][j] * 0.5);

      }

     else if (forma_figura[i][j] == 2) {

      poligono(x_simbolo[i][j], y_simbolo[i][j], grandezza_figura[i][j] * 0.5, 3);

      }

     else if (forma_figura[i][j] == 3) {

    rect(x_simbolo[i][j], y_simbolo[i][j], grandezza_figura[i][j] * 0.5, grandezza_figura[i][j] * 1.5);

​

     }

    } //fine for simboli

  } //fine for esecutori

play_pre = play;

} // fine draw

​

​

function seleziona_esecutori() {

  numero_esecutori =  int(sel_esecutori.value()); 

}

​

function seleziona_simboli() {

  tipo_simboli =  sel_simboli.value();

}

​

function seleziona_forma() {

  tipo_forma =  sel_forma.value();

}

​

​

function seleziona_numero_simboli() {

  numero_figure_diverse =  sel_numero_simboli.value();

}

​

​

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

function touchMoved() {

  // do some stuff

  return false;

}

​

function poligono(x, y, raggio, numero_punti) {

  let angolo = TWO_PI / numero_punti;

  beginShape();

  for (let a = 0; a < TWO_PI; a += angolo) {

    let sx = x + cos(a + HALF_PI) * raggio;

    let sy = y + sin(a + HALF_PI) * raggio;

    vertex(sx, sy);

  }

  endShape(CLOSE);

}

​

​

function iterato(x, y, diametro, numero_cerchi) {

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

      ellispe(x + i * diametro * 0.25, y, diametro, diametro )

  }

}