![Ojas](https://caygnus.com/_astro/ojas.BkRlqGo1_1hH8Eu.webp)

EXP 005 · WebGL · Point cloud

# Portraits

A portrait drawn as thousands of dots, lit by your pointer, that resolves into the picture. Move the sliders and it changes as you watch.

Entry

EXP 005 Experiment

Tags

-   WebGL
-   Point cloud

Used on

[The portrait on About](https://caygnus.com/about#people)

## What it is

The portraits on our About page are not plain photos. Each one is drawn as thousands of dots, sampled from the picture and lit by your pointer, and it resolves into the picture when you hover.

The portrait here is a monogram: the first letter of the founder’s name, with its own depth map. Move the sliders to change the dots, the depth and the light.

## How it's made

1.  A picture and its depth map · Each portrait is a picture with a small depth file, a greyscale image where white is nearest. The portrait here is the founder's initial, with a depth map made for it.
2.  8,192 dots · The page picks 8,192 points from the picture. Light areas and edges get more dots than flat ones, so the outline stays crisp.
3.  The pointer is the light · Your pointer is a light in front of the portrait. Dots that face it brighten, and dots turned away stay dim. Light falloff sets how far the light reaches.
4.  Hover to resolve · Hovering or focusing the portrait turns the dots into the picture. On About, touch, reduced motion and Static show the picture itself. Here each control change draws one still.

## What we learned

Weighting the dots toward light areas and edges kept the shape readable with only 8,192 points.

## If motion bothers you

With reduced motion turned on, the portrait draws as one still that each control changes. Every control works with a keyboard, and Pause motion stops the light at any time.

[Next experiment · EXP 001AlbireoWebGL · Physics · Glow · The homepage skyOpen EXP 001 →](https://caygnus.com/lab/albireo)

---

Source: https://caygnus.com/lab/portraits