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

p5.js Visualizer Workshop

By Ali de Jong

p5.js Visualizer Workshop

Basics of creating a music visualizer using p5.js

  • 425
Loading comments...

More from Ali de Jong