← Miguel Cordero Collar
experiment / 01
Image treatment experiment
Image shader
Tune the monochrome dot treatment used by the site header and future
influences collection.
Current style / header source
Preview
The canvas redraws as you tune the recipe. Upload a portrait, a product shot, or anything else you want to test. The settings panel always shows the exact values used for the current render.
A tiny technical note
Close What the shader is doing
Each image is reduced to luminance, then sampled on a grid. Dark pixels become larger dots. Light pixels become smaller dots. A little deterministic noise nudges the dots and adds the imperfect texture.
The WebGL version runs this work in a fragment shader. Browsers without WebGL use the same recipe in a Canvas 2D fallback, so the experiment stays useful while we tune the visual language.
image → luminance → tone steps → dot size → grain