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 Chew Xiao Xi, Kelsey

Session 1. Letter V
Session 1. Letter P
Session 2. Static Text 1
Session 2. Static Text 2
Session 3. Buffers
Session 4. MINI PROJECT

GLITCH

Throwback to the good old days where everything glitches. We have came a long way and in today's day and age, the advancement of technology has left people spoilt with speed. Everything has to be at the speed of light and when it starts glitching, people lose patience. But what if we make glitch the new aesthetic? Take commercials for example, people hate it but they would watch if it is a good one. Just like commercials, what if glitch is the new trend, would people appreciate it?

Mini-Project Mockup
Some Image caption for Mini-Project if necessary, otherwise remove.
Some Image caption for the Mini-Project mockup if necessary, otherwise remove.

Sketches

When I code, I try not to have too much expectations of my end result instead, I find codes that I personally like and manipulate it, mixing it with the codes I have learned from class. Having a fixed outcome in my head makes it difficult for me to have fun while coding as I will feel too much pressure, stripping away the fun of experimentation for me. I struggled to understand some of the terms and codes and when they should be used but I googled and tried my best to understand them. Afterall this workshop taught me to be open and flexible to different outcomes and along the way, I started feeling more confident in coding with p5js.

Session 1

  • Letter V Sketch that shows how to use simple lines and rectangle to create letter.
  • Letter P Sketch that demonstrates how to make type move with loops and map.
  • Letter P Another sketch of the letter P

Session 2

  • Static Text 1 Animation that describes the sound "Clink".
  • Static Text 2 Using vertex points and letterforms to creates an animation with audio input after it is clicked.

Session 3

  • Buffer Sketch that experiments with buffers.
  • Buffer Sketch that experiments with buffer.

Session 4, Mini Project

  • Glitch01 Sketch that uses buffer and blendmode.
  • Glitch02 Sketch that glitches forward.
  • Glitch03 Sketch that lags like a loading graphic.
  • Glitch04 Sketch that uses transformation and movement.
  • Glitch05 Sketch uses vector and mouse to create movement.