Skip to content

References: Introduction to Creative Coding & Canvas Foundations

  1. Creative coding - Wikipedia - Comprehensive overview of creative coding history, expressive software development, and the lineage from early generative art systems to modern interactive media. Essential background for contextualizing code as an artistic medium.

  2. 2D computer graphics - Wikipedia - Foundational explanation of digital 2D coordinate spaces, pixel rasters, and top-left origin orientations rooted in cathode-ray tube scanning hardware. Clarifies the underlying display architecture behind web canvas rendering.

  3. Frame rate - Wikipedia - Detailed analysis of temporal resolution, human visual flicker fusion, and display refresh cycles. Fundamental for understanding why animation requires steady 60 FPS execution and how frame pacing affects motion perception.

  4. Processing: A Programming Handbook for Visual Designers and Artists (Second Edition) - Casey Reas and Ben Fry - MIT Press - Reas and Fry originated the setup() and draw() execution lifecycle, creating a revolutionary direct-manipulation mental model that bridges visual artist studio practices with computational event loops in software.

  5. Getting Started with p5.js: Making Interactive Graphics in JavaScript and Processing - Lauren McCarthy, Casey Reas, and Ben Fry - Maker Media - McCarthy pioneered the translation of Processing's creative coding ethos into the modern JavaScript browser ecosystem, making canvas drawing and event loops universally accessible on the open web for all learners.

  6. p5.js Overview and Core Concepts - p5.js Foundation - Official tutorial series introducing sketch architecture, the setup and draw lifecycle functions, and global versus instance execution modes with interactive live-editable code examples for new creators.

  7. The HTML5 Canvas Element - MDN Web Docs - Authoritative technical reference documenting DOM canvas element properties, pixel dimensions, display resolution scaling, and browser rasterization lifecycles underpinning p5.js graphics rendering across modern browsers.

  8. Window.requestAnimationFrame() - MDN Web Docs - Detailed explanation of browser repaint synchronization and the event loop engine powering p5.js continuous draw loop and delta time calculations for smooth visual animation performance in web applications.

  9. Introduction to p5.js: Coordinate Systems and Shapes - The Coding Train - Daniel Shiffman's video lecture and tutorial track detailing canvas coordinate mapping, statement syntax, and frame rendering loops with approachable beginner-friendly visual animations and step-by-step guidance.

  10. CanvasRenderingContext2D: pixelRatio and High-DPI Displays - MDN Web Docs - Technical guide explaining the ratio of physical screen pixels to CSS pixels. Crucial for understanding why p5.js pixelDensity() controls are necessary on modern high-resolution Retina monitors and mobile screens.