const note = ["F", "C", "G", "D", "A", "E", "B",
  "F#", "C#", "G#", "Bb", "Eb", "Ab"
];

//oggetto che include la dimensione dell'intervallo in cents e una funzione per convertire tale valore in radianti
let intervallo = {
  cents: 0,
  angolo: function() {
    return this.cents * PI / 4200;
  }
};

//array con le ampiezze dei dodici intervalli
let serie = [];
//variabile per verificare la chiusura del circolo
let totale;

//array con i dati grafici relativi all'ampiezza
let ampiezza = [];
//variabile ausiliaria per i dati grafici
let a = 0;

//costante che indica il raggio di partenza
const raggio = 160;
//variabile che permette di aumentare il raggio
let p;
//variabile che indica il raggio usato nel grafico
let r = 0;

//array di vettori con le coordinate grafiche per gli intervalli
let traccia = [];

//costante per disegnare le linee di demarcazione di nota
const c = 1.05;

let lbl;
let slider;
let prg;

function setup() {
  lbl = createElement('label', "Quinta (650 - 750 cents) ");
  slider = createSlider(650, 750, 700, 1);
  prg = createElement('span', " " + slider.value());
  createCanvas(640, 460);
  background(0);
}

function draw() {
  translate(width / 2, height / 2);
  stroke(255);
  textAlign(CENTER, CENTER);
  textSize(16);
  fill(10, 255, 0);
  disegna();
}

function caricaSerie(cts) {
  totale = 0;
  for (i = 0; i < 12; i++) {
    serie[i] = intervallo;
    serie[i].cents = cts;
    totale = totale + serie[i].cents
  }
  if (totale === 8400) {
    p = 0;
  } else if (totale > 8400) {
    p = 10
  } else if (totale < 8400) {
    p = -10
  }
}

function caricaTracce() {
  for (i = 0; i < 14; i++) {
    if (i == 0) {
      a = 0;
      ampiezza[i] = 0;
      r = raggio;
      let x = r * cos(ampiezza[i]);
      let y = r * sin(ampiezza[i]);
      traccia[i] = createVector(x, y);
    } else if (i > 0 && i < 10) {
      a = a + serie[i - 1].angolo();
      ampiezza[i] = a;
      r = raggio + p;
      x = r * cos(ampiezza[i]);
      y = r * sin(ampiezza[i]);
      traccia[i] = createVector(x, y);
    } else if (i == 10) {
      ampiezza[i] = 0;
      r = raggio;
      x = r * cos(ampiezza[i]);
      y = r * sin(ampiezza[i]);
      traccia[i] = createVector(x, y);
      a = 0;
    } else if (i > 10) {
      a = a + serie[i - 2].angolo();
      ampiezza[i] = -a;
      r = raggio - p;
      x = r * cos(ampiezza[i]);
      y = r * sin(ampiezza[i]);
      traccia[i] = createVector(x, y);
    }
  }
}

function disegna() {
  background(0);
  caricaSerie(slider.value());
  prg.html(" " + slider.value());
  caricaTracce();
  for (j = 1; j < 14; j++) {
    if (j < 10) {
      //disegna le linee che collegano le note
      line(traccia[j - 1].x, traccia[j - 1].y, traccia[j].x, traccia[j].y);
      //marca le linee radiali in corrispondenza delle note
      line(traccia[j - 1].x * c, traccia[j - 1].y * c, traccia[j - 1].x / c, traccia[j - 1].y / c);
      //scrive la nota
      text(note[j - 1], traccia[j - 1].x * 1.2, traccia[j - 1].y * 1.2);
    } else if (j == 10) {
      line(traccia[j - 1].x * c, traccia[j - 1].y * c, traccia[j - 1].x / c, traccia[j - 1].y / c);
      text(note[j - 1], traccia[j - 1].x * 1.2, traccia[j - 1].y * 1.2);
    } else if (j > 10 && j < traccia.length) {
      line(traccia[j - 1].x, traccia[j - 1].y, traccia[j].x, traccia[j].y);
      line(traccia[j].x * c, traccia[j].y * c, traccia[j].x / c, traccia[j].y / c);
      if (j == 13) {
        text(note[j - 1], traccia[j].x / 1.2, traccia[j].y / 1.2);
      } else {
        text(note[j - 1], traccia[j].x * 1.2, traccia[j].y * 1.2);
      }
    }
  }
}