currently happily under construction :)

touchy chord progression in p5.js

ONLINE DEMO

notes.js

// chord generator : http://glessinger.de/joomla/media/grundwissen/Wie%20erstelle%20ich%20einen%20Septakkord.pdf
 
let maj7_filter = [4,3,4];
let m7_filter = [3,4,3];
let _7_filter = [3,3,4];
let dim7_filter = [3,3,3];
let major_filter = [4,3];
let lydian_filter = [2,2,2,1,2,1];

 
let chord_filters = [maj7_filter,m7_filter,_7_filter,dim7_filter,major_filter,lydian_filter];

let bnchrs = ["C","C#","D","D#","E","F","F#","G","G#","A","A#","B"];

let basenote = 0;

let current_filter = dim7_filter;

function extractNotes( _cfilter, _basenote ){

  let _arr = [];
  
  let stepi = float(basenote);
  
  _arr.push(bnchrs[stepi]); // add basic note
  
  //console.log("steppi_one:" + stepi);
  
  for(let i=0;i<_cfilter.length;i++){
  
      stepi += float(_cfilter[i]);
    
   
    if(stepi > 11){  _arr.push(bnchrs[stepi-12]); }else{
      
      _arr.push(bnchrs[stepi]);      
    }
    }
  
  // clear note array -----------
  notes = [];
  
  // fill octaves
  for(let j=0;j<3;j++){
  
      for(let k=0;k<_arr.length;k++){
        
        notes.push(_arr[k]+(j+3));
        
      }
  }
  
  drawStageBasics();
}        

sketch.js

let dragging = false;
let notes = [];
let synth;

let pad = 0;
let active_canvas;
let static_canvas;

let  has_touch = false;

function setup() {
  
 
  createCanvas(window.innerWidth, window.innerHeight);
 
  
  active_canvas = createGraphics(width,height);
  static_canvas = createGraphics(width,height);
  
   initSynth();
 
   noStroke();
  
   noSmooth();
  
  pad = height*.1;
   extractNotes( current_filter, basenote );
  
  
  has_touch = isTouchDevice();
  //console.log(has_touch)
  
  
}


function isTouchDevice(){
    return typeof window.ontouchstart !== 'undefined';
}

function drawStageBasics(){
  
   let ybit = (height*.8) /notes.length;

    
    
    static_canvas.clear();
     static_canvas.textSize(14);
  static_canvas.textAlign(CENTER,CENTER);
    static_canvas.text(current_chord_id, width/2,height*.05);
  
   for(let i=0;i<notes.length;i++){
  
      static_canvas.noStroke();
      static_canvas.fill(0,22);
      static_canvas.textSize(7);
      static_canvas.textAlign(RIGHT,CENTER);
    static_canvas.text(notes[i],pad*.8,i*ybit+ybit/2+pad );
     
    
     
     
      static_canvas.fill(111,155);
       
      static_canvas.rect(pad,i*ybit+pad,width-pad*2,1);
      //static_canvas.rect(pad,i*ybit+pad+ybit-2,width-pad*2,1);
    
   }

  
     let wbit = (width-pad*2)/bnchrs.length;
  
    // draw Bar lines -------------
    for(let i=0;i<bnchrs.length;i++){
      
       static_canvas.textAlign(CENTER);
         static_canvas.text( bnchrs[i], wbit*i+pad+wbit/2,height*.95 );
      
    }
  
    // draw top selector!
   static_canvas.textSize(18);
  static_canvas.textAlign(CENTER);
   static_canvas.text( ">", width*.75,height*.05 );
  static_canvas.text( "<", width*.25,height*.05 );
  
  
  let bnbit = (width-pad*2)/12;
  static_canvas.noFill();
  static_canvas.stroke(111);
  static_canvas.ellipse(basenote*bnbit+pad+bnbit/2,height*.95,33,33);
  

}


function draw() {
  
  background(255);
  
  active_canvas.noStroke();
   active_canvas.fill(255,18);
  active_canvas.rect(0,0,width-pad*2,height-pad*2);
  image(active_canvas,pad,pad);
  
  
  image(static_canvas,0,0);
  
  if(dragging){
  
      let nid = int(( (mouseY-pad) / (height*.8))*notes.length);
      pointed_note = notes[nid];
    
      if(pointed_note != played_note){
    
        
        if(synth.activeVoices>31){return;}
         const now = Tone.now();
         synth.triggerAttackRelease(pointed_note,"8n",now);
         played_note = pointed_note;
        
         drawScale(nid);
        
      }
      
    
     let lpfilter_val = abs(sin( ((mouseX-pad) / (width-pad*2)) * PI+PI) *1000 ) +100;
    
     //console.log( lpfilter_val);
    
     filter.frequency.value =  lpfilter_val;
   // filter.detune.value  =  int((mouseX-pad)*1.1);
  
  }else{
  
      drawScale(-1);
  }
  
  
}

let filter;

function initSynth(){

  synth = new Tone.PolySynth();
  synth.polyphony  = 32;
  //synth.harmonicity.value =  2.1;
   
  console.log(synth);
  
 // synth.options.detune = 155;
  
  //synth.set({ detune: 155 });
  
   synth.options.envelope.attack = .03; 
   synth.options.envelope.release = .04;
   synth.options.envelope.sustain = .5;
   synth.options.envelope.decay = .1;
  
  
   synth.options.oscillator.modulationType = "sine";
  synth.options.oscillator.harmonicity = .5;
  synth.options.oscillator.type = "sine2";
   synth.options.oscillator.partials = [.9,.701 ];
  
  
  // synth.options.oscillator.type = "fmtriangle";
   synth.volume.value = -16;
  
  //console.log(synth);
   //synth.oscillator.type = "triangle";
    
 // synth.oscillator.count = 18;
  // console.log(synth.oscillator.type);

  const now = Tone.now();
 // synth.triggerAttackRelease("C4", "3n", now);
  
   const feedbackDelay = new Tone.FeedbackDelay(0.13, 0.3) ;
  
  const freeverb = new Tone.Freeverb();
freeverb.dampening = 1000;
  freeverb.wet.value = .3;
   freeverb.roomSize.value = .8;
  
  const chorus = new Tone.Chorus(3.5, 52.5, 0.9);
  
  filter = new Tone.Filter(1500, "bandpass");
    
   synth.chain( filter,   freeverb,chorus, Tone.Destination);
  
}


let pointed_note = "";
let played_note = "";

 


// ------------------------------------

function down(){

    if(mouseX>pad && mouseY>pad){
  dragging = true;
  }
  
  // change scale ------------
  if(mouseY<pad*.7){
      if(mouseX>width/2){

        current_chord_id++;
        if( current_chord_id>chord_filters.length-1){ current_chord_id = 0; }

      }else{

          current_chord_id--;
          if( current_chord_id<0){ current_chord_id = chord_filters.length-1; }
      }
    skipChordFilter(current_chord_id);
  }
  
  // change basenote
  if(mouseY>height*.92){
  
    let npickid = int( ((mouseX-pad)/ (width-pad*2) ) * bnchrs.length );
   
    basenote = npickid; 
    //console.log(basenote);
    extractNotes( current_filter, basenote );
    
    
    
  }

}

// ------------------------------------


function up(){

   dragging = false;
   pointed_note = "";
   played_note = "";
  

}

// ------------------------------------

function mousePressed() {  if( !has_touch){ down(); }}
function mouseReleased() { if( !has_touch){   up(); }}

function touchStarted() {  if( has_touch){ down();}}
function touchEnded()  {  if( has_touch){ up();}}

// ------------------------------------


function drawScale(_tnid){

  let ybit = (height*.8) /notes.length;
  
  pad = height*.1;
  
  for(let i=0;i<notes.length;i++){
  
    if(i==_tnid){
      
       active_canvas.noStroke();
       active_canvas.fill("#4DC3FF");
       active_canvas.rect(0,ybit*i,width-pad*2,ybit);
    } 
  
  }

}

function setBaseNote(_e){
  basenote = _e.value;
  extractNotes( current_filter, basenote );
}


 


let current_chord_id = 0;

function setChordFilter(_e){

// console.log("change filter: " + chord_filters[ _e.value]);
  
  current_chord_id = _e.value;
  current_filter = chord_filters[ _e.value];
  extractNotes( current_filter, basenote );
}

function skipChordFilter(_v){

  current_filter = chord_filters[_v];
  extractNotes( current_filter, basenote );
}

<!DOCTYPE html>
<html lang="en">
  <head>
  <head>
    
     <script src="https://cdnjs.cloudflare.com/ajax/libs/tone/14.8.12/Tone.js" integrity="sha512-MyXAzMk3sw/i85erXXKd2+z2fzlmKD15TzKKwZd541ifNwUQ8Z73CfAwuyIPc0p5bL7xEA3u/l+/V0K9IyPbCg==" crossorigin="anonymous"></script>

                  <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
   
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.3.1/p5.js"></script>

    <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="utf-8" />

  </head>

  </head>
  <body>
    <script src="notes.js"></script>
    <script src="sketch.js"></script>
    
    <!--
    
<select id = "basenote_list" onchange = "setBaseNote(this)" >  
  <option value="0" >C</option>  
  <option value="1" >C#</option>  
  <option value="2" >D</option>  
  <option value="3" >D#</option>  
  <option value="4" >E</option>  
</select>  
    -->
    <!--
<select id = "chordfilter_list" onchange = "setChordFilter(this)" >  
  <option value="0" >Maj7</option>  
  <option value="1" >m7</option>  
  <option value="2" >7</option>  
  <option value="3" >Dim7</option>  
  <option value="4" >major</option>  
</select> 
    -->
    
    
    
  </body>
</html>