L.A.S.E.R. TAG

Browser-based laser graffiti system

About this project

L.A.S.E.R. TAG

Browser-based laser graffiti system

What is L.A.S.E.R. TAG?

L.A.S.E.R. TAG is an interactive digital graffiti system that tracks laser pointers using a webcam and renders brush strokes that can be projected back onto buildings and surfaces. Originally created by the Graffiti Research Lab in 2007, it became an iconic tool for public art and expression.

This browser edition is a modern JavaScript port of the original C++/OpenFrameworks application, bringing the technology to any device with a webcam and web browser. No installation required.

Point your laser at a surface, and the software tracks its position to create glowing graffiti strokes. Connect a projector to display your artwork on buildings, walls, or any surface in real-time.

Quick Start

  • Click START and allow camera access
  • Point a laser pointer at your camera to draw
  • Press M to test with mouse input (no laser needed)
  • Press Space to calibrate the tracking area
  • Press P to calibrate projector output
  • Click Projection Window to open a window for your projector
  • Press C to clear the canvas, Ctrl+Z to undo
  • Use keys 1-4 to switch brush modes
  • Use ↑/↓ arrows to adjust brush size

Features

  • Advanced laser tracking with Kalman filter, optical flow, and CAMShift
  • Real-time HSV color detection using OpenCV.js
  • 6 brush modes with customizable colors and drip effects
  • WebGL bloom/glow post-processing
  • Perspective calibration for projection mapping
  • Dual-display support with projector popup window
  • Works fully offline - all dependencies bundled locally

License

L.A.S.E.R. TAG is provided free of charge for non-commercial use only. This software was created as a tool for public expression and artistic exploration, not as a vehicle for corporate messaging.

Permitted Uses

  • Personal artistic expression
  • Non-commercial public art projects
  • Educational purposes
  • Community events (no fees charged)
  • Open-source development

Not Permitted

  • Marketing, advertising, or promotional purposes
  • Brand promotion or corporate messaging
  • Paid services or commercial events
  • Use by advertising or marketing agencies

Any public use or derived works should credit: "Based on L.A.S.E.R. TAG by Graffiti Research Lab"

Credits & Attribution

Original L.A.S.E.R. TAG (2007)

Browser Edition (2026)

Technologies

  • OpenCV.js - Computer vision for laser tracking
  • WebGL - Post-processing bloom effects
  • WebRTC - Camera access
  • Vite - Build tooling
  • Tweakpane - UI controls

Links

View on GitHub

Original L.A.S.E.R. TAG Project • Graffiti Research Lab • OpenFrameworks

Camera Input
InstructionsAbout

Keyboard Shortcuts

SpaceCamera calib
PProjector calib
CClear canvas
MMouse input
DDebug view
EErase zone
1-6Switch mode
↑↓Brush size
Ctrl+ZUndo

Getting Started

Point a laser pointer at your camera. The tracker detects the bright spot and draws on the canvas. Use the sidebar to adjust color detection thresholds.

Camera Calibration

Press Space to enter camera calibration mode. Drag the corner handles to define the tracking area. Calibration autosaves as you adjust. Only detections inside this area are tracked.

Projection Setup

The "Projection Output" panel shows what will be displayed. Click the "Projection Window" button to open a separate window for your projector. Move it to your secondary display and press F to go fullscreen.

Projector Calibration

Press P to enter projector calibration mode. Drag corner handles to warp the output to match your projection surface. Enable the checkerboard pattern for alignment. Changes autosave.

Camera Settings

Adjust camera rotation (0°, 90°, 180°, 270°) and flip (horizontal/vertical) in the Camera Settings folder to match your physical setup.

Testing Without Laser

Press M to enable mouse input. Click and drag on the Control canvas to draw. Mouse and laser tracking can work together.

Color Picker

Click any pixel on the camera preview to automatically set the HSV tracking range to that color. Great for quickly tuning detection to your laser or object.

Detection Tips

Use laser presets for bright laser pointers (Val Min 200+). Use object presets for colored objects (Val Min 80). Adjust HSV ranges in the sidebar as needed.

Advanced Tracking

Enable Kalman Filter for smoother tracking. Optical Flow predicts motion during brief dropouts. CAMShift adapts to changing lighting.

Settings & Presets

All settings autosave automatically. Use the Settings panel to save named presets or reset to defaults.

Brush Modes

Smooth: variable-width lines. Glow: luminous strokes. Basic: 45° ribbon. Dope: perpendicular ribbon. Arrow/Fat: ribbon with arrow head. Adjust width with ↑↓.

Erase Zone

Enable erase zone to create a "shake to clear" area. Point your laser there to clear the canvas.

Preview
Camera Warped
Projection Output
Control
Tracking: OFF Mouse: OFF FPS: 0 Position: -- Mode: brush