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 Jocelyn

About

Session 1.
Using basic shapes and functions to create the alphabet "J".
Session 1.
Using basic shapes and functions to create the alphabet "G".
Session 2 Exercise 2. Swiss design inspired.
Session 2. Swiss design inspired.
Session 2 Exercise 2. Swiss design inspired.
Session 2 Exercise 2. Swiss design inspired.
Session 2 Exercise 3. TexttoPoints.
Session 2 Exercise 3. TexttoPoints.
Session 2 Exercise 3. TexttoPoints.
Session 2 Exercise 3. TexttoPoints.
Session 2 Exercise 3. TexttoPoints.
Session 2 Exercise 3. TexttoPoints.
Session 2 Exercise 3. TexttoPoints.
Session 3. Using point clouds with text as the points instead of shapes.
Link to an external p5js sketch, click here.
Session 3. Buffer.
Session 3. Buffer.
Session 4. AlgoNature Mini-Project. Point-Clouds.

Plakat:
The Betta Fish.

Given the AlgoNature project brief, my focus was on crafting visuals influenced by the traits and motions of a Betta Fish, known as Plakat in its native Thailand.

Utilising details about the fish and incorporating images, I employed p5.js techniques learned in this workshop and foundational codes from year 1 to produce diverse outcomes.

These include representations of the fish in its habitat and kinetic type reflecting the distinctive features and movements of the Betta Fish.

Betta Fish Buffer Tiles.
Buffer Tiles Scales, Letter "O".
Mock-up sign.
TexttoPoints with the text "bloop".
Plakat Buffer Tiles banner Mock-up in a subway station.
Betta Fish Buffer Tiles Mock-up at Wilkie Edge.

Sketches

At the outset of the workshop, I approached coding with specific visions and designs in mind. However, I soon realised that this approach limited my learning and exploration with p5.js, particularly in the initial session.

Subsequently, I shifted to coding with more intuitive feelings. I modified existing codes from slides and online resources using knowledge gained from lessons and guidance from classmates. Additionally, I sought assistance from ChatGPT for specific edits to achieve the visual movement I envisioned.






Encountering difficulties with p5.js, given my unfamiliarity with its functions and laggy code performance on my laptop, made the process less enjoyable. As a result, I had to focus on creating visuals based on the desired movements rather than the overall aesthetics, often relying on luck.

Despite these challenges, I found the workshop enjoyable. I am pleased with the outcomes, especially when assembling them on the web. Experimentation allowed me to create unique visuals, and the occasional happy accidents added to the experience. This process, different from traditional design, enabled me to command the computer to bring my visions to life.

Session 1

Session 2

  • Sour 2.1 Sketch that shows how to loadFont and blendMode.
  • Sour 2.2 Another Sketch with a different blendMode.
  • Sour 3.1 Sketch using TexttoPoints.

Session 3

  • October Sketch that shows how to use buffer and random function.
  • October 2 Another Sketch using buffer.
  • Pumpkin Brains Sketch using point clouds and text.

Session 4

Plakat Tiles in rotation.