Learn To Code With p5js

p5js is a creative coding tool and is the newer, web-based, Javascript version of Processing. It is great for creative coding.


Inspiration

Card image cap

Exhibition of Processing projects

https://processing.org/exhibition/curated_page_14.html
Over 14 pages of cool projects made with Processing
Card image cap

OpenProcessing

https://www.openprocessing.org/

The OpenProcessing site is a gallery of the amazing projects that have been made with Processing and p5js.

(Slightly confusingly, p5js is the modern Javascript version of Processing. Processing itself is java-based)

Not only is this site inspirational, you can also view the source code, and remix any project you like to develop your own version. 

Card image cap

Lauren presents p5js

https://www.youtube.com/watch?v=1k3X4DLDHdc

Lauren both introduces the making of p5js and demonstrates how totally cool p5js is, highlighting some of it best features.







Tools

Card image cap

p5js Editor

https://editor.p5js.org/
Online editing of Processing projects



Learning

The source code for COW IN SPACE is available here.

Card image cap

Learn p5js

http://www.generative-gestaltung.de/2/
Learn generative design and p5js online

Card image cap

Shiffman's p5js Code Train

https://www.youtube.com/user/shiffman/search?query=p5js
All you need to know about p5js from a genius.

Card image cap

Collection of p5js Code Demos

https://p5-demos.glitch.me/

Great collection of code examples showing what you can do with p5js

Card image cap

p5js Examples on CodePen

https://codepen.io/search/pens?q=p5js

Another site where you can explore other peoples' excellent p5js sketches.