Splashery
Splat Mirror, a still.
Playground

Splat Mirror

Studio, built from a recipe. Row 25, column 28 of the code.

Tap “Start camera” and each splat takes the color of its place in the picture, so the mirror shows you, live.

Shelf
Studio
Kind
Built from a recipe
Your own
Your camera
Sound
Yes
Licenses
CC0, MIT, Apache-2.0

How to play

Tap “Start camera” to see yourself in splats; turn it to see the depth. More in the Splash tab.

Its controls

ControlKindRangeStart
Flatten or raise the depthTap
Flatten the pictureSwitchOff
Splat colorsList2 choicesOne per splat
DepthSetting
LookList2 choicesPlain

About it

A mirror made of splats. Tap “Start camera” and each splat takes the color of its place in the picture, so the mirror shows you, live.

A depth model, Depth Anything V2 Small, then works out how near each part of the picture is, as often as your device can (several times a second on a computer), and each splat moves toward you by that much: your nose comes forward and the wall behind you stays back. Turn the picture to see the relief. Tap to flatten it or raise it again. It is a guess from one camera, so the depth is relative, like a sculptor's relief, not exact distances. On a phone you can switch to the back camera. Record a video keeps what the mirror shows in this page's memory until you save it. Look: Hologram turns it cyan: you stay clear, while scanlines run across the room behind you and a soft glow rims your outline. The model (about 27 MB) loads only after you tap, and the pictures stay on this device; nothing is sent.

Sources and credits

WorkByLicense
Still Life with Cheese (the picture before the camera is on)Antoine Vollon (Metropolitan Museum of Art Open Access)CC0 1.0

Libraries

Apache-2.0
Depth Anything V2 Small, quantized ONNX (lane LSTUDIO, copied from Splashery)
MIT
omggif 1.0.10
MIT
ONNX Runtime Web 1.30.0 (its modules)

In The Splash Manual

  1. Chapter 10: Make your own
  2. Chapter 8: Photos and video into 3D

Share it

The back of the picture is this page's QR code: flip it, and point a phone at it. This link opens it in the Playground. To put it on your own page, add the element and one script tag. Every option.

https://splashery.app/play/?toy=splat-mirror
<script type="module" src="https://splashery.app/play/src/element.js"></script>
<splashery-toy toy="splat-mirror"></splashery-toy>

Nearby in the collection