31:T43e,html`

Mode: 1	All Strings	All Notes	Delay: 2sec	Delay2: 2sec

`32:T5a6,ReadMe={ var _desc=html`

Instructions: 
  First, to breakdown the name:
  d3: This WebApp has some d3.js in it.
  Strato: The neck is that of a Stratocaster
  Trainer: Its purpose is guitar note Training.
  Hence the name: d3StratoTrainer.

  Generally, click the note described by the String: and Note: labels.
  String A5 means the A (5th) String.  Note G1 means the 1st G.

  Mode 0 click the indicated note, then click outside the neck to proceed to next note.
  Mode 1 auto-schedules your next note for 5 sec after you click.
  Mode 2 adds the mild pressure of a countdown timer of Delay length.
  Mode 3 plays note for audio-confirmation after Delay sec. Use like flashcards with instrument.
  Mode 4 draws/plays note first, then waits Delay sec before showing String: and Note: answers.
  
  The Octave button determines which octave notes are chosen from.
  The Strings button determines which strings notes are chosen from.
  The two Delay buttons refer to delays before and after showing answer.

  One possible issue is lack of polyphony, i.e. playing more than one note at a time.
  Here we are using the WebAudio API, maybe the WebMidi API would be better ... not sure yet.
  I would like to make chords, too, and chords requires polyphony.

`; return _desc; }33:T1905,Strat=function(_id_svg,_sf,_enabled,_synth){ var me={}; me.id_svg=_id_svg; me.SF=_sf; me.enabled=_enabled; me.synth=_synth; me.bcr=document.body.getBoundingClientRect(); me.w_bridge=2.5; me.w_nut=13./8.; me.dy=me.w_bridge-me.w_nut; me.L0=25.5;//inches nut-to-bridge on my strat me.k=Math.pow(2.,1./12.); me.open_freqs=[329.63,246.94,196.0,146.83,110.0,82.41]; me.dot_frets=[0,3,5,7,9,12,15,17,19,21,24]; me.open_midis=[76,71,67,62,57,52]; me.open_names=['E','B','G','D','A','E']; me.open_octaves=[5,4,4,4,3,3]; me.octave_notes=['C','C#','D','D#','E','F','F#','G','G#','A','A#','B']; me.octave=2;//0,1,2 = 1st, 2nd, both (octaves) me.strings=[]; me.tlcx=0,me.tlcy=0; me.string_names={'0':'1','1':'2','2':'3','3':'4','4':'5','5':'6','6':'All Strings'} me.get_random=()=>{ var which_string=me.enabled; if(false) return {string_idx:5,fret_idx:0}; if(me.enabled == 6) which_string=parseInt(Math.random()*6); if(DEBUG) console.log(me.enabled,which_string); var which_fret=0; if(me.octave==0)which_fret=parseInt(Math.random()*11); else if(me.octave==1)which_fret=12+parseInt(Math.random()*10); else if(me.octave==2)which_fret=parseInt(Math.random()*23); return { string_idx:which_string, fret_idx:which_fret } } //methods me.mkstrings=()=>{ me.strings=[]; for(var sidx=0;sidx=me.octave_notes.length){ oidx=0; octave+=1; } var L_prev=me.L0*(1.-1./Math.pow(me.k,fidx-1)); var L=me.L0*(1.-1./Math.pow(me.k,fidx)); var y0=me.dy/2*(1.-L/me.L0); var y1=me.w_bridge-me.dy/2*(1.-L/me.L0); var fret={ 'x0':(L), 'y0':(y0), 'x1':(L), 'y1':(y1), 'xc':((L_prev+L)/2.), 'yc':((y0+.15+(y1-y0-.25)*(sidx)/5.)), 'freq':f0*Math.pow(me.k,fidx), 'fretnum':fidx, 'sidx':sidx, 'notename':notename, 'octave':octave, 'midi':me.open_midis[sidx]+fidx, 'xscroll':0.0, 'played':false, 'toff':0. } //if sidx==1:print fret['x0'],fret['y0'],fret['y1'] string.push(fret); } me.strings.push(string); } me.tlcx=0;//((me.bcr.width-me.strings[0][(me.strings[0].length)-1]['x0'])/2.); me.tlcy=0; } me.render=()=>{ me.g.selectAll("rect").remove(); me.g.selectAll("path").remove(); me.g.selectAll("circle").remove(); me.g.selectAll("polygon").remove(); d3.selectAll(".diamond").remove(); me.tlcx=(me.bcr.width-me.SF*me.strings[0][22]['x0'])/2; me.tlcy=(me.bcr.width/4-me.SF*me.w_bridge)/2; var points; points=me.tlcx+","+(me.tlcy+me.SF*me.strings[0][0]['y0'])+" "; points+=(me.tlcx+me.SF*me.strings[0][22]['x0'])+","+(me.tlcy+me.SF*me.strings[0][22]['y0'])+" "; points+=(me.tlcx+me.SF*me.strings[0][22]['x0'])+","+(me.tlcy+me.SF*me.strings[0][22]['y1'])+" "; points+=me.tlcx+","+(me.tlcy+me.SF*me.strings[0][0]['y1']); me.g.append("polygon") .attr("points",points) .attr("fill","#210"); var fretline = d3.line() .x(function(d){return d.x;}) .y(function(d){return d.y;}); for(var fidx=0;fidx<25;fidx++){//23 me.g.append('path') .attr("d",fretline([ {x:me.tlcx+me.SF*me.strings[0][fidx]['x0'],y:me.tlcy+me.SF*me.strings[0][fidx]['y0']}, {x:me.tlcx+me.SF*me.strings[0][fidx]['x1'],y:me.tlcy+me.SF*me.strings[0][fidx]['y1']} ])) .attr("stroke","#CCC") .attr("stroke-width",me.SF*2/40); } for(var dfidx=0;dfidx{ var omega=Math.random(); var T=Math.acos(-1)*1013.5; return Math.PI*(1.-Math.acos(-1)/Math.pow(2,1./12.)*omega*T); } me.scaleCB=(_sf)=>{ me.SF=_sf; me.render(); } d3.select("#stringsB").on("click",function(){ me.correct=me.incorrect=0; me.enabled+=1; if(me.enabled>6)me.enabled=0; if(DEBUG)console.log(me.enabled); var label=""; if(me.enabled<6)label="String: "; d3.select("#stringsB").html(label + me.string_names[String(me.enabled)]); clearTimeout(me.timeout); }); d3.select("#octaveB").on("click",function(){ me.correct=me.incorrect=0; me.octave+=1; if(me.octave>2)me.octave=0; if(DEBUG)console.log(me.octave); var label=""; if(me.octave==0)label="Octave: 1"; else if(me.octave==1)label="Octave: 2"; else if(me.octave==2)label="All Notes"; d3.select("#octaveB").html(label); clearTimeout(me.timeout); }); //d3 graphics nodes d3.select("#"+_id_svg) .attr("width",me.bcr.width) .attr("height",me.bcr.width/4); me.g=d3.select("#"+_id_svg).append("g"); //initialization calls me.mkstrings(); me.render(); return me; }34:T154c,Orch=function(){ //Orch=Orchestrator (of the training modes and interactivity) var me={}; me.correct=me.incorrect=0; window.answer=null; me.mode=1; me.timeout=null; me.delay=1; me.delay2=1; me.delay2_values=[ 1,2,5,10 ] me.delay_values=[ 1,2,5,10,15,20,30 ] me.timeout1=me.delay_values[me.delay]*1000; me.timeout2=me.delay2_values[me.delay2]*1000; d3.select("#delayB").on("click",function(){ //me.correct=me.incorrect=0; me.delay+=1; if(me.delay>6)me.delay=0; me.timeout1=me.delay_values[me.delay]*1000; if(DEBUG)console.log(me.delay); d3.select("#delayB").html("Delay: "+me.delay_values[me.delay]+"sec"); clearTimeout(me.timeout); me.next(); }); d3.select("#delay2B").on("click",function(){ //me.correct=me.incorrect=0; me.delay2+=1; if(me.delay2>3)me.delay2=0; me.timeout2=me.delay2_values[me.delay2]*1000; if(DEBUG)console.log(me.delay2); d3.select("#delay2B").html("Delay2: "+me.delay2_values[me.delay2]+"sec"); clearTimeout(me.timeout); me.next(); }); d3.select("#modeB").on("click",function(){ me.correct=me.incorrect=0; me.mode+=1; if(me.mode>4)me.mode=0; if(DEBUG)console.log(me.mode); d3.select("#modeB").html("Mode: "+me.mode); clearTimeout(me.timeout); me.next(); }); me.set_label=(sidx,fidx)=>{//sidx<0 for blank var which=1; if(fidx>23)which=3; else if(fidx>11)which=2; if(sidx<0){ d3.select("#main_label").text("String: "+"--"+" Note: "+"--").attr('fill','white'); } else{ d3.select("#main_label").text("String: "+w_strat.strings[sidx][0].notename+(sidx+1)+" Note: "+w_strat.strings[sidx][fidx]['notename']+which).attr('fill','white');; } d3.select("#score_label").text("Correct: "+me.correct+" Incorrect: "+me.incorrect).attr("fill","white");; } me.playNote=(xm,ym)=>{ if(DEBUG)console.log(xm,ym); //clearTimeout(me.timeout); for(var sidx=0;sidx0)me.timeout=setTimeout(me.next,me.timeout2); return synth.test(w_strat.strings[sidx][fidx]['freq']) } } } //clicked other than recognized note -> trigger next() me.next(); } d3.select("#strat_svg") .on("click",function(e){ if(DEBUG)console.log('click'); var xm=d3.mouse(this)[0]; var ym=d3.mouse(this)[1]; return me.playNote(xm,ym); }); me.call_next=()=>{ clearTimeout(me.timeout); if(DEBUG)console.log('me.call_next'); if(me.mode<3){ me.incorrect+=1;//the point me.next(); } else if(me.mode==3){ //flashcard mode (3) var note=window.answer; var tlcx=w_strat.tlcx; var tlcy=w_strat.tlcy; var SF=w_strat.SF; if(DEBUG)console.log('me.call_next calling playNote'); me.playNote(tlcx+SF*note.xc,tlcy+SF*note.yc); //playNote sets timeout for me.next } else if(me.mode==4){ me.set_label(window.answer['sidx'],window.answer['fretnum']); me.timeout=setTimeout(me.next,me.timeout2); } } me.next=()=>{ if(DEBUG)console.log('me.next'); d3.selectAll(".diamond").remove(); var rval=w_strat.get_random(); if(DEBUG)console.log(rval); var string=w_strat.strings[rval.string_idx]; var note=string[rval.fret_idx]; if(DEBUG)console.log(note); window.answer=note; var tlcx=w_strat.tlcx; var tlcy=w_strat.tlcy; var SF=w_strat.SF; if(me.mode<4){ me.set_label(rval.string_idx,rval.fret_idx); } else if(me.mode==4){ me.playNote(tlcx+SF*note.xc,tlcy+SF*note.yc); me.set_label(-1,-1); } clearTimeout(me.timeout); if(me.mode==2)me.timeout=setTimeout(me.call_next,me.timeout1); else if(me.mode==3)me.timeout=setTimeout(me.call_next,me.timeout1); else if(me.mode==4)me.timeout=setTimeout(me.call_next,me.timeout1); } return me; }35:[] 2f:{"title":"d3StratoTrainer","cells":[{"id":0,"value":"/*\n\tAuthor: Charlie Cosse\n Website: http://ccosse.github.io\n\tContact: ccosse@gmail.com\n\tDate: December 2019\n\tLicense: All Rights Reserved\n*/\n\nmd`# d3StratoTrainer\nAn Interactive Guitar Flashcard System
\nUse standalone or with an instrument (Mode 3)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":142,"value":"Description={\n\tvar _desc=html`

\n\"Make the rest of your life with the guitar a little easier by memorizing every note on the neck. cold!\"\n-- Steve Vai, Vaideology (opening words) [4]\n

\t`\n return _desc;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"svg={\n const _svg = d3.create(\"svg\")\n \t.attr(\"id\",\"strat_svg\")\n \t.attr(\"width\",W)\n \t.attr(\"height\",H)\n .style(\"background-color\",\"#BBB\");\n\n const main_label=_svg.append(\"text\")\n\t\t.style(\"font-size\",\"24pt\")\n\t\t.attr(\"fill\", \"#333\")\n\t\t.attr(\"id\",\"main_label\")\n\t\t.attr(\"transform\", \"translate(\"+((W*.70)/2)+\",\"+(16*H/17)+\")\")\n\t\t.attr(\"text-anchor\", \"center\")\n\t\t.text(\"String: --- Note: --\");\n\n const score_label=_svg.append(\"text\")\n\t\t.style(\"font-size\",\"14pt\")\n\t\t.attr(\"fill\", \"#333\")\n\t\t.attr(\"id\",\"score_label\")\n\t\t.attr(\"transform\", \"translate(\"+((W*.78)/2)+\",\"+(2*H/17)+\")\")\n\t\t.attr(\"text-anchor\", \"center\")\n\t\t.text(\"Correct: 00 Incorrect: 00\");\n\n return _svg.node()\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":865,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":512,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":606,"value":"BCR=()=>{\n return document.body.getBoundingClientRect()\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"Synth=function(){\n\tvar me={};\n\tme.test=(freq)=>{\n try{\n let audioContext = new window.AudioContext();// || window.webkitAudioContext);\n\n let masterGainNode = audioContext.createGain();\n \n masterGainNode.connect(audioContext.destination);\n \n\t\t var osc = audioContext.createOscillator();\n osc.connect(masterGainNode);\n osc.type = \"sine\";\n osc.frequency.value = freq;\n osc.start();\n \n\t\t d3.timeout(function(){osc.stop();},1400);\n }\n catch(e){console.log(e);}\n\t}\n\treturn me;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":48,"value":"w_strat=new Strat(\"strat_svg\",scale_factor.value,6,synth)","pinned":false,"hidden":false,"mode":"ojs"},{"id":199,"value":"synth=new Synth()","pinned":false,"hidden":false,"mode":"ojs"},{"id":61,"value":"init={\n \td3.selectAll(\"#scaleB\")\n\t\t.on(\"input\",function(){w_strat.scaleCB(parseFloat(this.value))});\n\n d3.selectAll(\"#stringsB\")\n\t\t.on(\"input\",function(){w_strat.stringsCB(parseFloat(this.value))});\n\n return \"ok\"\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"d3 = require(\"https://d3js.org/d3.v5.min.js\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":191,"value":"scale_factor=({'value':BCR().width/940*45.0,})","pinned":false,"hidden":false,"mode":"ojs"},{"id":177,"value":"W=BCR().width/940*940;","pinned":false,"hidden":false,"mode":"ojs"},{"id":181,"value":"H=BCR().width/940*240;","pinned":false,"hidden":false,"mode":"ojs"},{"id":302,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":313,"value":"orch=new Orch();","pinned":false,"hidden":false,"mode":"ojs"},{"id":383,"value":"about={orch.next();return {'website':'https://ccosse.github.io','why':'because i wanted one'};}","pinned":false,"hidden":false,"mode":"ojs"},{"id":638,"value":"DEBUG=false;","pinned":false,"hidden":false,"mode":"ojs"},{"id":212,"value":"md`## References`","pinned":false,"hidden":false,"mode":"ojs"},{"id":225,"value":"md`\\[1\\] [C. Cossé, MIDI SightReader](http://ccosse.github.io/sightreadingtrainer/)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":214,"value":"md`\\[2\\] [Harry F. Olson, Music, Physics and Engineering](https://www.amazon.com/Music-Physics-Engineering-Dover-Books/dp/0486217698/)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":242,"value":"md`\\[3\\] [Mozilla Developer Network, WebAudio API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API)` ","pinned":false,"hidden":false,"mode":"ojs"},{"id":259,"value":"md`\\[4\\] [Vaideology, Steve Vai](https://www.amazon.com/Vaideology-Basic-Theory-Guitar-Players/dp/1540030997/ref=sr_1_1?keywords=vaideology&qid=1575830564&sr=8-1)` ","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}