Creative Coding
Tutorials and notes on creative coding with p5.js, covering topics from basic interactivity to animation, trigonometry, and object-oriented programming. Written by Oliver Steele for courses at NYU Shanghai.
Start with Variation: compare random values, sine waves, and Perlin noise, then drive a drawing with time, grid position, or the mouse.
Getting Started
- Variables and Interactivity – step-by-step face drawing with variables, mouseX, and mouseY
Arranging Items
Tutorials on positioning shapes using loops and math, progressing from lines to circles to grids.
- Arranging Items in a Line – using arithmetic and geometric progressions
- Animation and Randomness – time-based animation, random(), noise(), and arrays
- Arranging Items in a Circle or Spiral – using sin() and cos() for curved layouts
- Arranging Items in a Grid – single-loop and nested-loop strategies
- Making Exceptions in a Grid – drawing grid cells differently with conditional logic
Techniques
Strategies and tools for developing and refining sketches.
- Animation and Easing – lerp, easing functions, and animating multiple properties
- Detecting Sequences – detecting ordered key presses with arrays and strings
- Detecting Transitions – detecting when the mouse enters a rectangle, with refactoring to classes
- Pausing Part of a Sketch – controlling animation time instead of using noLoop()
- Sine in Creative Coding – waves, circular motion, and smooth periodic animation
- Techniques for Exploring Parameter Spaces – yoking parameters to mouse position for rapid experimentation
- Refactoring into Functions – extracting repeated patterns into reusable functions
Programming Concepts
Notes on JavaScript and p5.js language features used in creative coding.
- Iteration Notes – using loops to reduce repetition
- Scope and Shadowing – local vs. global variables and visibility
- Fruitful Functions (return) – parameterizing functions and returning values
Resources
p5.js Tutorials
Additional tutorials covering animation, interaction, OOP, particles, and combining sketches.
p5.js Examples
Code examples for common tasks like drawing arrows, rotating about a point, selective trails, and more.