Links

NexusUI.js, the first package we examined, was a basic set of interface elements designed for audio work (and explicitly set up to work with Tone.js):


• NexusUI.js -- the main web page for NexusUI
  
  
• NexusUI API -- documentation and tutorial for the package
  
  
  Next we took a good look at p5.js, the javascript port of the popular web art/design language Processing:
  
  
• p5js.org -- the main p5.js web page
  
  
• p5.js download page -- I recommend downloading the full p5.js package. The p5.min.js package is good for when you have a working app, but may not be best for development. You can also download the full p5.js docs here for working off-line.
  
  
• p5.js references -- the on-line docs (and API) for p5.js
  
  
• p5.js examples -- good set of techniques for using p5.js. This is where I found the particle system code we used in class.
  
  
  Also, there were two specific sound-related links associated with the p5.js package:
  
  
  • the p5.js audio system -- p5.js has audio/music capabilities also. They're not as comprehensive or as "music-friendly" as Tone.js, but they may be useful for certain applications.
    
    
  • Tone.js p5 info -- this is documentation from Tone.js on how to work with the p5.js system.
  
  
  
  We also took a brief look at the three.js package. It's very extensive, and it requires a fair amount of knowledge about OpenGL and 3-D modeling systems. We didn't work up any class examples, but there are many (many!) examples of work available on-line:
  
  
• threejs.org -- the main three.js web page
  
  
• basic intro tutorial -- followed by more developed tutorials. Scroll down for the complete documentation of objects along the side.
  
  
• three.js examples -- Many, many, many. They're very impressive.

Class Downloads

• week11-html-files.zip -- all the html/javascript files we created in class (covered below).
  
  Here are the simple NexusUI examples we built:
  
  
  • nexus1.html -- put up a dial (this is from the opening NexusUI tutorial)
  • nexus2.html -- instantiate a 'piano-keyboord' slider and print output to the console
  • nexus3.html -- play a Tone.MonoSynth with the keyboard
  • nexus4.html -- play a Tone.MonoSynth with the keyboard and add a filter cut-off dial
  
  use your "view source" browser capability to see the code of these examples, or reference them from the download archive above
  
  
  We developed a page using p5.js intended to take an existing sound (a 'shimmering' sound) and match it with appropriate graphics. We started with a basic outline of a p5.js page, and then developed the audio first within that framework:
  
  
  • shimmer1.html -- the basic p5 setup and drawing system (from the p5.js tutorial)
  • shimmer2.html -- show how mousePressed() works (print to console)
  • shimmer2a.html -- add Tone.FMSynth for sound, triggered by mousePressed()
  • shimmer3.html -- modify the Tone.FMSynth params to close in on the 'shimmery' sound
  • shimmer3a.html -- add ping-pong delays and move to a higher pitch
  • shimmer3b.html -- add mouse on/off capability and set up regenerative scheduling
  • shimmer3c.html -- use mouse location to set frequency (note small 'bug' with turning the sound off)
  
  Again, use your "view source" browser capability to see the code of these examples, or reference them from the download archive above
  
  
  Then we added a particle system to be triggered when the sound happened:
  
  
  • pshimmer1.html -- the basic particle system, no coordination with audio
  • pshimmer2.html -- set everything to click on/off with mouse clicks, and set the particle system to be located within the canvas based on the mouse trigger point.
  • pshimmer3.html -- create a Notarize class for all audio, use it for only one shimmer
  • pshimmer3a.html -- set up for four simultaneous shimmers
  • pshimmer4.html -- randomize the colors (there was a small bug in my code, but it shimmers!)
  
  Yes, use your "view source" browser capability to see the code of these examples, or reference them from the download archive above