QUICK NAVIGATION

Find a page.

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

LAB / 02 / BLUE PIXELS

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 is 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.

For developers: the source file behind this experiment is src/scripts/dither.js. It is not a public code link. · How this site is built

← Back to experiments

Have a project in mind?

Tell me what you'd like to build or improve. We can talk through what you need and whether I can help.

Book a call with mepatrick@epiphanydynamics.ai