# RCWeb Graffiti Control App

The **RCWeb Graffiti Control App** (`app/graffiti-c`) is the remote companion to the main Graffiti canvas. Operating strictly within the **Asymmetric Pattern**, it converts a phone into a wireless spray can that supports both direct touch drawing and motion-based aiming with the device orientation sensor.

![icon](pwa-512x512.png "Graffiti Control App Icon")

## Screenshot
![screenshot](screenshot.png "Graffiti Control App")

## What it does

- **Dual Input Modes**: Supports classic touch or mouse drawing, while also offering a phone-only motion mode that uses the handset orientation sensor to aim a remote crosshair on the main wall.
- **Color Selection Interface**: Equips the user with a standard HTML5 color picker. To make multiplayer distinguishing immediate, it automatically algorithmically randomizes its default color assignment when the app first loads.
- **Geometric Canvas Alignment**: Dynamically receives aspect ratio data beamed directly from the main viewer's screen, artificially resizing the smartphone's drawing bounds internally so that strokes behave precisely equivalently in both 16:9 and portrait situations.
- **Motion Controls**: On smartphone-sized touch devices it reveals dedicated `Enable Motion` and `Re-center` controls so the player can start sensor input, redefine the neutral pose, and keep aiming comfortable.
- **Remote Spray Triggering**: In motion mode, tilting and rotating the phone moves the viewer crosshair while touching and holding the controller surface continuously sprays paint at that aimed position.

## How it works

The logic primarily revolves around event handling normalization and minimizing payload sizes down the WebSocket tunnel inside `script.js`.

- **Input Normalization**: It binds to both `touch` and `mouse` events. The `processEvent(e)` normalizer uniformly extracts the primary interaction coordinate whether the user is painting with an index finger or a desktop mouse.
- **Optimized Payload Construction**: For both drag drawing and motion spraying, it derives normalized start/end percentages relative to the matched controller surface. Coordinates are rounded to four decimal places before being transmitted to the viewer, reducing message size while keeping the cursor stable.
- **Phone Motion Mapping**: In motion mode it captures `DeviceOrientationEvent` readings, stores a baseline when the controller is recentered, maps phone rotation and tilt into normalized screen coordinates, and pushes those coordinates to the viewer as a live aim cursor.
- **Continuous Spray Streaming**: Holding a touch while motion mode is active repeatedly emits short paint segments from the last aimed point to the latest one, which makes the resulting path feel like a continuous aerosol spray instead of discrete taps.
- **Direct Remote Execution**: Commands are sent with RCWeb remote function calls such as `graffiti.drawLine`, `graffiti.setAimCursor`, and `graffiti.clearCanvas`, allowing the phone to directly drive the shared display without a separate REST API layer.