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 Louise Ng Liying

Whisper through the Seasons

Whisper through the seasons is a project about embarking on a journey into the world of winter with typography that seamlessly blends the serene beauty of snow and dynamic type generation using p5.js. Through dynamic snowfall and sound-reactive, a sense of playfulness is introduced and allowing viewers to engage with. By doing so, it creates a generative typographic experience that illuminates the creative decisions and technical details behind this unique exploration of winter through the lens of code-generated typography.

Sketches

During the five-week Type and Media , I focus on using code and p5.js to create unexpected typography outcomes. I learned about interesting concepts in coding, explored sound reactive, and experimented with different types of type animation.

I encountered challenges that that fuelled a deeper understanding of code complexity. The sketches produced during this worksop reflect my commitment to unraveling the technical aspects of scripting, showcasing a synthesis of newfound coding skills and a thoughtful approach to typographic expression.

Session 1

  • Letter N Sketch that creates a letter with shapes.
  • Letter W Sketch that creates a letter with shapes.
  • N Poster Sketch that animates a letter created with shapes.
  • W Poster Sketch that animates a letter created with shapes.

Session 2

  • KA CHA Sketch that shows how to create static text that shows one more more sounds.
  • AAAAHH Sketch that shows how to create static text that shows one more more sounds.
  • "8" Sketch that shows how to create an animation with static text and vertex points.

Session 3

  • 黄俐颖 Sketch that shows my chinese name playing with sound-reactive.

Session 4

  • Mini Project Sketch that shows an interactive application such as sound-reactive.