Creative Coding
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
Example Codes
Lecture Notes
Day 3.1 – Functions and Iteration
Introduction to functions and iteration patterns.
Day 3.2 – Arranging Items, sin and cos
Using trigonometry for circular and spiral arrangements.
Day 4.1 – Functions, Scope, Shadowing
Understanding variable scope and shadowing.
Day 4.2 – random(), sin(), and noise()
Adding variation and organic movement.
Day 5.1 – Objects
Introduction to JavaScript objects.
Day 5.2 – Classes && OOP
Object-oriented programming with classes.
Day 6.1 – Arrays
Working with arrays and collections.
Day 6.2 – Course Roadmap
Workflow tips and what’s next.