WNM498/699 Module 07

Saturday, January 19th, 2019 | Module

Extend and expand your creative options. This module and the next deal with adding sound to your projects using the p5.sound add-on. This library lets you take advantage of the web audio API. You can build a simple music player, sampler, even a synthesizer.


Demo Files

Get the demo files on GitHub.

Observe all of the interactions and examples in the source code for this module. The demo files this module showcase a grab bag of useful techniques, but focus primarily on gaining control using the DOM.


Demo Videos

Demo Videos at the Coding Train Be sure to watch 17.1 — 17.5, which will give you great information about using the basic sound controls in p5.sound.

Sound and Vision

Your task is to create an audio visualization project that explores one of the following aural concepts:

  • Sound Space
  • Sound Synthesis
  • Sound Visualization

You may include events or user controls to modify the visuals, as well as conditionals to create useful and meaningful sequence. You should consider the logistics and creative possibility in mapping one kind of data (audio) to another kind (visual). Use the history of music visuals as your guide, and consider the tradition of synesthesia-based artwork. Consider both live sound and mic input and sonic environments and soundscapes in your work.

Sound Space:

What is the relationship between environment (2d 3d, physical, screen) and audio? Could you create a soundscape the same way you view and perceive a landscape painting? What are the differences, and what are the similarities?

Sound Synthesis:

A basic instrument or sampler is a tool that let’s a user make music. What happens when that tool is opinionated or conceptual? 

Sound Visualization:

What does music look like?  Visualizing music requires a keen “ear” to details, including being mindful of dynamics, instrumentation, sequence, and structure. 


  • Create software using the p5.js web library 
  • Leverage the p5.sound.js add on
  • Create a dynamic experience taking both visuals and audio into account
  • Engage the audience with interactive art

Technical Specifications 

You will need to take advantage of objects and the prototype workflow. It’s essential you understand and utilize methods and arrays in this work. You’ll need to read the sound section of the p5.sound reference, as you will likely be using FFT to create data from audio. 

Additionally, If you want to have your graphics display on the 3 screen display, you’ll need to build to percentages as opposed to fixed width designs based on pixels. 

Due Date

This assignment is due in three Modules.

  • Module 01: Sketches, layouts, research and initial design explorations.
  • Module 02: Basic audio sketch outlines
  • Module 03: Final visualization 

Submission Directions 

Please name directory accordingly: 


Include all HTML, CSS, javascript and source art project files for submission.

< back to course home