Canvas Generative Art
Build a single-file generative art piece on canvas — flow fields, particle systems, recursive trees, Voronoi, noise terrain, or geometric tilings — that produces a fresh composition each run from a seed, with parameters the viewer can tweak. Defines the aesthetic and the generative algorithm first, then implements a seeded, reproducible renderer with a regenerate control. Generative art is an algorithm-and-aesthetic problem, so the aesthetic-scope phase locks the visual rules and the seedable randomness before any drawing, the ordering that yields a deliberate piece rather than random noise.
Steps
Entry step: aesthetic-scope. Each step names the specialist role it wants; the full working prompt is expandable.
- Aesthetic scopevisual-designerentry
the algorithm, palette, composition rules, seed
Show working prompt
Define the aesthetic and the generative system. (1) Choose the algorithm (flow field, particles, recursive subdivision, noise, Voronoi, packing) and describe in steps how it draws a composition. (2) Pick a palette (hex) and the composition rules (density, scale, symmetry, margins, layering, blend). (3) Decide the seed: each run uses a seed so output is reproducible, and a regenerate control makes a new one. (4) List the tweakable parameters exposed to the viewer (count, scale, palette). (5) Write an acceptance-criteria checklist of 5-8 items, e.g. 'a composition renders on load', 'regenerate produces a clearly different composition', 'the same seed reproduces the same image', 'parameters change the output', 'the palette is used (not random colors)', 'no console errors'. Write to notes/aesthetic-scope.md and via write_task_note. No code yet.
- Builddeveloper
implement the seeded renderer in index.html
Show working prompt
Implement the generative piece in a single index.html (inline CSS + JS) to the aesthetic spec. (1) Set up a full-canvas 2d context sized to the viewport. (2) Implement a seedable PRNG (e.g. mulberry32) so a given seed reproduces the same image; derive all randomness from it. (3) Implement the algorithm to draw a composition honoring the palette and composition rules. (4) Add a regenerate button (new seed -> redraw) and controls for the exposed parameters that recompute on change. (5) Optionally a save/export. Vanilla JS, no CDN, no external assets. On a loop-back, fix only the named gaps without regressing passing criteria. write_task_note the path and passing criteria.
- Evaluatereviewer
Grade the deliverable against every acceptance criterion. All pass → finish; any fail → loop back and fix the gap.
Show working prompt
Evaluate the art piece. Open/render index.html, regenerate several times, and tweak a parameter. Check EACH criterion from notes/aesthetic-scope.md and write PASS/FAIL with a reason: does a composition render on load, does regenerate clearly change it, does the same seed reproduce the same image, do parameters affect output, is the chosen palette used (not arbitrary colors), zero console errors? If regenerate does nothing or the same seed gives different images, FAIL and loop back to build. Then route — this is the whole point of the loop: - **Every criterion PASSES →** call `advance_task_step({ ref, stepId: "evaluate", next: "finish" })`. - **Any criterion FAILS →** write the specific gaps to notes, then call `advance_task_step({ ref, stepId: "evaluate", next: "build" })` to loop back. The builder fixes exactly those gaps. Never route to `finish` while any criterion is unmet. The build phase's completion gate already blocked a grossly-incomplete deliverable; your job is the judgment an automated check cannot make (does it actually work, read well, look right). After ~3 unproductive loops, stop and report DONE_WITH_CONCERNS so the user can step in. - Finishdeveloper
All acceptance criteria met. Stamp a short summary and report DONE.
Show working prompt
Every acceptance criterion passed. Write a one-paragraph DONE summary to task notes via `write_task_note`: what was built, the deliverable path(s), and a one-line confirmation that each criterion is met. Then report DONE.
Triggers
Phrases that suggest this craftbook to a crew.
- generative art
- creative coding
- procedural art
- flow field
- canvas art
- algorithmic art
Source
View this craftbook on GitHub · MIT license