Rich Media Web App Dev

IGME-330

Project 1 Overview - Web Audio Visualizer

Features

  1. Web Audio
  2. Multiple Canvas Elements
  3. Mouse Interaction
  4. Widgets
  5. Custom Fonts
  6. Lines
  7. Curves
  8. Ovals, Arcs, Circles
  9. requestAnimationFrame
  10. Sprite Animation
AV example AV example AV example

Checklist! ... to succeed at this project, you need to know how to ...

  1. Basic HTML/CSS:
  2. post files to gibson (IGME-230)
  3. create a structured web page using HTML elements (IGME-230)
  4. apply CSS style rules to a page using type, class, and id selectors (IGME-230)
  5. embed a web font (IGME-230)
  6. utilize CSS absolute positioning to stack <canvas> elements on top of one another (IGME-230 and see Canvas Paint App ICE)
  8. Basic JS:
  9. declare local and global JS variables, and write JS functions
  10. programmatically select one or more HTML elements on a page
  11. modify the attributes and textual contents of an HTML element
  12. create HTML widgets such as buttons, radio buttons, check boxes and sliders so that the user can modify the behavior of an application by manipulating the widgets (Canvas Paint App ICE)
  13. attach event handlers/event listeners to HTML widgets (Canvas Paint App ICE)
  14. capture mouse input and position and translate it to canvas coordinates (Canvas Paint App ICE)
  15. utilize console.log(), break;, and the Web Inspector debugger breakpoints to troubleshoot your code
  17. Basic Canvas: (canvas specification is here)
  18. get a reference to a CanvasRenderingContext2D instance (Week 1)
  19. draw styled text on the canvas, and apply shadow effects (Hello Canvas ICE)
  20. manipulate the drawing state stack with ctx.save() and ctx.restore() (Hello Canvas ICE)
  21. fill and stroke squares/rectangles using the convenience methods ctx.fillRect() and ctx.strokeRect() (Hello Canvas ICE)
  22. fill and stroke squares/rectangles using ctx.beginPath(), ctx.rect(), ctx.closePath(), ctx.fill() and ctx.stroke()
  23. fill and stroke circles/ovals using ctx.beginPath(), ctx.arc(), ctx.closePath(), ctx.stroke(), and ctx.fill() (SG-1)
  24. stroke straight paths to create lines and polygons using ctx.moveTo(), ctx.beginPath(), ctx.lineTo(), ctx.closePath() and ctx.stroke()(SG-1)
  25. stroke curved paths to create arbitrary shapes using ctx.quadraticCurveTo() and ctx.bezierCurveTo() (SG-2)
  26. clear the canvas
  27. manipulate attributes of the drawing state such as strokeStyle, fillStyle, globalAlpha, lineWidth, lineCap, lineJoin, miterLimit, lineDashOffset, shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor, globalCompositeOperation, font, textAlign and textBaseline
  29. Web Audio:
  30. work with frequency and waveform data
  31. create and connect audio nodes
  32. More JS:
  33. move an object on the canvas using sprite animation