code

Recreating The Past

Week 9: Final Project - Manfred Mohr - Rational Aesthetics

Manfred Mohr and Estarose Wolfson look at the Benson plotter in the Centre de Calcul de la Météorologie Nationale, 1971 / © Manfred Mohr

Watch

“I always refer to music so my first computer drawings were linear, left to right, like writing”

“Why couldn’t I invent something which encompasses everything? I looked for a graphical instrument and the cube came into my mind”

“I gained an alphabet [of the cube] which was the beginning of my whole new life”

“When I did cutting the cube, I wanted to destroy the cube, not the cube itself the structure, but the symmetry [of the cube].”

“If you look at an art piece, […], my homework has nothing to do with what the viewer has to see, […], I show a result and this result is the confrontation to the viewer, but he can do with it what he wants”

— The Art of Generative Thinking, 2021

Read

“My art [before computer] was getting more systematic, more geometric, but it was not rational. […] I finally understood that I had to write algorithms and programs […] to create a rational construct.”

“The idea of my work is based on inventing an algorithm.”

“Inventing a logic would represent my artistic ideas.”

“The cube became my instrument, and I started “playing” with it as I would do with a musical instrument.”

“In music you have twelve half-tones, but you don’t play them all together.”

“I don’t come from a visual approach; I come from a logical approach.”

“An artist always has to find his tools or invent them.”

“[Randomness] gives solutions one can’t think of.”

“I dream of an electronic ink […] you can paint on the wall and it becomes a digital screen.”

— Interview with Manfred Mohr, 2016 and 2017, by Francesca Franco

Practice

“My initial alphabet was the twelve lines of the cube”
– Manfred Mohr

Original	Recreated

The system allows the user to interactively enter a message into the grid, using either mouse or keyboard. Upon reload, the grid animates into the desired state.

• Live app, Full alphabet, Recorded demo
• Source: P-197 J, 1979, Manfred Mohr
• Process:
  1. Cube
  2. Random edge
  3. Pair and cut
  4. Grid
  5. Alphabet test
• To help design the display logic for each alphanumeric character, I created a Type foundry tool that allows me to interactively rotate a cube and toggle the edges for the desired effect.
• The rotation requires an additional turn to generate enough visual complexity
• The thickened edges were interpolated from state to state

Timeline

• 1938, Born in Pforzheim, Germany, Jeweler family.
• High school, hacking with radio technology and play saxophone in public
• 1957, training at Pforzheim School of Art and Crafts, goldsmith
• 1961, Influenced by Max Bense, The Programming of Beauty
• 1962, Tour with the band Rocky Volcano, painting merging with music score
• 1962, Moved to Paris, resistor and capacitor symbols start to appear
• 1963, K.R.H. Sonderborg
• 1966, Pierre Barbaud, Initiation A La Composition Musicale Automatique, Introduction to Automated Musical Composition
• 1969, First drawing on Computer at Centre Universitaire Expérimental de Vincennes
• 1970, Worked with Control Data 6400 Computer and Benson plotter
• 1973, Developed a visual language involving cubes
• 1981, Moved to New York

Technique

I started by learning Fortran, and I still write in Fortran – Manfred Mohr, 2017

Benson Plotter in der Centre de Calcul de la Météorologie Nationale, 1971 / © Manfred Mohr

Punching hollerith computer cards

Influenced by

Art	Notes
	1950s, live jazz player
	1961, Max Bense, Information Aesthetics, The Programming of Beauty. Gained rationalism. With focus on deconstructed, mathematical and numerical analysis of visual art
	1963, Manfred Mohr, Hommage a K. R. H. Sonderborg #3, (abstract expressionism was not the future)
	1967, Pierre Barbaud, Computer Music composer. Gained insight on programmability and procedural composition
	1977, K.R.H Sonderborg, untitled, abstract but process revealing
	1967, Manfred Mohr, 777 MHz, inspired by radio technology
	1967, Manfred Mohr, Bild-1967 Zeichnung A

Cube origins

Art	Notes
	1973-1974, Cubic Limit
	1975, Cube combinatorial studies
	1973, P-154c1, Plotter Edges of Geometric Objects used as an Alphabet
	1975-1978, P-188, Cubic Limit, linear transform from one shape to another
	1984/1994, Divisibility II, 4-cut, shaped canvases

Week 8: Glitch

Watch

• Glitch with Rutt Etra, Slit scan, image history

Read

Let us look at machine aesthetics as formed by functionality and dysfunctionality, and then proceed to the concept of glitches as computing’s aesthetic core, as marks of (dys)functions, (re)actions and (e)motions that are worked out in human-computer assemblages.

Functional elements are later used as nonfunctional design elements that are appreciated Glitch 113 as “beautiful” by users not least due to the cultural memory of their origin

Error sets free the irrational potential and works out the fundamental concepts and forces that bind people and machines. An error [is] a sign of the absence of an ideal functionality, whether it be understood in the technical, social or economic sense.

– Olga Goriunova and Alexei Shulgin, Glitch from Software Studies, edited by Matthew Fuller

Practice

Original	Recreated

• Notes
  • Recorded demo, Studio
  • Source
    • Alvaro Cassinelli, Masatoshi Ishikawa, KHRONOS PROJECTOR (2004)
• The possibility of realizing a tangible time machine almost brought me to tears. I had to make one as soon as I saw the KHRONOS PROJECTOR.
• Instead of using an existing time-lapse, I want to use real-time footage from a webcam.
• Can I bring Etienne-Jules Marey’s chrono-sculpture technique?
• I tried slit scan, but it is directional and requires choreography. What if we isolate the body from the scene using the technique from the previous week?
• Process: Hand tracking, Palm orientation, Manual rewind, Slit scan (not interesting), Body separation, Body trace

Week 7: Body

Watch

• Text rain
• Motion capture data
• Background subtraction, thresholding, coutour, body motion

Read

Is it art to create a new art form?

— Dinner with Myron Or: Rereading Artificial Reality 2: Reflections on Interface and Art by Andy Cameron

Practice

Original	Recreated

• Notes
  • Film studio, Debugger, Scripted choreography
  • Sources
    • Myron Krueger, Videoplace, 1970s
    • Romy Achituv & Camille Utterback, Text Rain, 1999
    • Bad Apple!!, 2007-2009
  • Background subtraction requires pure wall color and static camera exposure config
  • In the Web API, we don’t have raw access to camera input. Auto exposure messes up background subtraction
  • Switched to ML-based CV in MediaPipe for a more robust result with similar latency
  • Added the apple fall using matter.js (the Text Rain technique can’t do bouncing)
  • Added symmetry and color inversion
  • Used a state machine to recreate the Bad Apple!! demoscene: each scene has a transition condition and a unique visual effect
  • Manually cut the soundtrack to fit the video length
  • Process: Background, Threshold, Contour, Mediapipe POC, Physics, Symmetry study, Pose 3D (failed), Pose 2D

Week 6: Images

Read

This is Art

— Art for the Ages: An Image Gallery, on Claire Hentschker’s artwork

Watch

• Averaging, face detection

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

• Pixel manipulation, convolution matrix

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

• Tutorial on patterning, loop, modulus, non-linearity

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

• Tutorial on typography

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
    • CSS 3D proof of concept, CSS particle system, CSS Variable Font, Choreography, Spin (failed), Graphics engine from scratch, TTF font analyzer
  • 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

• Tutorial on trigonometry

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
    • Lines: motion study, orbit study, integration (failed), oscillation study, motion decoded!, choreography study
    • Dots: motion study, harmonic progression study, oscillation along circumference (failed), rose petals (failed), modulate radius
  • 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

• Tutorial on noise

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

Extra

• Hi(gh) Square

This site is open source. Improve this page.