Research Question

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

Grid with possibility to draw

My next step was to enhance the grid demos. The improvements include:

• The ability to draw letters with the mouse remains unchanged.
• Animation Mode also remains unchanged, when activated, autonomously animates the grid. This feature uses noise to create a smooth, organic movement across the grid.
• I added new features for modifying filled cells. Three new buttons were introduced, allowing me to:
  • Randomize shapes between squares and circles.
  • Randomize the scale of the filled grid.
  • Randomize their rotation. Additionally, I incorporated sliders with sine values to distort the grid in a wavy manner.

The Role of Patterns in My Project

At this point in my project, I realized that I wanted to create posters, and I saw an opportunity to generate patterns that could serve as unique backgrounds. These patterns not only enhance the visual appeal of the posters but also align with my research question: How can procedural design combine typographic rules with artistic freedom to create generative fonts with visual impact? By integrating patterns, I can maintain the structural integrity required by typography while infusing each design with a distinct artistic character. This approach allows me to explore the creative potential of procedural design, using patterns to add depth and individuality to my work. The patterns serve as a dynamic backdrop, complementing the generative fonts and contributing to the overall visual impact of the posters. I just did some first iterations of the posters, which you can see below.

new letters on the grid

Building on the previous demo, I expanded the grid to include a variety of letters beyond just "A". Now, the grid can generate letters such as D, E, F, I, J, M, N, O, P, and V. Each letter is drawn with randomized parameters, adding a unique touch to every rendering.

Key Features of the Demo:

• Randomized Letter Generation: Each letter is created with random variations in its structure. This includes differences in line thickness, position, and shape, ensuring that no two letters are exactly alike.
• Interactive Controls: The demo includes sliders to adjust the number of columns and rows in the grid, allowing for flexible customization of the canvas size. Additionally, a slider for "Fill Probability" lets you control the density of the letter's fill.
• SVG Export: A "Save SVG" button enables to export creations as SVG files. This feature is particularly useful for preserving high-quality, scalable versions of designs, which can be used in various digital and print projects.

next steps

I created couple of demos which base on grid system, and thats why I wanted to combine them in one project.