All experiments

Lab 02 Image effect

Turn an image into blue pixels.

Adjust the controls to transform a screenshot into a blue pixel pattern. Use the comparison slider to see the original and processed image together.

Loading the dither field

Original

With pixel effect

Drag the divider to compare the original image with the effect.

Waiting for the image.

This experiment runs in your browser. The selected image isn't uploaded or changed.

How it's built

The chosen screenshot is drawn to a hidden canvas and read back one pixel at a time. Each cell takes the brightness of the pixel under it and turns that into coverage: block size, dot radius, or a Bayer 4×4 threshold grid, in the site's blue.

The wipe is two stacked layers and a clip path. The clean copy sits on top and is clipped to the left of the handle, so dragging just changes one number.

Everything runs in your browser. No upload, no server round trip, and the original image is never modified. The stage renders at the container width, up to 1200 pixels.

How I built this site

Say hello.

Tell me what you'd like to build or improve.

Quick navigation

Find a page.

Use the arrow keys to choose a result, Enter to open it, or Escape to close.