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 Joeann Tan Yi Ru

ABOUT

Session 1 — Sketch of alphabet "G".
Session 1 — Sketch of alphabet "U".
Session 1 — Creation of alphabet "G" poster.
Session 1 — Creation of alphabet "U" poster.
Session 2 — Creation of inspired static text challenge
Session 2 — Creation of inspired static text challenge
Session 2 — Creation of inspired static text challenge
Session 2 — Creation of letterforms and vertex points.
Session 3 — Creation of 3D Buffers click here.
Session 3 — Creation of 3D Buffers click here.

MASH Experiential Center

MASH is a mechanical keyboard retail store that also serves as an experiential centre. Customers can personalise their keyboards based on touch and sound, according to their preferences. They can also try out typing games to test on the keyboard capabilities. As their experiential center focus on interactivity through human senses, a series of LED screen installations are built to give a better experience.

The interactive experience will not only stimulate the clients' senses, but also allowing them to see what the brand and typography looks like in a digital space. This can be accomplished by pushing the boundaries of the logo's typographic forms while maintaining brand identities of being fun, quirky and interactive. Through the experience, the audience will have a immersive interaction within the digital world of mechanical keyboards.

Sketches

I had no p5.js coding experience prior to this lesson. I had a lot of trouble figuring things out because there were no prompts. After viewing several tutorials and conducting additional research, I realised that the main purpose of this assignment is to be much more experimental and open to the possibilities of typographic animation through coding. I can't even figure out which line comes first and could not get what I had in mind to work. Though it was time-consuming and the learning curve was steep, I used what I had learned and did my best to make do with what I had.

Session 1

Session 2

Session 3

  • Buffers Exploration of typographic animation on 3D objects.
  • Sound Reactive Usage of mic input for typographic vertex points animation.

Session 4

  • MASH - 1 Exploration with buffers.
  • MASH - 2 Exploration with buffers.
  • MASH - 3 Using forloops for typographic animations.