Inspiration
"The human spectrum" The inspiration for Unity in Diversity came from a desire to visualize a simple but profound truth: that our differences, whether in skin tone, identity, culture, looks or belief are not barriers, but rather distinct frequencies in a single, continuous human spectrum. We live in a world that often tries to categorize and divide us into rigid boxes. We wanted to build something that dissolves those boxes, transforming individual data points into a living, breathing mosaic. We wanted to create a digital monument where a "Peace" sign made of thousands of unique individuals shows that the whole is truly greater, and more beautiful, than the sum of its parts. This project is our love letter to the complexity of the human experience.
What it does
Unity in Diversity is a generative art experience that invites users to contribute their unique "frequency" to a global 3D visualization. Unique Identity Generation: When a user joins, the system assigns them a vibrant, unique hexadecimal color that belongs only to them—no two users share the same hex code. Generative Art Creation: Using the Wolfram Language's powerful image processing and procedural graphics capabilities (simulated in this demo via complex Canvas algorithms), we generate a unique, high-resolution tile for every submission. Each tile is a piece of art, featuring organic, fluid, or geometric patterns that represent the user's essence. Global Connection: The user's tile is placed onto a 3D interactive globe at their geographical location. Network of Unity: The system instantly calculates the color distance between the new user and thousands of others, drawing golden "network lines" to their nearest "color neighbors" across the world. This visualizes the hidden connections we share with strangers. Living Formations: Users can morph the entire population into symbolic shapes—a Peace sign, a Heart, a Lotus flower, or a DNA helix—showing how we can come together to form new meanings.
How we built it
We built a modern, immersive web application using a stack designed for high-performance graphics and mathematical precision. Frontend: We used React for the UI state and Three.js (via direct integration, not fiber) for the complex 3D scene graph. Wolfram Language (The Engine): This was the heart of our generative logic. We designed the tile generation algorithms conceptually around Wolfram's Graphics, ColorQuantize, and ImageEffect functions. In our architecture, the backend would use APIFunction on the Wolfram Cloud to mathematically generate the 1024px textures and—crucially—the Normal Maps. These normal maps allow the 3D tiles to react to light, giving them a tactile, "real" quality. Procedural Generation: We implemented seeded random number generators (RNG) to ensure that every pattern is deterministic based on the user's ID. We wrote custom algorithms for "Organic Flow," "Liquid Waves," and "Radial Nebulas." Shaders: We wrote custom GLSL Vertex and Fragment shaders to handle the thousands of instances. The shaders implement Fresnel rim lighting (to make tiles glow like glass) and dynamic animations (breathing/pulsing) without burdening the CPU. Mathematical Layouts: The transitions between the Globe, Heart, and Spiral layouts are pure math functions (Spherical coordinates, Parametric equations) interpolated smoothly using GSAP.
Challenges we ran into
Performance at Scale: Rendering thousands of individual textures with unique normal maps in the browser is heavy. We had to implement InstancedMesh logic (conceptually) and optimize our loop to reuse geometries. Managing the draw calls for the "connection lines" was also tricky; calculating nearest neighbors for N points is O(N^2), so we had to optimize the distance checks. The "Wolfram to Web" Pipeline: translating the high-fidelity, mathematically pure output of Wolfram functions into standard web textures that load progressively was a challenge. We had to build a system where a low-res gradient acts as a placeholder while the complex generative art is created asynchronously. Meaningful Randomness: We didn't want the tiles to look like "noise." Tuning the procedural generation algorithms to consistently produce beautiful art, regardless of the random seed, required many iterations of tweaking alpha channels, bezier control points, and color blending modes.
Accomplishments that we're proud of
The "Glow": We are incredibly proud of the visual aesthetic. The combination of the dark void, the bloom post-processing, and the custom rim-lighting shader makes the Earth look like a bioluminescent organism. It feels alive. The Connectivity: Seeing the golden lines automatically connect a user in New York to a user in Tokyo based solely on the mathematical similarity of their color was a "magic moment." It proves the hypothesis of the project: we are connected in ways we don't see. Tactile Feel: We successfully implemented Normal Mapping on generated 2D canvas textures. The tiles don't look flat; they look like little pieces of stained glass or polished stone.
What we learned
Math is Beautiful: Using math (Wolfram Language, GLSL, Trigonometry) is the best way to model organic connection. We didn't need to "fake" unity; the math of the color spectrum proved it existed. Identity is Infinite: In assigning unique colors, we realized that the hex spectrum (16 million colors) is a perfect metaphor for humanity. We are finite but vast enough that everyone can have their own unique space. Generative Art as Storyteller: We learned that generative art isn't just about pretty pictures; it's a way to tell a story about uniqueness and scale that words cannot express.
What's next for Unity in Diversity
Real-time Wolfram Integration: Fully deploying the Wolfram Cloud API to handle the generation of tens of thousands of tiles, utilizing its advanced machine learning features to perhaps generate patterns based on the meaning of the user's word, not just randomness. Physical Installations: We envision projecting this 3D globe onto physical spheres in public spaces, allowing people to "add their light" via their phones and see it appear on the monument in real-time. Data Sonification: We want to assign a musical tone to every color frequency. When you hover over the globe, it wouldn't just be a visual mosaic, but a symphony of thousands of unique hums harmonizing together.
Log in or sign up for Devpost to join the conversation.