The term generative can refer to a process that is executed computationally. Based on a set of rules and parametric changes, outputs are generated iteratively. Outputs here can be of many types and origins.

In this workshop we have focus on typography as an output informed and transformed by code and change over time.

How can we build systems in code to create generative type? Through a series of exercises exploring the generative, dynamic and playful potential of type, we have created a series of digital outputs presented in this online showcase.

Generative Type Explorations

by Sin Kai Siang

Session 1. Letter H with rotating ellipses.
Session 1. Letter H with rotating strokes.
Session 1. Letter M with moving rectangles.
Session 1. Letter M with moving vertexes.
Session 2. The juxtaposition of Raoul Hausmann's avant-garde script and poetry from the Dada movement in 1918 with Taoism Compassionate Mantra.
Session 2. Inpired by the animated type by Studio Dumbar with my own interpretation.
Session 2. (Opera) The movement was generated by the sound of Chinese Opera.
Session 2. (Mountain) The movement generated by sound resembles the formation of mountains.
Session 3. My first experimentation with buffers, how I transformed it into a ribbon. click here.
Session 3. (Sound) A further exploration with sound-reactive Text to Point visuals.
Session 3. (Moth To The Flame) A further exploration with buffers and colours.
Session 3. (S) An exploration into buffer layering and Text To Point Letters.
Session 3. (Sky) An exploration into buffer layering and Text To Point Letters.
Session 4. (FengShui) This was created with 3D cylinders while exploring buffers. It aims to resembles the rotating LED signages.

AlgoNature: FengShui

AlgoNature: Fengshui is a generative typography concept that combines coding algorithm and nature elements. This mini project delves into the fascinating intersections of traditional Fengshui symbols and ideas with the precision of code algorithms. It goes beyond the pictographic elements by using Chinese characters, where the shape of the character vaguely resembles the element it represented. This exploration aims to generate an audio-visual generative type using sounds. Integrating these sounds into the code algorithms results in a harmonious blend of dynamism and motion, where the characters reflect the deep-rooted connections between humans and their surroundings. It also questions how we can make traditional Chinese characters interesting, and how different character variations are generated by sound.

Digital collateral of exhibition posters on the LED screens of Ten Square along Short Street.
(Wind) Inspired by Chinese calligraphy, this sound-reactive sketch creates the movements that resembles wind motion.
(Anxiety) Through the use of buffers and sound, the typeform aims to create the feeling of panic through the shivering motion.
(Water) I wanted to play around with the sound and threshold in this Text To Point sketch to achieve the effect of water in motion.
(Feeling) I experimented with both the type vector and code algorithm in both Text To Particles and sound.
(Burn And Dream) An exploration into how one visual can have two meanings with my experimentation of tile morphing in buffers.
(Rain) Using sound-reactive Text To Point sketch to create the motion of falling rain.
Digital collateral as exhibition posters on the LED billboard panel.

Sketches

I like to keep things simple when I start working on code during each session and exercise. I take it step by step, going at a pace that allows me to understand the code and make adjustments based on what I want to achieve. As I gain confidence and see desired outcomes, I start injecting my own ideas and experimenting with different versions. My inspiration often comes from my surroundings—the things I see and hear, captured through various audio and visual methods.

Of course, there were some challenges, especially in session 3 when I had to deal with buffers and tiles. I had to reach out to Andreas for consultation, and there was a bit of trial and error to figure out the code. However, the key to overcoming these challenges was going back to square one and gradually making small changes by analyzing different parts of the code.

Session 1

  • Letter H Sketch that shows the rotating ellipses in the typeform.
  • Letter H A sketch that shows the rotating strokeweights in the typeform.
  • Letter M A sketch that shows the movements of the vertices.

Session 2

  • Mantra Sketch that demonstrates the use of interpolation in the rotating characters.
  • Karma A sketch that demonstrates the scale movement of the characters.
  • Mountain A sketch that demonstrates the use of sound that generates the motion of the typeform.

Session 3

  • Sound A sketch that demonstrates the use of sound that generate the motion of the typeform.
  • Moth To The Flame A further exploration with buffers and colours.

Mini Project

  • The Study Of FengShui Sketch that demostrates the use of buffers and 3D shapes.
  • Wind Inspired by Chinese calligraphy, this sound-reactive sketch creates the movements that resembles wind motion.
  • Anxiety Through the use of buffers and sound, it aims to create the feeling of panic through the shivering motion.
  • Water An experimentation with sound and Text To Point to create the motion of water.
  • Feeling An experimentation with type vector and code algorithm of both Text To Particles and Sound.
  • Burn And Dream An exploration into how one visual can have two meanings with my experimentation of tile morphing in buffers and sound.
An audio-visual exhibition mock up.