code
Recreating The Past
Week 6: Images
Read
This is Art
— Art for the Ages: An Image Gallery, on Claire Hentschker’s artwork
Watch
Practice
| Original | Recreated |
|---|---|
 |
 |
- Notes
- Generator, Demo, Code (generator)
- Source: The Class of 1988 & The Class of 1967, Silver gelatin prints, Jason Salavon, 1998
- Core idea: can we construct a face from pure noise?
- Just fixating the eyes still causes problems in the nose and mouth as they blur into a blob
- Nancy Burson morphing grid requires predefined points
- Instead of Nancy Burson’s simple triangle-based warping, I used MediaPipe’s tessellation with 468 points
- I created a tool to build a reference face mesh and added backface culling to improve detection
- I needed to manually fix the holes for the eyes and mouth in the mesh
- Because facial features from pure noise can be either light or dark, they tend to cancel out, so I added a manual rule requiring dark facial features.
- Process: Face in Perlin, Face in Perlin averaging, Mesh alignment, Delaunay triangulation, Reinforcement procedural face building (failed)
- Extras: Average Emoji, Parametric average face, Webcam average face
Week 5: Pixels
Read
If there is a teleological function to art, quite likely it is to lead us back to our psychological origins, to exhaust our material illusions by forcing us to understand the reality of mythic experience, for myths are merely the mental constructs we devise for our perception of the world, having particular properties isomorphic with the physical world. Yet increasingly we sense the fragility of art, the fact that modern rationalism tends to denude it of its most precious characteristic, its “believability.”
As with Norbert Wiener’s comparison of the ancient Jewish myth of the man-made Golem with cybernetic technology, I envisioned the resolution of art and technology in the creation of life itself.
— Art and Technology: The Panacea That Failed, by Jack Burnham
Watch
Practice
| Original (video) | Recreated (static) |
|---|---|
 |
 |
- Notes
- Web, Code (generator)
- Source: Lillian Schwartz, Olympiad, 1971. Image courtesy The Henry Ford Museum.
- The human form was not easy to recreate. Given the Olympiad concept, I used 2026 Winter Olympics pictogram as starting point
- First tried extracting the skeleton as vector and dilate the vector. But as outlines merge, vector math became impossible.
- Then I switched from vector dilation to convolution matrix dilation. Also, instead of dilate with animation, I only render the final frame after N iterations
- Added coloring and fading effect to be visually interesting. Used oklch color space to ensure consistent lightness
- Future work: need to add pixelation effect
- Process: Erode/dilate matrix, Outline detection (failed), Vector dilation (bad idea), Convolution dilation, Concentric outlining, Batch render (takes about 10 seconds)
- Extras: Dance, don’t walk (live demo), Color palette tool
Week 4: Pattern
Read
Art in the academy and discourse of the academy, we are trained to find ways to speak of things that there are no words for but you know, it’s the power of colour, it’s phenomena is beyond words.
— Chromatic Symphony Interview with Odili Donald Odita
Watch
Practice
| Original | Recreated (live experience) |
|---|---|
 |
 |
- Notes
- Live, Recording, Code,
- Source: Julio Le Parc, Instability through Movement of the Spectator 1962-64
- I discovered Karl Gerstner’s work after the project, which is closer to what I did.
- Op Art creates movement without movement
- But body movement can enhance the effect and make the art participatory, as seen in the MoMA Responsive Eyes exhibition (1965)
- If we think of Op Art as the snapshot of a lens interacting with a pattern, recreating the entire lens setup might allow us to experience the full environment that inspired the artist and reveal novel snapshots that the artist might have missed
- Adding caustic effect to add realism
- Tweak of parallax effect to make it feel natural on a flat screen
- Process: Checkerboard, Basic Distortion, Interaction, Head tracking
- I ported from Canvas API to Three.js in order to use shader for more realistic rendering. However, the psychological effect of Op Art can be felt without realistic rendering.
- Extras: Pattern and Color studies, Tiling studies
Week 3: Computational Typography
Artists: Muriel Cooper, John Maeda
Read
A poem only communicates if read slowly: only then does it have time to create a state of mind in which the images can form and be transformed.
— Poems and Telegrams, by Bruno Munari
Watch
Practice
| Original | Recreated (live animation) |
|---|---|
 |
 |
- Notes
- Live, Code (JavaScript + WebAssembly)
- Source: Morisawa 6 from the Morisawa 10 series, 1996, John Maeda
- Thought about different approaches: previous assignments were done in Canvas API, a CSS-only approach would be cool as I haven’t explored its 3D capabilities before. SVG has potentials but I’ve hit perf bottleneck before so that’s risky.
- The final version used JavaScript for vectorizing font and managing animation loop. It used WebAssembly for drawing, animation, compositing, and rasterization.
- The logo type of モリサワ is not coincidental. The lines are simple, with a mixture of straight and curved strokes. Not too dense to bury the patterns.
- My first few attempts was oscillating the texts left to right. It wasn’t doing what John did.
- Key realization came from seeing John’s reprint in 2024. The bottom reveals that each character is rotated 180 degrees to the cross diagonal position.
- After finishing 2D animation, I designed a 3D animation, with additional orbit and font size variations
- Before porting the system to WebAssembly, I also tried CMYK multi-color blending, but CSS engine finally tapped out. I was getting <5 FPS. We need C++
- Process
- Extras: 3D in CSS, 3D in WASM,
Week 2: Animation and Harmony
Artist: John Whitney
Read
Art is a question of ‘you be me’… My excitement in life is to discover something that’s significant to me… and not to think, ‘Well, I wonder if so-an-so’s going to like this.’” — Len Lye, by Cecile Starr
Watch
Practice
| Original | Recreated |
|---|---|
 |
 |
- Notes
- Live demo, you can play the sound track from Strudel and share the tab with audio into the visualization app.
- Code
- Source: John Whitney, Permutations (1969)
- Divide and conquer: I separated the dancing dots from the lines. After solving them individually, I added the sound track to further animate the dots.
- The green lines:
- There are always 31 lines. They are projected from one 180-degree arc to a circle.
- The 180-degree arc’s radius oscillates, self-rotates, and orbits around the center of the screen, with its orbit radius oscillating as well.
- The endpoints on the circle are marching at a speed proportional to the dot’s index, creating the twisting effect and periodic dense-sparse rhythm.
- It takes calculation to both start and end the animation at a specific pattern using the periodicity of a sine wave.
- They appear to be a gradient between two shades of green, with out-of-phase oscillation of brightness on both sides.
- The line patterns started and ended very small. I had to hard-code the intro and outro timing.
- The dancing dots are achieved by applying the same principle as the circle where the green lines originate from, but in addition to step-ramping the rotation angle over time, I also modulated the radius with a circle, so they look like a standing wave wrapped around a circular path.
- I learned a little bit of Strudel and composed a percussion soundtrack with AI’s help.
- I added a bit of blur to create the visual effects of the old IBM CRT monitor but didn’t spend too much time making it retro. For future work, I want to emulate the 24 FPS to see what would come out of it.
- To make choreography easier, I created a scrubbable timeline tool to allow quick jump. This bridges the gap between creative coding and traditional animation technique.
- Process
- Extras: photon grammar, disco ball, dialogarithm
Week 1: Chaos and Order
Artist: Vera Molnár
Read
It may take a life-time to develop a computer program to make one new communicating pen line which is meaningful for us.
— Computer Grass is Natural Grass by Colette S. Bangert and Charles J. Bangert
Watch
Practice
| Original | Recreated |
|---|---|
 |
 |
- Notes
- Code
- Source: Vera Molnar, artist proof; Signed “V. Molnar / 73” on front, “MIKΡOKOΣMOΣ / epreuve d’artiste, c-5 II” inscribed on verso.
- Original artwork combines structure with randomness
- There appears to be a 1,2,4 column layout governing the vertical rhythm
- Perlin noise applied to the length variation as we render from top to bottom
- A lot of manual parameter tweaking until the dense-sparse-dense-empty-dense-sparse-dense rhythm felt right
- Vibe coded a tool to extract color palette from any image
