Lucknow Lattice Type Generator
ROLE: UX Research, Information Visualisation
Journey Mapping , Generative Coding
Prototyping, Design System
Journey Mapping , Generative Coding
Prototyping, Design System
Lucknow is an old city with centuries of culture and three spoken languages—Hindi, Urdu, English. I'm from there, I live in New York now, and this project lives in that gap.
Lucknow Lattice is a generative sub-identity system that maps four architectural eras—Nawabi, Indo-Grecian, Colonial, Contemporary—into geometric motifs. A binary grid samples text pixel by pixel while density sliders control how patterns distribute across cells, mirroring how styles cluster across neighborhoods. Old Lucknow runs heavy with Mughal geometry; cross the Gomti and it shifts. A fun tool for signages, posters, and postcards—representing architectural density that stays dynamic as time goes by.
Lucknow Lattice is a generative sub-identity system that maps four architectural eras—Nawabi, Indo-Grecian, Colonial, Contemporary—into geometric motifs. A binary grid samples text pixel by pixel while density sliders control how patterns distribute across cells, mirroring how styles cluster across neighborhoods. Old Lucknow runs heavy with Mughal geometry; cross the Gomti and it shifts. A fun tool for signages, posters, and postcards—representing architectural density that stays dynamic as time goes by.
Problem
CONTEXT
In the digital age, we consume art rapidly—often taking photos instead of truly engaging. Museums are overwhelming, and people often leave without retaining meaningful impressions. There's no simple way to reflect on one’s experience after leaving the space.
In the past, engaging with art and culture in conservation spaces was a more intimate and immersive endeavor. Visitors would spend extended periods of time contemplating and absorbing the nuances of each artwork. It was a slower, more contemplative approach, allowing individuals to form their own unique connections with the art.
In the digital age, we consume art rapidly—often taking photos instead of truly engaging. Museums are overwhelming, and people often leave without retaining meaningful impressions. There's no simple way to reflect on one’s experience after leaving the space.
In the past, engaging with art and culture in conservation spaces was a more intimate and immersive endeavor. Visitors would spend extended periods of time contemplating and absorbing the nuances of each artwork. It was a slower, more contemplative approach, allowing individuals to form their own unique connections with the art.
Research & Testing
I identified four architectural eras, each with a distinct geometric motif:
Nawabi/Mughal — Diamond jali lattice from the Bara Imambara and Rumi Darwaza. The interplay of solid and void.
Indo-Grecian — Four-petal floral motif from La Martiniere and Kaiserbagh. A fusion of European and Indian aesthetics.
Colonial British — Eight-pointed star from Victorian-era ironwork. Measured geometry imposed on an organic city.
Contemporary — Complex floral star representing modern synthesis. Heritage referenced through new forms.
These patterns map to actual neighborhoods: Old Lucknow is dense with Nawabi geometry. Cross the Gomti River and Contemporary forms dominate.
Nawabi/Mughal — Diamond jali lattice from the Bara Imambara and Rumi Darwaza. The interplay of solid and void.
Indo-Grecian — Four-petal floral motif from La Martiniere and Kaiserbagh. A fusion of European and Indian aesthetics.
Colonial British — Eight-pointed star from Victorian-era ironwork. Measured geometry imposed on an organic city.
Contemporary — Complex floral star representing modern synthesis. Heritage referenced through new forms.
These patterns map to actual neighborhoods: Old Lucknow is dense with Nawabi geometry. Cross the Gomti River and Contemporary forms dominate.
Prototyping
The tool is a single HTML file—no server, fully portable.
Text Pipeline: User types → text renders to hidden canvas → pixels sampled for brightness → binary grid created → pattern fill applied
Pattern System: SVG templates with color placeholders. Patterns selected probabilistically based on slider weights. Colors swap instantly without regenerating geometry.
Grid Rendering: CSS Grid with 8,000+ cells. Each cell gets a pattern as a background image. Animation swaps background patterns every 200ms.
Export: Direct canvas rendering with pattern caching. Completes in 2-3 seconds.
Text Pipeline: User types → text renders to hidden canvas → pixels sampled for brightness → binary grid created → pattern fill applied
Pattern System: SVG templates with color placeholders. Patterns selected probabilistically based on slider weights. Colors swap instantly without regenerating geometry.
Grid Rendering: CSS Grid with 8,000+ cells. Each cell gets a pattern as a background image. Animation swaps background patterns every 200ms.
Export: Direct canvas rendering with pattern caching. Completes in 2-3 seconds.
Scoping the Product
The core insight was that a city's visual identity should be generative, not fixed. The same underlying system should be able to produce outputs that feel like Chowk (heavy Nawabi influence), outputs that feel like Hazratganj (Indo-Grecian dominance), and outputs that feel like Gomti Nagar (contemporary with traces of heritage). The identity isn't one look—it's a range of looks produced by one system.![]()
ints and emotions.
ints and emotions.
