Links

Here are a few links to javascript/graphics web pages (tutorials, references):


• the w3schools "canvas" tutorial -- the javascript/html5 canvas element is where the graphics-action takes place.
  
  
• the Mozilla HTML5 graphics tutorial -- this is also good, and it covers some material that the w3schools tutorial doesn't.
  
  
• w3schools canvas reference -- basic docs on the canvas element
  
  
• w3schools full canvas reference -- this one is better then the above, I think. Much more complete, but perhaps a little too terse at times.

Class Downloads

• week10-html-files.zip -- all the html/javascript files we created in class (covered below).
  
  First we did some basic graphics, drawing, mouse-click-collecting, etc.:
  
  
  • graphics1.html -- draw a red rectangle
  • graphics1a.html -- draw a red rectangle, but use browser width/height (try resizing your browser and reloading the code)
  • graphics2.html -- draw green rectangles where the mouse is clicked
  • graphics2a.html -- draw randomly-colored/sized rectangles on a black background
  • graphics3.html -- animate the drawing of random lines
  • graphics4.html -- animate a moving rectangle, see different clearing methods and effects
  
  use your "view source" browser capability to see the code of these examples, or reference them from the download archive above
  
  
  Then we added sound and got progressively more complex. I use an older style coding approach, so much of this could be done more 'elegantly', plus the logic gets a little tangled because of the way I am setting flags to cause things to happen. Yes there are better ways to do this...
  
  
  • soundgraph1.html -- trigger a note repeatedly (we've done this before...)
  • soundgraph2.html -- trigger a note and draw some circles (using Tone.Draw.schedule)
  • soundgraph2a.html -- trigger a note and draw some circles using requestAnimationFrame()
  • soundgraph3.html -- trigger a note and draw circles with a finite duration
  • soundgraph3a.html -- trigger a note and draw circles with a finite duration, and they fade
  • soundgraph3a.bad.html -- fun!
  • soundgraph4.html -- create a "Circle" class to use for drawing
  • soundgraph4a.html -- fade multiple ones