MONNOM Web/App Development Update: June
Draw collaboratively in real-time across Web and iOS with Monnom multiplayer and art modes, featuring color match and gesture-based drawing.
Monnom extends its touchless gesture-based drawing experience into a shared, real-time creative space. Connecting web browser players (playmonnom.com) and iOS app users on the same digital canvas, the platform integrates live data synchronization and generative AI.
Design Principles: Simple, Easy, and Responsive
Simple and Easy to Use: The user interface is stripped of distractions, keeping the design clean, minimal, and highly intuitive. Both kids and adults can join lobbies and start painting instantly.
Fully Responsive Layout: The workspace adapts seamlessly from mobile phones to large desktop monitors and tablets. The lobby history panel acts as a fixed vertical sidebar on desktops and converts into a sliding drawer on mobile screens.
PWA (Progressive Web App) Support: The web platform is packaged as a PWA, allowing players to install Monnom directly to their home screens. This removes browser bar clutter and offers a native app-like full-screen experience.
Color Capture in Art Mode (Color Match)
In the artwork mode (specifically Color Match), players can use the camera and the pipette (dropper) tool to capture colors from their physical environment and paint directly with them on the canvas. This feature bridges physical reality with the digital drawing experience.
Seamless Web and iOS Cross-Play
Regardless of screen size or resolution, all players draw in a unified 1600x1200 pixels workspace. A brush stroke on an iPad is rendered instantly at the exact same coordinates and width on a desktop web browser. An interactive Minimap helps mobile players navigate the large canvas and follow other artists' strokes.
Real-Time Coordination via Firebase
Multiplayer rooms, password validation, active presence tracking, and instant stroke delivery are powered by Firebase Realtime Database (RTDB). If the host pauses the game, the canvas freezes instantly for all connected participants.
Smart Archiving with Gemini 2.5 Flash
Once the canvas reaches the drawing limit, the archive flow triggers automatically:
The client sends the final image data to a Firebase Cloud Function (generateDrawingNames).
Google's Gemini 2.5 Flash (via Vertex AI) processes the image and generates creative titles in both Turkish and English.
The image is stored in Firebase Storage, and the metadata is saved to the Firestore archive.
Admin Control and Gallery History
Through the Monnom Dashboard, administrators can manage room access, passwords, and stroke limits in real-time. They can also review, edit titles, toggle visibility, or delete archived drawings. In the game lobby, players can browse the last 50 drawings in the "Shared History" (Ortak Geรงmiล) sidebar, download them as PNGs, or share them.
These features are available both on the App Store and in your browser.
