Research Question
How can procedural design combine typographic rules with artistic freedom to create generative fonts with visual impact?
So my next step was to experiment with using circles within the grid to create a more organic look. Of course grid is still the basis for the letter struture, but letter is created from circles which can be manipulated
Approach
In this experiment, I explored the intersection of structured typography and organic movement by creating a letter system based on animated circles. The design maintains typographic legibility through a strict grid system while introducing artistic freedom through:
- Dynamic color transitions
- Organic movement and rotation
- Variable circle scaling
- Interactive parameter controls
Technical Implementation
The system is built on several key components:
- Structural Grid
- A customizable grid (10x10 by default) forms the foundational structure
- The letter's anatomy follows more or less traditional typographic proportions.
- Organic Elements
- Each point in the letter structure is represented by animated circles
- Circles pulse and rotate organically using sine waves
- Two layers of circles create depth and movement:
- Larger circles with dynamic color interpolation
- Smaller overlay circles with lighter tints
Interactive Controls
The design allows for real-time experimentation through:
- Column and row adjustment
- Circle scale modification
- SVG export functionality
Here is an example of a letter created with this system:
Later on, I expanded this demo with several new interactive features:
Shape Options
- Switch between different shapes (circles, squares, triangles)
- Each shape maintains the same animation properties
Visual Effects
Added various effects that can be applied to shapes:
Glow
- Multiple layers of shapes drawn with decreasing opacity
- Each layer slightly larger than the previous
- Creates soft, glowing appearance
Outline
- Combines stroked and filled shapes
- Outer stroke with inner fill
- Creates bold, graphic look
Pixelated
- Breaks shape into small square pixels
- Uses nested loops to create grid of rectangles
- Size of pixels can be adjusted
Wave
- Multiple copies of shape with offset positions
- Uses sine waves for organic movement
- Creates flowing, liquid effect
Neon
- Combines glow effect with bright center
- Multiple layers with color interpolation
- Creates bright, neon-like appearance
Spiral
- Rotates and scales multiple copies of shape
- Uses trigonometry for spiral placement
- Creates dynamic, spinning effect
Interactive Elements
- Mouse interaction creates a repelling force
- Shapes move away from cursor position
- Adjustable force radius and strength
- Click anywhere to create explosion effects
All these features can be controlled through sliders and buttons in the interface, allowing for real-time adjustments to create different visual outcomes.
What is next?
To be honest, at this point, I feel a bit lost with the project. I'm not fully sure what to do next. On one hand, I have so many style ideas I would like to explore, but on the other hand, I know that time-wise, it will take several more days to implement them. But honestly, at this point, I can say that I’m relatively happy with some of the experiments, so I decided that for now, I’ll do one more demo and then try to go back to my first demo in order to work on more procedural letters. It’s better to have fewer demos style-wise but more letters, because at least then I can work on the alphabet and test the letters in real situations, like designing something with them or trying to implement them as an alphabet.
vertical grid
My last attempt before returning to the first demo was to create a vertical grid. Surprisingly, this demo took me much longer than the previous ones. At first, simply defining some procedural rules for the vertical grid to generate a randomized letter didn’t work as expected. After refining some calculations and adjusting my approach, the results started to improve. The biggest change I made was mirroring the left side of the letter onto the right side of the canvas. This allowed me to keep the randomness while introducing symmetry, making the overall shape feel more cohesive.
Once that part was working, I experimented with different ways to manipulate the vertical grid structure. One challenge was maintaining enough variation to keep things interesting while avoiding shapes that felt too chaotic or disconnected. I found that slight adjustments in spacing and alignment had a huge impact on the final look. Even a small shift in one rule could create something completely new.
Another key takeaway was how symmetry affects perception. Even though the shapes were still generated randomly, the mirrored structure gave them a sense of intention, as if they had been carefully designed rather than created through a procedural process. It was an interesting balance between randomness and control.
Key Features
The code maintains the fundamental structure of letterforms through a system of line segments (Line class), ensuring readability while allowing for dynamic manipulation. This balances typographic rules with creative expression.
Dynamic Effects
Multiplication Effect
- Creates multiple instances of each line segment
- Implements dynamic rotation with varying speeds and directions
- Preserves letter recognition while adding visual complexity
Color Systems
- WHITE: Traditional typography
- RAINBOW: Dynamic color transitions
- GRADIENT: Smooth color progression across segments
Interactive Control
The interface allows real-time manipulation of visual parameters, enabling exploration of the balance between legibility and artistic expression.
Export Functionality
You can save the animation as an SVG file by pressing the spacebar. This creates a high-quality vector file that keeps all the details of the generative artwork. The file can also be opened and edited in vector design software if needed.