"Code As A Canvas: Exploring Creative Coding With JavaScript"
summary
Demo suite builds 30 incremental p5 sketches that move from a static circle to animation, interaction and data-driven visuals using EPA cherry blossom data; examples draw 800 randomized circles, show noise on 25x25 and 100x100 grids, and get a flying-terrain WebGL view in under 100 lines. Audio uses tone.js, UI uses view and a Heroku Flask backend for sharing; the live project drawbeatats.com works in browsers, attracts kids, and required content moderation.
AI-written summary · about
chapters (29)
- 0:00Introduction
- 1:25From engineer to creative coder
- 3:17What is p5.js
- 6:08Live demo setup
- 6:50Static background in p5
- 7:33Drawing shapes with ellipse
- 8:18Shapes in a grid
- 8:40Color variation with modulo
- 9:00Random shapes with constraints
- 9:41Noise for smooth randomness
- 10:48Terrain with noise
- 11:30Coloring terrain by elevation
- 12:13Adjusting noise scale
- 12:55Noise and randomness
- 13:37Data-driven shapes
- 14:59Axes and labels
- 15:43Animating data trends
- 16:25Physics with circles
- 17:09Waveforms with time
- 17:53Pulsing grid effect
- 18:37Mouse interaction
- 19:40Drawing app with p5
- 20:22Terrain keyboard control
- 20:43Toy synth with tone.js
- 21:08p5 WebGL mode
- 21:53Art with webcam
- 22:14Drawbeats project
- 23:40Creative coding challenges
- 24:24Recap of key takeaways and encouragement
related talks
27mBreaking Down JavaScript Complexities With Generative Art
01h 01mCreative coding
12mAlgorithmically Generated Visual Designs
50mJavaScript for Artists
26mRecreate Masterpieces of Modern Art with JavaScript!
29m"JavaScript as Play"
34mZero to One: The Mystical Mathematics Of Creative Coding
28mCreating generative art with Javascript