Albers as a Millenial
summary
Recreates Josef and Anni Albers with live JavaScript examples using HSL, SVG and transforms rather than theory alone. Generates analogous vs triad HSL palettes and steps lightness between 60–90% and 10–40%. Builds an interactive homage to the square with nested squares (small = 40% size, steps +20%) where small squares rotate ~10° and large ones ~3° toward the cursor. Renders 900 triangles in one SVG path instead of 900 DOM nodes and a 23×25 grid that parallax‑rotates by layer.
AI-written summary · about
chapters (13)
- 0:00JavaScript art intro
- 1:26Albers as artistic inspiration
- 2:28Homage to Square in code
- 3:58HSL for generative art
- 5:50Analogous and triad palettes demo
- 6:59Cursor-reactive squares depth
- 8:23Fox 2 with SVG paths
- 10:35Fox 2 pattern palettes
- 11:20Parallax shadow effects
- 13:28Orchestra line art
- 14:54Orchestra layered transforms demo
- 17:11Summary of JS art
- 17:58Q&A
related talks
22mBilly Roh - SeattleJS Conference 2017
27mRecreating Retro Computer Art with JS!
15mRevisiting Cross-Stitch generation with a restricted palette
22mDemo: Drawing Algorithms as Modular Objects: A Framework for Procedurally Generated(…)
43mThe Internet of Shapes
27mRecreate Masterpieces of Modern Art with Javascript
28mRecreating Retro Art with JS!
22mGenerative Art Speedrun