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...
- amp --> how to use
- fft --> how to use
*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
