p5.js Visualizer Workshop

Follow along at


Things You'll Need

  • git
  • terminal (iTerm, Cigwyn etc.)
  • Text Editor (Atom, Sublime, etc.)
  • python

Ali de Jong

  • 3rd year ECE student
  • Freetail Hackers Innovation Director
  • by no means a javascript wizzard
  • avid napper

p5.js Basics


  • runs once at the beginning


  • Called over and over
  • allows us to do animation


git clone https://github.com/therewasaguy/p5-music-viz.git

cd p5-music-viz

python -m SimpleHTTPServer 8000



open browser to localhost:8000

Let's Check it Out!!!

Now let's code!

Showcase your stuff on saffron!

Saffron gives you...

*Don't construct these or set their iput. We initialize them for you so just use them! 

Other cool examples

p5.js Visualizer Workshop

By Ali de Jong

p5.js Visualizer Workshop

Basics of creating a music visualizer using p5.js

  • 2,070