Research Question

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

Idea

I began exploring grids to draw letters and export them as SVGs. This evolved into adding controls and symmetry for more creative and abstract patterns.

Features

Grid Controls

• Rows & Columns: Sliders for dynamic grid resizing.
• Reset Grid: Clear everything and start fresh.

Modes

• Draw/Erase: Paint or clear cells.
• Symmetry: Reflect shapes horizontally, vertically, or radially.
• Animation: Automatically generate evolving patterns using noise, respecting symmetry settings.

Results

• Customizable grid sizes for diverse patterns.
• Symmetry modes to create mirrored or radial designs.
• Animation for autonomous, dynamic visuals.

Demo 03: Grid Typography

2nd itteration

This iteration focuses on creating a procedural letter "A" generator that uses a grid-based system to produce two variations of the letter: geometric "A" and spiky "A." It also has sliders to control the grid size and buttons to generate and export the "A" as an SVG file.

Features and Functionality

Grid System

• Dynamically generated grid based on cols (columns) and rows (rows) values set by sliders.
• Each cell's dimensions (cellWidth and cellHeight) are calculated based on the canvas size and grid dimensions.
• Grid represented by boolean[][] grid, where true values correspond to active cells filled with the letter's color.

Procedural Letter "A" Variants

1. Geometric "A"

• Symmetry: Straight, clean lines with evenly spaced legs.
• Randomization:
  • Random gaps in the top and middle bars for variety.
  • Leg width and positioning vary slightly with each generation.

2. Spiky "A"

• Organic Design: Legs radiate from a single apex (top point of the "A").
• Features:
  • Apex: A single central point at the top.
  • Diagonal Legs: Legs diverge diagonally from the apex, creating a spiky look.
  • Crossbar: A horizontal crossbar connects the legs at a random vertical position.
• Randomization:
  • Small horizontal shifts in the legs add imperfections and natural variation.
  • Crossbar thickness and position are randomly determined.

Controls

Grid Sliders:

• Columns Slider: Adjusts the number of grid columns (cols).
• Rows Slider: Adjusts the number of grid rows (rows).
• Changes in sliders dynamically resize the grid.

Buttons:

• "Generate A" Button:
  • Randomly selects between geometric and spiky "A" variants.
  • Replaces the current grid with a new letter design.
• "Save SVG" Button:
  • Exports the current letter design as an SVG file (output_A.svg).
  • Includes grid cell colors and the background color in the SVG.

Randomized Details

• Randomization adds unique patterns to each letter:
  • Gaps in crossbars.
  • Slight displacements in legs.
  • Variability in the height and thickness of bars.

Missing Grid Cells

Some grid cells may appear missing due to:

• Random gaps intentionally added in crossbars or legs for stylistic purposes.
• Random displacement in the spiky "A" legs creates uneven coverage, resulting in gaps.

Demo 04: Grid Typography

3rd itteration

Building on the previous foundation, I added a distortion feature to explore how much randomness can be introduced before the letter "A" becomes unrecognizable. The distortion function shifts the placement of filled cells, adding unpredictability and organic variation to the grid design.

This iteration focuses on the balance between structure and chaos, providing a way to observe how visual recognition changes as randomness increases in both cell placement and density.

Demo 05: Grid Typography

4th Iteration

In this iteration, I introduced a new feature to explore the impact of shapes and distortions on the visual output of the letter "A." Instead of using simple grid cells, I replaced them with circles, adding variability in their sizes to create more organic and visually interesting designs. Additionally, a distortion feature was implemented to test how much randomness could be introduced before the letter "A" becomes unrecognizable.

Circle-Based Grid

• Shape Replacement: Grid cells are now represented by circles, each with a randomized size for added variation.
• Dynamic Sizes: Circle sizes are generated randomly for every grid cell within a defined range, making each letter design unique.

Distortion

• Random Displacement: A distortion function shifts the placement of filled cells randomly within a small range, creating unpredictable and organic designs.
• Dual Effect: The distortion feature not only introduces randomness but also adds complexity to the grid by duplicating some filled cells with a certain probability.

Below is an example of the distorted circle-based grid for the letter "A".