30:T1733,Strat=function(_id_svg,_sf,_synth){ var me={}; me.id_svg=_id_svg; me.SF=_sf; 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]; 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.strings=[]; me.tlcx=0,me.tlcy=0; //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"); d3.select("#"+_id_svg) .on("click",function(e){ var xm=d3.mouse(this)[0]; var ym=d3.mouse(this)[1]; return me.playNote(xm,ym); }); var fretline = d3.line() .x(function(d){return d.x;}) .y(function(d){return d.y;}); for(var fidx=0;fidx<23;fidx++){ 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","#BBB") .attr("stroke-width",me.SF*2/40); } for(var dfidx=0;dfidx{ for(var sidx=0;sidx{ me.SF=_sf; me.render(); } //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; }31:[] 2e:{"title":"d3strat","cells":[{"id":0,"value":"md`# d3strat`","pinned":false,"hidden":false,"mode":"ojs"},{"id":142,"value":"Description={\n\tvar _desc=html`

\nAn exercise to explore using D3js and the WebAudio API.  \nClick any fret to play a tone at the corresponding frequency.\nMore to come ...\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\",\"#EEE\");\n return svg.node()\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"viewof scale=html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"Synth=function(){\n\tvar me={};\n\n\tme.test=(freq)=>{\n\t\tlet audioContext = new (window.AudioContext || window.webkitAudioContext);\n\t\tlet masterGainNode = audioContext.createGain();\n\t\tmasterGainNode.connect(audioContext.destination);\n\n\t\tvar osc = audioContext.createOscillator();\n\t\tosc.connect(masterGainNode);\n\t\tosc.type = \"sine\";\n\t\tosc.frequency.value = freq;\n\t\tosc.start();\n\n\t\td3.timeout(function(){\n\t\t\tosc.stop();\n d3.selectAll(\".diamond\").remove();\n\t\t},1400);\n\t}\n\n\treturn me;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":48,"value":"w_strat=new Strat(\"strat_svg\",scale_factor.value,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 \treturn \"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':40.0,})","pinned":false,"hidden":false,"mode":"ojs"},{"id":177,"value":"W=940","pinned":false,"hidden":false,"mode":"ojs"},{"id":181,"value":"H=240","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":"$W31","stdlib":"1","titling":"auto"}