Research Question

How can procedural design combine typographic rules with artistic freedom to create generative fonts with visual impact?

Redefinied approach

Generative typography opens up infinite creative possibilities, combining precise design rules with randomness that gives each shape a unique character. In my second demo, I focused on further developing the letter "A" by introducing new interactive features and enhancing its visual elements. This time, my goal was to expand the ways users can manipulate the shape

What I Achieved in Demo 02

In this demo, I introduced additional functionality and refined the interactivity of the generative letter "A." Here’s what I focused on:

• Interactive Controls

  • Implemented sliders and toggles to adjust deformation, segmentation, and visual elements like line dashes and gaps.
  • Provided users with more flexibility to dynamically shape the letter.

• Visibility Toggles

  • Added a toggle to show or hide the draggable control circles, enabling a cleaner design view when needed.

• Gradient and Animation Enhancements

  • Refined dashed outlines with gradient colors.
  • Added an optional "marching ants" animation to make the design feel more dynamic.

• Structural Flexibility

  • Maintained procedural dynamics in the letter's construction.
  • Ensured that generated "A"s could range from balanced and structured to chaotic and experimental, depending on settings.

• Export Functionality

  • Enabled saving designs as SVG files for further refinement or use in external tools.

  1st itteration

  I aimed to replicate the feeling of sketching freely in a notebook while introducing controlled deformation to the letterform. To achieve this, I used a combination of randomized offsets and segment-based interpolation. By dividing each edge into smaller segments, I applied random offsets to the points, creating dynamic, hand-drawn-like curves. This method allowed me to introduce organic distortions to the structured geometry of the letter, giving it a playful and experimental aesthetic.

2nd itteration

In the second iteration, I introduced sliders to give more control over the letter's appearance. This allowed me to fine-tune elements like the deformation intensity, segmentation, and line thickness—bringing order to the playful chaos. But the real fun came with adding an animation that I can only describe as either marching ants or colorful sprinkles on a cake. This little detail transformed the design process into something more interactive and fun, where experimentation feels alive and constantly in motion.

Demo 02: Generative Typography Exploration

Animation and Distortion in My Code

This sketch is all about generative typography—specifically, creating and customizing a procedural letter "A" with interactive controls, distortion, and animation. Here's how it works:

Key Features

1. Procedural Letter Construction

The "A" is built using rules:

• Apex: One or two randomized top points.
• Legs: Diagonal lines connecting the apex to the baseline.
• Crossbar: A horizontal line somewhere in the letter's height.
• Inner Triangle: A cut-out shape forming the "hole."
  The positions are random but constrained, so it stays balanced.

2. Distortion

• Deformed Edges: The edges of the "A" are distorted by adding random offsets to their segments.
• How it Works:
  • Each edge is split into multiple parts (segments).
  • The deformationAmount slider controls how much randomness is added.
• Effect: A wobbly, hand-drawn look.
• Customization: You can adjust distortion in real-time using the slider.

3. Dynamic Animation

• Marching Ants Effect: Dashes move along the edges, creating an animated outline.
• How it Works:
  • Dashes are drawn in sequence along each edge.
  • The dashOffset variable shifts the starting point to make it move.
• Controls:
  • Toggle the animation on/off with animateOutline.
  • Adjust dash length and gaps using sliders.
• Visuals: Gradient colors make the animation playful, like sprinkles on a cake!

4. Interactivity

• Sliders and Toggles: Adjust distortion, dash properties, and visibility of control points.
• Draggable Points: Move key parts (apex, legs, crossbar) to reshape the letter.
• Real-Time Feedback: Every change updates instantly on the canvas.

5. SVG Export

Press S to export your creation as an SVG file. Use it in vector editors or font software for further tweaks.