Skip to content

Chapters

This textbook is organized into 25 chapters covering 600 concepts in creative coding, computational thinking, graphics, physics, WebGL, and signal processing.

Chapter Overview

  1. Introduction to Creative Coding & Canvas Foundations - Introduces the p5.js canvas environment, the setup() and draw() lifecycle loops, coordinate grids, and render cycles.
  2. 2D Primitive Shapes & Custom Geometries - Covers 2D drawing primitives (points, lines, rectangles, ellipses, arcs), stroke/fill settings, vertex shapes, and Bézier curves.
  3. Color Theory, Color Modes & Pixel Manipulation - Explores RGB, HSB, and HSL color models, alpha transparency, color interpolation, and direct pixel array operations.
  4. Variables, Data Types & Scope Fundamentals - Teaches variable declarations (let, const), global vs. local scoping, and relational comparison operators.
  5. Control Flow, Loops & Array Data Structures - Covers conditional branching (if/else, switch), loop constructs (for, while), nested grid iterations, and dynamic array methods.
  6. Matrix Transformations & Coordinate Systems - Explains canvas translation, rotation, scaling, matrix isolation (push()/pop()), and hierarchical transformation trees.
  7. Linear Motion, Trigonometry & Wave Math - Applies linear displacement, velocity, sine/cosine wave functions, and range mapping (map(), lerp()).
  8. Polar Coordinates, Oscillation & Easing - Covers polar-to-Cartesian conversion, atan2() rotational tracking, harmonic oscillation, and easing functions.
  9. Randomness, Gaussian Distributions & Random Walk - Examines pseudo-random number generation, normal distributions, standard deviation, and random walk algorithms.
  10. Perlin Noise Landscapes & Vector Flow Fields - Introduces 1D/2D/3D Perlin noise, octaves, detail settings, organic terrain generation, and vector flow fields.
  11. Vector Math Fundamentals & Physics Acceleration - Applies p5.Vector arithmetic, magnitude, normalization, velocity, acceleration, and force accumulation.
  12. Particle Systems, Forces & Steering Behaviors - Builds reusable particle classes, particle system managers, lifespan decay, emitters, and flocking behaviors.
  13. Mouse & Keyboard User Event Sensing - Captures interactive mouse coordinates, drag states, keyboard events, key codes, and bounding box hit testing.
  14. Touch Gestures, Mobile Sensors & Interaction - Implements multi-touch arrays, mobile device orientation/tilt sensors, shake gestures, and pointer locking.
  15. DOM Controls, Input Fields & UI Elements - Integrates HTML buttons, sliders, text inputs, dropdown selects, checkboxes, color pickers, and event listeners.
  16. CSS Styling, Layouts & Web Page Integration - Applies CSS flexbox/grid layout styling, dynamic element positioning, responsive resizing, and iframe embeds.
  17. Functions, Arrow Expressions & Callbacks - Deepens function modularity, parameter passing, return values, arrow syntax, and callback functions.
  18. ES6 Classes, Object-Oriented Programming & Async Data - Covers ES6 class constructors, inheritance (extends), this binding, promises, async/await, and JSON web API fetching.
  19. 3D WebGL Coordinates & Primitive Geometries - Transitions to the 3D WebGL renderer mode, 3D coordinate space, Z-depth, and primitive 3D geometries.
  20. 3D Cameras, Lighting Models, Materials & Shaders - Controls 3D cameras, ambient/directional/point lights, specular materials, texture maps, OBJ models, and GLSL shaders.
  21. Audio Synthesis, Oscillators & Envelopes - Utilizes the p5.sound library for sound playback, volume/pan control, sound oscillators, ADSR envelopes, and audio effects.
  22. Microphone Input & FFT Spectral Analysis - Captures live microphone input (p5.AudioIn), amplitude tracking, Fast Fourier Transform (p5.FFT) frequency bins, and beat detection.
  23. Image Processing, Filters & Video Capture - Loads and manipulates image assets, applies pixel filters, captures live webcam feeds, and computes motion difference.
  24. Generative Typography & Vector Font Outlines - Renders custom font files, extracts glyph vector points (textToPoints()), and creates kinetic particle typography.
  25. Development Environment, Tools & Pedagogy - Covers p5.js Web Editor, VS Code, Git, GitHub Pages, accessibility features (p5.accessibility), live-coding, and computational thinking pedagogy.

How to Use This Textbook

Readers should progress through the chapters sequentially, as each chapter builds upon concepts established in preceding chapters. Prerequisite dependencies have been strictly verified to ensure a logical and frictionless learning progression.

Note: Each chapter includes a list of concepts covered. Make sure to complete prerequisites before moving to advanced chapters.