Bitrate Series – Google Research (Magenta) x Gray Area

Audio Visualization with p5.js + Tone.js August 7, 2020 6-9pm PST

Link to slides


Setup

  • Quick Intros, workshop agenda

  • Setup (5 min!)

    • Download code, open in editor of choice (I'm using VSCode, but have also tried Atom and Sublime Text. Both are good options!)

    • Start a local server. There are several ways to do this!

      • Some text editors have external packages you can download so you can start a server directly within your editor (e.g., Atom Live Server)

      • If you want to do this in Terminal, cd into wherever you downloaded the code, and run the following: python -m SimpleHTTPServer 3333

      • See this documentation for more information.

  • Intro to p5.js

  • Intro to Tone.js + audio concepts

  • Intro to audio visualization with p5 + tone