RCWeb Graffiti App

The RCWeb Graffiti App (app/graffiti) is the display engine for a collaborative, asymmetric spray-paint experience. Operating on the Asymmetric Pattern, it turns a primary shared screen into a blank wall where multiple users can paint simultaneously from phones, either by dragging directly or by aiming with their handset orientation sensors.

Icon

Screenshot

What it does

• Spray Paint Wall: Acts as a full-screen digital wall that renders incoming paint as soft spray clouds and speckled droplets instead of simple straight pen strokes.
• Easy Drop-in Access: Generates a standard QR Code routing users securely to the graffiti-control app. Scanning the code connects their phone instantly to the canvas.
• Dynamic Resolution Scaling: As the browser window resizes, the canvas preserves drawn pixel data transparently by storing it via ctx.getImageData() and restoring it dynamically, preventing strokes from being erased during orientation changes.
• Proportional Tracking: Constantly broadcasts its actual aspect ratio (broadcastSize) down to connected smartphones so that the drawing surfaces geometrically match, preventing warped strokes.
• Remote Aim Feedback: Displays a colored live crosshair on the main wall showing where each motion-enabled controller is currently pointing, making phone-based spraying visible before the user presses down.

How it works

The system is a highly simplified rendering engine running entirely within an HTML5 <canvas> context, governed by script.js.

• Asymmetric Graphic Execution: It exposes public viewer APIs such as drawLine, clearCanvas, and setAimCursor. It performs no input capture locally and relies entirely on RCWeb remote function calls from connected controller devices.
• Mathematical Paint Scaling: When the graffiti-control app fires graffiti.drawLine(player, startX, startY, endX, endY, color), the coordinates supplied are floating-point percentages (0.0 to 1.0) rather than hard pixels. The script multiplies these values by the local width and height, completely decoupling coordinate mapping across drastically different screen sizes.
• Layered Spray Rendering: Rather than stroking a single vector line, the viewer stamps many translucent droplets and radial mist gradients along the transmitted path, creating a much closer approximation of aerosol paint in the selected color.
• Motion Cursor Presence: Motion-enabled controllers also call graffiti.setAimCursor(...), which positions a transient colored crosshair overlay over the canvas so the audience can see where the phone is aimed before and during spraying.

Launch RCWeb App