Why do I make these videos?
I started this series in an effort to create some supplementary materials for the Creative Coding summer class at NYU’s IMA Low Res program. My hope is that in addition to the systematic learning in class, students of Creative Coding can see from my videos ways to combine the programming concepts they’ve learnt in class to create interesting applications. This is also a platform to showcase my own explorations in p5.js.
Who are these videos for?
- Beginners in coding who are learning p5.js in a class or from a systematic tutorial (such as The Coding Train p5.js tutorial), and are eager to utilize simple functions to create fun and beautiful things.
- Mid-level creative programmers looking for visual references
- Educators looking for creative examples in p5.js
How to use these videos:
- The videos are loosely organized based on their difficulty levels, with the easiest in the first row. However, you can start with any video that interests you. If you see a function or a concept you are not familiar with, you can look it up on the p5 reference page.
- All videos include links to example sketches, as well as links to other resources.
- Below each video, I have listed out the terms to look up on the p5 reference page before watching the video. I would recommend looking at those first, then watch the video, and going to the example sketch last.
Terms to look up on the p5.js reference page:
mouseDragged ( )
keyPressed ( )
fill ( )
circle ( )
random ( )
Working with Text and Type in p5.js (Tutorial by Allison Parrish)
Terms to look up on the p5.js reference page:
translate( )
rotate( )
angleMode( )
square( )
stroke()
noFill()
Terms to look up on the p5.js reference page:
color()
textAlign()
text()
dist()
frameRate()
Working with Text and Type in p5.js (Tutorial by Allison Parrish)
Terms to look up on the p5.js reference page:
for
map()
stroke()
line()
while and for Loops
(Tutorial by Dan Shiffman):
Terms to look up on the p5.js reference page:
color()
for
lerpColor()
Nested Loops
(Tutorial by The Coding Train / Dan Shiffman):
Terms to look up on the p5.js reference page:
loadFont()
textFont()
text()
textAlign()
textSize()
preload()
while and for Loops
(Tutorial by Dan Shiffman):