Visual studyV03 / 2026
AI-generated animation
Paper Garden
Flowers and motion, generated entirely from code.
Wake
Technical study / AI & Canvas 2D / 2026
Stories in ink.
AI wrote the code for these two animations, including every shape, texture and movement. The browser draws the frames. This study examines how that works without pre-existing illustrations or video clips.
The two animations
Visual studyV04 / 2026
AI-generated animation
Milky Way
Planets and stars, generated entirely from code.
The ring road
Paper Garden: 20 seconds. Milky Way: 24 seconds. Use the timeline to inspect any frame.
The technique
AI writes a drawing program.
The technique is procedural animation: code describes shapes and movement as rules. An AI coding agent generated TypeScript that draws with the browser's Canvas 2D API. Paper grain, flowers and stars are all generated this way. Playback runs without an AI model.
I supplied the themes and feedback: a paper garden and a journey from the solar system to the Milky Way. The agent generated the drawing and motion logic, inspected the result in the browser and revised the code. The animations took several iterations.
01 / Brief
Define the subjects, visual rules and sequence.
02 / Generation
AI generates the drawing and animation code.
03 / Rendering
The browser renders specific points in time as frames.
04 / Review
Inspect frames and transitions, then revise the code.
Without pre-existing assets
The print texture is code too.
Shapes from paths
Leaves and petals are Bézier curves; planets are circles and ellipses. The code repeats, rotates and scales these shapes. One petal can form a whole flower, while small parameter changes create different plants.
Paper from random values
24,000 small flecks form the paper grain. A fixed seed reproduces the same random values. The texture is drawn once and reused, keeping the paper still while the subjects move.
Ink from dot patterns
Repeating dot patterns fill selected shapes. Multiply blending darkens overlapping colours, and a slightly offset outline suggests imperfect registration. This simple combination creates the riso look here.
Motion and consistency
Every frame can be reproduced.
The render(t) function draws the image at a given time. Stem height, petal opening and camera scale depend on that time. Seeking to 7.5 seconds reproduces the same frame in the same renderer, even after visiting 12 seconds. Earlier frames do not need to play first.
const scene = createStoryScene(canvas, "garden")
scene.render(7.5)
scene.render(12)
scene.render(7.5)This makes pausing, scrubbing and inspecting specific frames possible. Repeatability comes from the time calculations and fixed random values. In the browser checks, both stories produced identical pixels when the same time was revisited.
Findings from the experiment
What the iterations revealed.
The concept needs specific direction. The first version stayed with the reference's dot-and-ripple motif. Choosing a garden and a space journey led to different scenes and motion sequences. A new palette alone would not have specified that change.
Working code can still do unnecessary drawing. The galaxy already consisted of 12,000 fixed stars, but initially redrew them every frame. A separate canvas now stores the rendered galaxy; subsequent frames change its position, rotation and scale.
These results suggest the technique fits stylised subjects built from repeatable shapes. Colour and timing can be edited directly in code. Depth here comes from 2D transforms, with freely composed sizes and distances. Physically accurate orbits would require a different motion model.