Interaction - Bachelor
Grid.js is a p5.js generative visual system featuring variable grids, fonts, and images. It applies design principles to arrange elements autonomously. The unique interface allows users to manipulate layouts, colors, and typography using intuitive hand and finger gestures. It aims to educate on design while creating fully generative ad campaign
This project is not a data table; it is an exploration of generative design principles, built to be a responsive and educational tool for visual art.Grid.js is a generative visual system created using the p5.js library. Its primary goal is two-foldEducate users on the fundamental principles of visual design (like grid structure, hierarchy, and balance) through interactive experimentation.Demonstrate the power of generative art by being a flexible tool capable of producing fully formed, high-quality visual assets, including entire generative ad campaigns.
Template tools only offer variations within a fixed structure. Grid.js offers infinite, governed uniqueness. The system’s rules are the brand guidelines, and the output is limitless. This means you can run campaigns that require millions of personalized assets without ever needing human intervention for layout, guaranteeing maximum consistency and minimum production time.
Absolutely. The foundational code for interpreting hand and finger gestures is highly flexible. It can be adapted for immersive experiences like interactive museum exhibits, retail window displays, or even used as a unique, low-cost user input for digital installations where touchscreens are impractical.
Beyond basic images and fonts, the system can integrate data visualization by linking real-time metrics (e.g., stock price, environmental data, social media sentiment) to the layout’s dynamic properties (color, density, motion). This transforms static advertising into live, data-driven brand narratives.
Unlike manual design where consistency can erode at scale, Grid.js guarantees it. We define your brand’s fundamental DNA (approved logos, typography families, and color palettes) as algorithmic constraints. The system can generate infinite outputs, but every single one will adhere to your core identity rules, ensuring maximum visual impact with zero risk of “off-brand” execution.
Grid.js is not a static CSS framework. It is a generative engine that uses the grid as an intelligent rule set, not a box. The system actively applies design principles (like the golden ratio) to recompose elements instantly, allowing the layout itself to be a dynamic part of the brand identity, resulting in aesthetically superior and non-repeating layouts.
I’m an experimental visual communication and interaction designer exploring the intersection of digital media, motion, and code. My work blends graphic design, creative coding, and sensory experience to create engaging, multi-media environments that challenge how people perceive and interact with information.