Last active
November 3, 2017 14:26
-
-
Save eeropic/75893a23e6cf7d7a2dc3851162e82476 to your computer and use it in GitHub Desktop.
node editor for tone (hacky) editing at sketch.paperjs.org
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| //SVG.JS NEXUS UI TONE.JS WEBMIDI.JS | |
| include('https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.6.3/svg.min.js'); | |
| include('http://eerojohannes.com/js/NexusUI.js') | |
| include('http://eerojohannes.com/js/svg.panzoom.min.js') | |
| include('https://cdnjs.cloudflare.com/ajax/libs/tone/0.12.7/Tone.min.js') | |
| include('http://eerojohannes.com/js/webmidi.min.js') | |
| $('.right_panel').prepend('<div id="root"></div>') | |
| $('<style>svg text{user-select:none;pointer-events:none;cursor:initial}.node{cursor:move}.inlet, .outlet { fill: #eee; } .inlet:hover, .outlet:hover { fill: #bbb; cursor:e-resize }</style>').appendTo('body'); | |
| var oscillatorTypes=["sine","triangle","square","sawtooth"] | |
| //todo | |
| //-remove confusion between using nodes and svgjs element "nodes" | |
| //hakked some functions to the Nexus object prototypes | |
| //nexusObject.plug(toneObject.property) | |
| //nexusObject.unplug() | |
| Nexus.Sequencer.prototype.noteScale=[] | |
| Nexus.Dial.prototype.plug=function(target){ | |
| if(target._sourceType=="Oscillator"){ | |
| this.on('change',function(v){ | |
| target.type=oscillatorTypes[Math.min(Math.max(0,Math.floor(v)),3)] | |
| // target.value=v; | |
| }) | |
| } | |
| else if(target=="PitchShift"){ | |
| this.on('change',function(v){ | |
| target.pitch=v | |
| }) | |
| } | |
| else { | |
| this.on('change',function(v){ | |
| target.value=v | |
| }) | |
| } | |
| } | |
| Nexus.RadioButton.prototype.plug=function(target){ | |
| this.on('change',function(v){ | |
| if(target=="Synth"){ | |
| if(target.oscillator._sourceType=="Oscillator"){ | |
| target.oscillator.type=oscillatorTypes[Math.min(Math.max(0,Math.floor(v)),3)] | |
| } | |
| } | |
| }) | |
| } | |
| Nexus.Piano.prototype.plug=function(target){ | |
| if(target.type=="Sequencer"){ | |
| this.on('change',function(v){ | |
| var arr=[] | |
| for(var i=0;i<this.keys.length;i++){ | |
| if(this.keys[i]._state.state){ | |
| arr.push(i+this.keys[0].note) | |
| } | |
| } | |
| target.noteScale=arr; | |
| }) | |
| } | |
| if(target=="Synth" || target=="MembraneSynth"){ | |
| this.on('change',function(v){ | |
| if(v.state){target.triggerAttack(Tone.Frequency(v.note, "midi").toNote())} | |
| if(!v.state){target.triggerRelease()} | |
| }) | |
| } | |
| if(target=="Oscillator"){ | |
| this.on('change',function(v){ | |
| if(v.state){ | |
| target.start(); | |
| target.frequency.value=Tone.Frequency(v.note, "midi") | |
| } | |
| if(!v.state){ | |
| target.stop() | |
| } | |
| }) | |
| } | |
| } | |
| Nexus.Sequencer.prototype.plug=function(target){ | |
| console.log(target.type) | |
| if(target=="Synth"){ | |
| this.on('step',function(v) { | |
| var release=true; | |
| for(var i=0;i<v.length;i++){ | |
| if(v[i]){ | |
| if(this.noteScale.length!=0)var note=this.noteScale[Math.min(i,this.noteScale.length-1)] | |
| else note=i; | |
| target.triggerAttack(Tone.Frequency(note, "midi").toNote()); | |
| release=false; | |
| }} | |
| if(release){target.triggerRelease()} | |
| }) | |
| } | |
| else if(target.type=="RadioButton"){ | |
| console.log() | |
| this.on('step',function(v) { | |
| for(var i=0;i<v.length;i++){ | |
| if(v[i]){ | |
| target.select(Math.min(i,target.numberOfButtons)); | |
| }} | |
| }) | |
| } | |
| } | |
| Nexus.Slider.prototype.plug=function(target){ | |
| this.on('change',function(v){ | |
| target.value=v; | |
| }) | |
| } | |
| Nexus.Toggle.prototype.plug=function(target){ | |
| this.on('change',function(v){ | |
| if(target.type=="Sequencer"){ | |
| if(v)target.start(); | |
| else target.stop(); | |
| } | |
| }) | |
| } | |
| Nexus.Multislider.prototype.plug=function(target){ | |
| this.on('change',function(v){ | |
| if(target=="Synth"){ | |
| if(v.index==0)target.envelope.attack=v.value | |
| if(v.index==1)target.envelope.decay=v.value | |
| if(v.index==2)target.envelope.sustain=v.value | |
| if(v.index==3)target.envelope.release=v.value | |
| } | |
| }) | |
| } | |
| Nexus.Dial.prototype.unplug=function(){this.removeAllListeners();} | |
| Nexus.RadioButton.prototype.unplug=function(){this.removeAllListeners();} | |
| Nexus.Sequencer.prototype.unplug=function(){this.removeAllListeners()} | |
| Nexus.Slider.prototype.unplug=function(){this.removeAllListeners()} | |
| Nexus.Toggle.prototype.unplug=function(){this.removeAllListeners()} | |
| Nexus.Multislider.prototype.unplug=function(){this.removeAllListeners()} | |
| Nexus.Piano.prototype.unplug=function(){this.removeAllListeners()} | |
| const letWidth=10 | |
| const letHeight=20 | |
| const nodeWidth=120 | |
| const nodeHeight=80 | |
| const gridSize=10 | |
| const minTangent=20 | |
| var nodeCount=0 | |
| var connectionCount=0 | |
| var inletCount=0 | |
| var outletCount=0 | |
| //var root = SVG('root').size(1000, 700).panZoom({zoomMin:0.25, zoomMax:2, zoomFactor:0.25}) | |
| var root = SVG('root').size(1000, 700) | |
| /* | |
| root.on('panStart', function(ev) { | |
| console.log(ev,ev.detail) | |
| console.log(ev.detail.zoom) | |
| console.log(Object.getOwnPropertyNames(ev.detail.event.touches)) | |
| }) | |
| */ | |
| //root.zoom(1.5,{x:500, y:100}) | |
| //console.log(root.zoom()) | |
| //draw.zoom(1).animate().zoom(2, {x:100, y:100}) | |
| root.attr('id','svgroot') | |
| root.addClass('root') | |
| root.mode='pointer' | |
| root.connecting=false | |
| root.draggedNode=null | |
| root.connectionSource=null | |
| root.connectionTarget=null | |
| root.currentConnections=null | |
| root.connections=[] | |
| root.nodes=[] | |
| root.updateNodeNexus=function(node){ | |
| console.log(node) | |
| var nodeSVG=SVG.get(node.id) | |
| $(node.nexus.parent).css({'position':'absolute','left':nodeSVG.x()+letWidth,'top':nodeSVG.y()+letHeight*1.5}) | |
| } | |
| root.getNode=function(id){ | |
| var result = this.nodes.filter(function(obj) { | |
| return obj.id == id; | |
| }); | |
| return result[0] | |
| } | |
| root.getNodeConnections=function(id){ | |
| var result = this.connections.filter(function(obj) { | |
| return obj.src.id == id || obj.tgt.id == id; | |
| }); | |
| return result | |
| } | |
| root.getPortConnections=function(id){ | |
| var result = this.connections.filter(function(obj) { | |
| return obj.src.port == id || obj.tgt.port == id; | |
| }); | |
| return result | |
| } | |
| root.routeConnections=function(connections,eventTarget,isTarget){ | |
| var self=this; | |
| for(var i=0;i<connections.length;i++){ | |
| var connection=connections[i] | |
| var index=self.connections.map(function(e){return e.id}).indexOf(connection.id); | |
| var prevSourceNode=root.getNode(self.connections[index].src.id) | |
| var prevTargetNode=root.getNode(self.connections[index].tgt.id) | |
| if(!isTarget){ | |
| self.connections[index].src.id=eventTarget.ownerSVGElement.id; | |
| self.connections[index].src.port=eventTarget.id | |
| var sourceNode=root.getNode(self.connections[index].src.id) | |
| //tone -> tone | |
| if(sourceNode.tone!=null && prevSourceNode.tone!=null && prevTargetNode.tone!=null){ | |
| prevSourceNode.tone.disconnect(prevTargetNode.tone) | |
| sourceNode.tone.connect(prevTargetNode.tone) | |
| } | |
| //nexus -> tone | |
| if(prevSourceNode.nexus!=null && prevTargetNode.tone!=null && sourceNode.tone!=null){ | |
| prevSourceNode.nexus.unplug(); | |
| sourceNode.nexus.plug(prevTargetNode.tone) | |
| } | |
| //nexus -> nexus | |
| if(prevSourceNode.nexus!=null && sourceNode.nexus!=null && prevTargetNode.nexus!=null){ | |
| prevSourceNode.nexus.unplug(); | |
| sourceNode.nexus.plug(prevTargetNode.nexus) | |
| } | |
| } | |
| else{ | |
| self.connections[index].tgt.id=eventTarget.ownerSVGElement.id; | |
| self.connections[index].tgt.port=eventTarget.id | |
| var targetNode=root.getNode(self.connections[index].tgt.id) | |
| //tone -> tone | |
| if(prevSourceNode.tone!=null && prevTargetNode.tone!=null && targetNode.tone!=null){ | |
| prevSourceNode.tone.disconnect(prevTargetNode.tone) | |
| prevSourceNode.tone.connect(targetNode.tone) | |
| } | |
| //nexus -> tone | |
| if(prevSourceNode.nexus!=null && prevTargetNode.tone!=null && targetNode.tone!=null){ | |
| prevSourceNode.nexus.unplug(); | |
| prevSourceNode.nexus.plug(targetNode.tone) | |
| } | |
| //nexus -> nexus | |
| if(prevSourceNode.nexus!=null && prevTargetNode.nexus!=null && targetNode.nexus!=null){ | |
| prevSourceNode.nexus.unplug(); | |
| prevSourceNode.nexus.plug(targetNode.nexus) | |
| } | |
| } | |
| self.modifyConnectionSVG(connection) | |
| } | |
| } | |
| root.removeConnections=function(connections){ | |
| var self=this | |
| var removeConnections=[] | |
| //get connections to be removed and sort the indices in a list | |
| for(var j=0;j<connections.length;j++){ | |
| var connection=connections[j] | |
| var sourceNode=root.getNode(connections[j].src.id) | |
| var targetNode=root.getNode(connections[j].tgt.id) | |
| //tone -> tone | |
| if(sourceNode.tone!=null && targetNode.tone!=null){ | |
| sourceNode.tone.disconnect(targetNode.tone) | |
| } | |
| //nexus -> tone | |
| if(sourceNode.nexus!=null && targetNode.tone!=null){ | |
| sourceNode.nexus.unplug(); | |
| } | |
| //nexus -> nexus | |
| if(sourceNode.nexus!=null && targetNode.nexus!=null){ | |
| sourceNode.nexus.unplug(); | |
| } | |
| var removeConnection=self.connections.map(function(e){return e.id}).indexOf(connection.id); | |
| removeConnections.push(removeConnection) | |
| } | |
| removeConnections.sort(function(a,b){return a-b;}) | |
| for(var i=removeConnections.length-1;i>=0;i--){ | |
| SVG.get(self.connections[removeConnections[i]].id).remove(); | |
| self.connections.splice(removeConnections[i],1) | |
| } | |
| } | |
| root.mousedown(function(e){ | |
| var self = this; | |
| var mX=(e.x-$('.right_panel').offset().left) | |
| var mY=(e.y-$('.right_panel').offset().top) | |
| var targets = { | |
| 'root':()=>{ | |
| self.mode='pointer' | |
| }, | |
| 'node':()=>{ | |
| console.log(root.getNode(e.target.ownerSVGElement.id)) | |
| self.mode='dragNode' | |
| self.hitNode=SVG.get(e.target.ownerSVGElement.id); | |
| self.hitNode.front(); | |
| self.hitPos={x:mX-self.hitNode.cx(),y:mY-self.hitNode.cy()} | |
| self.currentConnections=self.getNodeConnections(self.hitNode.node.id) | |
| console.log(root.connections) | |
| var nodeObj=root.getNode(self.hitNode.node.id); | |
| if(nodeObj.nexus!=null){ | |
| $(nodeObj.nexus.parent).css('pointer-events','none') | |
| } | |
| }, | |
| 'inlet':()=>{ | |
| var connections=self.getPortConnections(e.target.id) | |
| if(connections.length==0){ | |
| self.mode='connectFromInlet' | |
| root.fire('createConnection',{element:e.target}) | |
| } | |
| else{ | |
| if(!e.shiftKey){ | |
| self.currentConnections=connections | |
| self.mode='routeInlet' | |
| } | |
| if(e.shiftKey){ | |
| self.mode='connectFromInlet' | |
| root.fire('createConnection',{element:e.target}) | |
| } | |
| } | |
| }, | |
| 'outlet':()=>{ | |
| var connections=self.getPortConnections(e.target.id) | |
| if(connections.length==0){ | |
| self.mode='connectFromOutlet' | |
| root.fire('createConnection',{element:e.target}) | |
| } | |
| else{ | |
| if(!e.shiftKey){ | |
| self.currentConnections=connections | |
| self.mode='routeOutlet' | |
| } | |
| if(e.shiftKey){ | |
| self.mode='connectFromOutlet' | |
| root.fire('createConnection',{element:e.target}) | |
| } | |
| } | |
| } | |
| } | |
| return targets[e.target.getAttribute("class") || 'root']() | |
| }) | |
| root.mousemove(function(e){ | |
| var self=this; | |
| var mX=(e.x-$('.right_panel').offset().left) | |
| var mY=(e.y-$('.right_panel').offset().top) | |
| var modes = { | |
| 'pointer':()=>{ | |
| }, | |
| 'dragNode':()=>{ | |
| var fX=Math.floor((mX-self.hitPos.x)/gridSize)*gridSize | |
| var fY=Math.floor((mY-self.hitPos.y)/gridSize)*gridSize | |
| self.hitNode.center(fX,fY) | |
| var node=root.getNode(self.hitNode.node.id); | |
| if(node.nexus!=null){ | |
| $(node.nexus.parent).css({'position':'absolute','left':fX+letWidth,'top':fY+letHeight*1.5}) | |
| } | |
| if(self.currentConnections.length>0){ | |
| for(var i=0;i<self.currentConnections.length;i++){ | |
| var connection=self.currentConnections[i] | |
| if( connection.src.id == self.hitNode.node.id || | |
| connection.tgt.id == self.hitNode.node.id){ | |
| self.modifyConnectionSVG(connection) | |
| } | |
| } | |
| } | |
| }, | |
| 'connectFromInlet':()=>{ | |
| self.connectionSVG.attr('d', | |
| root.createConnectionStr( | |
| mX,mY, | |
| self.connectionSourcePort.attr('x')+self.connectionSource.attr('x'), | |
| self.connectionSourcePort.attr('y')+self.connectionSource.attr('y')+letHeight/2)) | |
| }, | |
| 'connectFromOutlet':()=>{ | |
| self.connectionSVG.attr('d', | |
| root.createConnectionStr( | |
| self.connectionSourcePort.attr('x')+self.connectionSource.attr('x'), | |
| self.connectionSourcePort.attr('y')+self.connectionSource.attr('y')+letHeight/2, | |
| mX,mY)) | |
| }, | |
| 'routeOutlet':()=>{ | |
| //console.log('routing outlet') | |
| for(var i=0;i<self.currentConnections.length;i++){ | |
| var connection=SVG.get(self.currentConnections[i].id) | |
| var connectionNode=SVG.get(self.currentConnections[i].tgt.id) | |
| var connectionPort=SVG.get(self.currentConnections[i].tgt.port) | |
| //console.log('cn x '+connectionNode.attr('x')) | |
| connection.attr('d', | |
| root.createConnectionStr( | |
| mX,mY, | |
| connectionNode.attr('x')+connectionPort.attr('x'), | |
| connectionNode.attr('y')+connectionPort.attr('y')+letHeight/2)) | |
| } | |
| }, | |
| 'routeInlet':()=>{ | |
| //console.log('routing inlet') | |
| for(var i=0;i<self.currentConnections.length;i++){ | |
| var connection=SVG.get(self.currentConnections[i].id) | |
| var connectionNode=SVG.get(self.currentConnections[i].src.id) | |
| var connectionPort=SVG.get(self.currentConnections[i].src.port) | |
| //console.log('cn x '+connectionNode.attr('x')) | |
| connection.attr('d', | |
| root.createConnectionStr( | |
| mX,mY, | |
| connectionNode.attr('x')+connectionPort.attr('x'), | |
| connectionNode.attr('y')+connectionPort.attr('y')+letHeight/2)) | |
| } | |
| } | |
| } | |
| return modes[this.mode || 'pointer']() | |
| }) | |
| root.mouseup(function(e){ | |
| var self=this; | |
| var targetClass=e.target.getAttribute("class"); | |
| var targetID=e.target.getAttribute("id") | |
| var modes = { | |
| 'pointer':()=>{ | |
| }, | |
| 'dragNode':()=>{ | |
| var nodeObj=root.getNode(self.hitNode.node.id); | |
| if(nodeObj.nexus!=null){ | |
| $(nodeObj.nexus.parent).css('pointer-events','auto') | |
| } | |
| }, | |
| 'connectFromInlet':()=>{ | |
| if(targetClass=='outlet'){ | |
| var connection={ | |
| id:self.connectionSVG.node.id, | |
| src:{ | |
| id:e.target.ownerSVGElement.id, | |
| port:targetID | |
| }, | |
| tgt:{ | |
| id:self.connectionSource.node.id, | |
| port:self.connectionSourcePort | |
| } | |
| } | |
| var sourceNode=root.getNode(e.target.ownerSVGElement.id) | |
| var targetNode=root.getNode(self.connectionSource.node.id) | |
| //tone -> tone object | |
| if(sourceNode.tone!=null && targetNode.tone!=null){ | |
| sourceNode.tone.connect(targetNode.tone) | |
| } | |
| //nexus -> tone object | |
| else if(sourceNode.nexus!=null && targetNode.tone!=null){ | |
| sourceNode.nexus.plug(targetNode.tone) | |
| } | |
| //nexus -> nexus object | |
| else if(sourceNode.nexus!=null && targetNode.nexus!=null){ | |
| sourceNode.nexus.plug(targetNode.nexus) | |
| } | |
| self.connections.push(connection) | |
| self.modifyConnectionSVG(connection) | |
| } | |
| else{ | |
| self.connectionSVG.remove(); | |
| } | |
| }, | |
| 'connectFromOutlet':()=>{ | |
| if(targetClass=='inlet'){ | |
| var connection={ | |
| id:self.connectionSVG.node.id, | |
| src:{ | |
| id:self.connectionSource.node.id, | |
| port:self.connectionSourcePort | |
| }, | |
| tgt:{ | |
| id:e.target.ownerSVGElement.id, | |
| port:targetID | |
| } | |
| } | |
| var sourceNode=root.getNode(self.connectionSource.node.id) | |
| var targetNode=root.getNode(e.target.ownerSVGElement.id) | |
| //tone -> tone object | |
| if(sourceNode.tone!=null && targetNode.tone!=null){ | |
| sourceNode.tone.connect(targetNode.tone) | |
| } | |
| //nexus -> tone object | |
| else if(sourceNode.nexus!=null && targetNode.tone!=null){ | |
| sourceNode.nexus.plug(targetNode.tone) | |
| } | |
| //nexus -> nexus object | |
| else if(sourceNode.nexus!=null && targetNode.nexus!=null){ | |
| sourceNode.nexus.plug(targetNode.nexus) | |
| } | |
| //console.log(sourceNode,targetNode) | |
| self.connections.push(connection) | |
| self.modifyConnectionSVG(connection) | |
| } | |
| else{ | |
| self.connectionSVG.remove(); | |
| } | |
| }, | |
| 'routeOutlet':()=>{ | |
| if(targetClass=='outlet')self.routeConnections(self.currentConnections,e.target,false) | |
| else { | |
| self.removeConnections(self.currentConnections) | |
| } | |
| }, | |
| 'routeInlet':()=>{ | |
| if(targetClass=='inlet')self.routeConnections(self.currentConnections,e.target,true) | |
| else{ | |
| self.removeConnections(self.currentConnections) | |
| } | |
| } | |
| } | |
| modes[this.mode || 'pointer']() | |
| this.mode='pointer' | |
| this.currentConnections=null | |
| }) | |
| root.createConnectionStr=function(x1,y1,x2,y2){ | |
| var dist=(x2-x1)/3; | |
| var c=Math.max(minTangent,dist) | |
| //console.log('x1 '+x1+'x2 '+x2+'c '+c+' mint '+minTangent+' dist '+dist) | |
| var str='M'+x1+','+y1+' C'+(x1+c)+','+y1+' '+(x2-c)+','+y2+' '+x2+','+y2; | |
| //console.log(str) | |
| return str | |
| } | |
| root.modifyConnectionSVG=function(connection){ | |
| var obj=SVG.get(connection.id); | |
| var inlet=SVG.get(connection.tgt.port); | |
| var outlet=SVG.get(connection.src.port); | |
| var src=SVG.get(connection.src.id); | |
| var tgt=SVG.get(connection.tgt.id); | |
| var dist=( (tgt.x()+inlet.x())-(src.x()+outlet.x()) )/3; | |
| var c=Math.max(minTangent,dist) | |
| var str=obj.attr('d'); | |
| var data=str.split(" "); | |
| var srcX=src.x()+outlet.x()+letWidth | |
| var srcY=src.y()+outlet.y()+letHeight/2 | |
| var tgtX=tgt.x()+inlet.x() | |
| var tgtY=tgt.y()+inlet.y()+letHeight/2 | |
| data[0]='M'+srcX+','+srcY; | |
| data[1]='C'+(srcX+c)+','+srcY; | |
| data[2]=''+(tgtX-c)+','+tgtY; | |
| data[3]=''+tgtX+','+tgtY; | |
| var modified=data.join(" ") | |
| obj.attr('d',modified) | |
| } | |
| root.on('createConnection', function(e) { | |
| var elem=SVG.get(e.detail.element.id); | |
| var node=SVG.get(e.detail.element.ownerSVGElement.id) | |
| this.connectionSource=node; | |
| this.connectionSourcePort=elem; | |
| this.connectionSVG=root.path( | |
| root.createConnectionStr( | |
| node.attr('x')+elem.attr('x'),node.attr('y')+elem.attr('y'), | |
| node.attr('x')+elem.attr('x'),node.attr('y')+elem.attr('y')) | |
| ) | |
| this.connectionSVG.attr({'stroke':'#999','stroke-width':2,'fill':"none"}) | |
| this.connectionSVG.attr('id','connection'+connectionCount) | |
| this.connectionSVG.back(); | |
| connectionCount+=1 | |
| }) | |
| function Node(options){ | |
| //w,h,inlets,outlets,name | |
| var inlets = options.inlets || 0 | |
| var outlets = options.outlets || 0 | |
| var x = options.position[0] || 0 | |
| var y = options.position[1] || 0 | |
| var w = options.size[0] || nodeWidth | |
| var h = options.size[1] || nodeHeight | |
| var h = Math.max(h,(Math.max(inlets,outlets)+1)*letHeight) | |
| var nodeId='node'+nodeCount; | |
| var name = options.name || nodeId; | |
| this.node={id:nodeId,inlets:[],outlets:[]} | |
| this.nodeSVG = root.nested(); | |
| this.nodeSVG.attr('id',nodeId) | |
| var nodeSVG=this.nodeSVG; | |
| this.rect = nodeSVG.rect(w, h).radius(10).attr({fill:'#FEFEFE',stroke:'#777','fill-opacity':0.7}) | |
| this.rect.addClass('node') | |
| this.text = nodeSVG.text(name).move(letWidth*2,letWidth) | |
| this.text.attr('fill-opacity',1) | |
| for(var i=0;i<inlets;i++){ | |
| this.inlets=this.nodeSVG.group() | |
| this.inlets.element('title').words('Inlet '+i); | |
| this.inlet=this.inlets.rect(letWidth,letHeight) | |
| .radius(2).move(0,letHeight/2) | |
| .attr({y:letHeight*(i+0.5),fill:'#FEFEFE',stroke:'#777'}) | |
| var id='inlet'+inletCount; | |
| this.inlet.attr('id',id) | |
| this.inlet.addClass('inlet') | |
| this.node.inlets.push(id) | |
| inletCount+=1; | |
| } | |
| for(var i=0;i<outlets;i++){ | |
| this.outlets=this.nodeSVG.group() | |
| this.outlets.element('title').words('Outlet '+i); | |
| this.outlet=this.outlets.rect(letWidth,letHeight) | |
| .radius(2).move(w-letWidth,letHeight/2) | |
| .attr({y:letHeight*(i+0.5),fill:'#FEFEFE',stroke:'#777'}) | |
| var id='outlet'+outletCount; | |
| this.outlet.attr('id',id) | |
| this.outlet.addClass('outlet') | |
| this.node.outlets.push(id) | |
| outletCount+=1; | |
| } | |
| root.nodes.push(this.node) | |
| this.nodeSVG.move(x,y) | |
| nodeCount+=1; | |
| } | |
| var masterNode=new Node({size:[80,80],position:[600,50],inlets:1,outlets:0,name:'Master'}); | |
| var toneMaster=Tone.Master | |
| masterNode.node.tone=toneMaster; | |
| var chorusNode=new Node({size:[80,80],position:[300,500],inlets:1,outlets:1,name:'Chorus'}); | |
| var chorus = new Tone.Chorus(4, 2.5, 0.5); | |
| chorusNode.node.tone=chorus; | |
| var fxNode=new Node({size:[80,80],position:[200,100],inlets:1,outlets:1,name:'PingPong'}) | |
| var pingPong = new Tone.PingPongDelay("4n", 0.2) | |
| fxNode.node.tone=pingPong | |
| var revNode=new Node({size:[80,80],position:[100,100],inlets:1,outlets:1,name:'Reverb'}) | |
| var reverb = new Tone.Freeverb() | |
| revNode.node.tone=reverb | |
| var multNode=new Node({size:[80,80],position:[100,100],inlets:1,outlets:1,name:'FB mult'}) | |
| var mult = new Tone.Multiply(0.1) | |
| multNode.node.tone=mult | |
| var oscNode=new Node({size:[80,80],position:[120,200],inlets:1,outlets:1,name:'Osc'}); | |
| var osc=new Tone.Oscillator(440, "sine").start(); | |
| oscNode.node.tone=osc; | |
| var dial=Nexus.Add.Dial('root',{position:[0,0],min:200,max:1000,size:[40,40],id:'diali'}) | |
| // dial.element = SVG dial.parent = DIV | |
| var d=SVG.adopt(dial.element) | |
| d.move(5,30) | |
| oscNode.nodeSVG.add(d) | |
| dial.plug(osc.frequency) | |
| var psNode=new Node({size:[80,80],position:[120,200],inlets:1,outlets:1,name:'PitchShift'}); | |
| var ps=new Tone.PitchShift(); | |
| psNode.node.tone=ps; | |
| var dial2=Nexus.Add.Dial('root',{position:[0,0],min:-100,max:100,size:[40,40],id:'diali2'}) | |
| // dial.element = SVG dial.parent = DIV | |
| var d2=SVG.adopt(dial2.element) | |
| d2.move(5,30) | |
| psNode.nodeSVG.add(d2) | |
| dial2.plug(ps) | |
| var pianoNode=new Node({size:[240,120],position:[400,400],inlets:0,outlets:1,name:'Piano Pianolainen'}); | |
| var piano1=Nexus.Add.Piano('root',{id:'hemmo',lowNote:36,highNote:60,size:[200,80],mode:'toggle'}) | |
| pianoNode.node.nexus=piano1 | |
| root.updateNodeNexus(pianoNode.node) | |
| //console.log(Object.keys(piano1)) | |
| //console.log(piano1.id,piano1.element.getAttribute("style"),piano1.parent.getAttribute("style")) | |
| //$(piano1.parent).parent().prepend($(piano1.parent)) | |
| //'z-index':-100, | |
| var synthNode=new Node({size:[80,80],position:[500,300],inlets:1,outlets:1,name:'Synth'}); | |
| var synth=new Tone.Synth(); | |
| synthNode.node.tone=synth; | |
| //var synth = new Tone.MembraneSynth() | |
| var seqNode=new Node({size:[240,240],position:[300,140],inlets:1,outlets:1,name:'Seq'}); | |
| var seq1=Nexus.Add.Sequencer('root',{rows:8,columns:8,size:[200,200]}) | |
| seqNode.node.nexus=seq1 | |
| root.updateNodeNexus(seqNode.node) | |
| seq1.start() | |
| seq1.interval.ms(150) | |
| var radioNode = new Node({size:[100,60],position:[400,80],inlets:1,outlets:1,name:'Osctype'}) | |
| var radiobutton = Nexus.Add.RadioButton('root',{ | |
| 'size': [80,20], | |
| 'numberOfButtons': 4, | |
| 'active': -1 | |
| }) | |
| radioNode.node.nexus=radiobutton | |
| root.updateNodeNexus(radioNode.node) | |
| var mSliderNode = new Node({size:[120,120],position:[100,500],inlets:0,outlets:1,name:'Env'}) | |
| var mSlider1 = Nexus.Add.Multislider('root',{ | |
| 'size': [100,80], | |
| 'numberOfSliders': 4, | |
| 'min': 0, | |
| 'max': 1, | |
| 'step': 0, | |
| 'values': [0.05,0.4,1,0.4] | |
| }) | |
| mSliderNode.node.nexus=mSlider1 | |
| root.updateNodeNexus(mSliderNode.node) | |
| /* | |
| WebMidi.enable(function (err) { | |
| //console.log(WebMidi.inputs); | |
| //console.log(WebMidi.outputs); | |
| WebMidi.inputs[0].addListener('noteon', "all", | |
| function (e) { | |
| console.log(e); | |
| seq1.matrix.toggle.cell(e.note.number%8,Math.floor(e.note.number/16)) | |
| }); | |
| }); | |
| seq1.on('change',function(v) { | |
| console.log(v); | |
| var note=v.column+v.row*16; | |
| WebMidi.outputs[0].playNote(note,1,{rawVelocity:true,velocity:v.state*127}) | |
| }) | |
| */ | |
| //console.log(Nexus.context) | |
| // | |
| /* | |
| new Tone.Master ( ) | |
| DEFAULTS | |
| {volume:0,mute:false} | |
| */ | |
| //number.link(dial2) | |
| for(var o in Tone){ | |
| // console.log(o) | |
| } | |
| root.addNode=function(obj){ | |
| this.toneType=null | |
| console.log(' ') | |
| var toneObj = new Tone[obj] | |
| //console.log(toneObj.__proto__.__proto__.__proto__) | |
| this.getParent=function(obj,lvl){ | |
| console.log(obj.__proto__) | |
| if(obj.__proto__!="Tone"){ | |
| if(obj.__proto__=="Effect"){ | |
| //toneType=obj.__proto__ | |
| } | |
| else if(obj.__proto__=="Instrument"){ | |
| //toneType=obj.__proto__ | |
| } | |
| else if(obj.__proto__=="SignalBase"){ | |
| //toneType=obj.__proto__ | |
| } | |
| else if(obj.__proto__=="Source"){ | |
| //toneType=obj.__proto__ | |
| } | |
| else if(obj.__proto__=="AudioNode"){ | |
| //toneType=obj.__proto__ | |
| } | |
| else { | |
| this.getParent(obj.__proto__) | |
| } | |
| } | |
| } | |
| this.getParent(toneObj) | |
| //console.log('This is '+toneType) | |
| //console.log(obj.defaults) | |
| //var synthNode=new Node({size:[80,80],position:[500,300],inlets:1,outlets:1,name:'Synth'}); | |
| //var synth=new Tone.Synth(); | |
| //synthNode.node.tone=synth; | |
| } | |
| //console.log(Tone.Freeverb.superclass) | |
| root.addNode('Freeverb') | |
| root.addNode('Synth') | |
| root.addNode('EQ3') | |
| root.addNode('Pow') | |
| root.addNode('Oscillator') | |
| //root.addNode('Synth') | |
| //root.addNode('EQ3') | |
| //var fr=new Tone.Freeverb; | |
| /* | |
| for(var i=0;i<2000;i++){ | |
| var newNode=new Node({size:[80,80],position:[Math.random()*500,Math.random()*500],inlets:1,outlets:1,name:'FB mult'}) | |
| } | |
| */ | |
| //console.log(Object.getOwnPropertyNames(fr)) | |
| //console.log(Tone.Freeverb instanceof Tone.Freeverb) | |
| //console.log(Tone.Freeverb.prototype.constructor.toString().split(",")) | |
| //console.log(Tone.Monophonic._super) | |
| //console.log(Tone.Freeverb.defaults) | |
| //console.log(Tone.Synth.defaults) | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment