p5.js Visualizer Workshop

Follow along at

http://slides.com/alidejong/p5-js-visualizer-workshop#/ 

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

setup()

  • runs once at the beginning

draw()

  • Called over and over
  • allows us to do animation

p5.sound.js

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