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

STARTER CODE HERE

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...

• amp --> how to use
• fft --> how to use

Other cool examples

• Awesome Audio Vis
• p5.js examples
• Databits