let M = 12;

let span;

let synth;

let oscs = [];

let osc_counter = 0;

let num_oscs = 5;

​

function setup() {

  createCanvas(400, 200);

  span = width*0.9;

  let sliderN = createSlider(1,20,5);

  createSpan("<br>Denominator: ");

  let sliderN_val = createSpan(N.toFixed(0));

  sliderN.input(()=>{

    N = sliderN.value();    

    sliderN_val.html(N.toFixed(0));

  });

  createP();

  sliderM = createSlider(1,20,5);

  createSpan("<br>Base: ")

  sliderM_val = createSpan(M.toFixed(0));

  sliderM.input(()=>{

    M = sliderM.value();    

    sliderM_val.html(M.toFixed(0));

  });

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

    oscs.push(new p5.TriOsc());

    oscs[i].amp(0.0);

    oscs[i].start();

  }

}

​

function draw() {

  background(220);

  translate(width/2,height/2);

  noFill();

  stroke(0);

  strokeWeight(2);

  line(-span/2,-height/2,-span/2,height/2);

  line(span/2,-height/2,span/2,height/2);

  // fractional notes

  strokeWeight(0.5);

  fill(0,255,0,100);

  for (let i=N; i<=N; i++){

    for (let j=i; j<=(2*i); j++){

      //console.log(j/i);

      ellipse(map(j/i,1,2,-span/2,span/2),-10,20);

    }

  }

  // fractional notes

  strokeWeight(0.5);

  fill(0,0,255,100);

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

    //console.log(j/i);

    ellipse(map(pow(2,(i/M)),1,2,-span/2,span/2),10,20);

  }

}

​

function mouseClicked(){

  if (mouseY>height){

    for (let osc of oscs){

      osc.amp(0.0);

    }

  } else {

    osc = oscs[osc_counter];

    osc.freq(map(mouseX-width/2,-span/2,span/2,220,220*2));

    osc.amp(0.1);

    osc_counter = (osc_counter + 1 ) % num_oscs;

    for (let osc of oscs){

      console.log(osc.freq().value)

    }

  }

}