Transitions Between States · A turns into B
Pixel dissolve像素溶解
- digital
- ordered
- retro
The next image does not fade in; it grows in cell by cell. Each cell carries its own threshold — diagonal position plus jitter — so the dissolve sweeps diagonally and never looks like a grid flipping in unison.
When to use it
For swapping one image or grade for an equal alternative: before/after, filter switches, a portrait restyled. Do not use it between pages — a cell-by-cell dissolve takes around a second, far slower than a plain transition, and reads as a stall; and do not use it on an image whose detail matters, because the detail is broken up while it runs.
Parameters
32×18 cells (10×10px) · threshold = diagonal + jitter, normalised 0–0.94 · per frame, no easing · 6% growth room
Recipe
when threshold = diagonal + jitter, normalised 0–0.94per-frame integration, no easingPixel dissolve → 32×18 cells (10×10px) · per frame, no easing · 6% growth room
One sentence for your AI
Build a pixel dissolve: cut the canvas into 32×18 cells of 10×10px and give each one a threshold — its diagonal position (row over rows plus col over cols, halved) plus a little jitter (plus or minus 0.17) — then normalise all thresholds into 0 to 0.94. Capping below 1 leaves each cell 6% of growth room, otherwise the last batch never finishes. Sweep progress p from 0 to 1: any cell whose threshold is below p paints the new image, growing from its own centre to full size (grow = min(1, (p minus threshold) over 0.06)). Before sampling, scale both source images into offscreen canvases the same size as the target and take every drawImage from those — sampling the originals with canvas coordinates grabs the top-left corner of a different picture.