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

Made with Slides.com