Mosaic engine guide

Every control

Every control in the panel, top to bottom. Animation starts closed; tap its title to open it.

Letting go of any slider except Speed builds the picture again. Delaunay, Voronoi and Circle scatter new random points each time, and so does any mode with Jitter above 0.

Load and save

They stay at the top while the panel scrolls. Your pictures stay on this device for every lab tool until you press × on a tile; Reset puts the controls back and leaves them.

Image AButton: Your picture. Press it to open one from your device, or drop one on the frame; two at once fill A and B. It is kept on this device, never uploaded, and every lab tool that takes a picture opens with it until you press × on its corner. It is built with the settings you have.
SwapButton: Changes which tile Mosaic engine uses, so a picture you added as B in another tool can be used here. When the other tile is empty, the sample comes back.
Image BButton: A second kept picture. Mosaic engine builds one picture at a time: the tile it is not using is dimmed and says Not used here, and pressing it only says so.
Try the sampleButton: Loads the sample picture again and builds it with the settings you have.
Save PNGButton: Stops any animation and saves the finished picture as a PNG named mosaic- and a number, at the working size. See PNG.
Record videoButton: Records one sweep, frame by frame, and saves it as mosaic-engine.mp4 (H.264, so it plays anywhere); a browser that cannot write MP4 gets a WebM. Sweep starts by itself if it was not running, and stops after. See MP4 and WebM.
CopyButton: Copies the canvas to the clipboard as a PNG, as it is at that moment; during an animation that is the frame on screen. See clipboard.

Image

A line shows how many cells were drawn, how long the build took, and the working size of the picture.

Presets

A preset sets the tessellation, cell count, edge weight, jitter, stroke, fill, quantize and background together. It leaves the animation alone.

Low poly · Stained glass · Pixel art · Honeycomb · Pointillism · Shattered · Mosaic tile · AbstractPick one: Sets many controls at once for one look. See preset.

Low poly: Delaunay triangles from 1,200 points, edge weight 60%. The page opens with it. See low-poly.

Stained glass: Voronoi, 500 cells, edge weight 30%, with 2-pixel dark lines between the cells. See stained glass.

Pixel art: Square tiles, 2,500 of them, with no lines. See pixel.

Honeycomb: Hexagons, 800 of them, with thin dark lines at 60%. See honeycomb.

Pointillism: Circle mode: 5,000 dots of mixed sizes, edge weight 50%, jitter 50%, each dot the colour at its centre. See pointillism.

Shattered: Voronoi, 300 cells, edge weight 50%, with 1.5-pixel white lines at 40% on a black background.

Mosaic tile: Square tiles, 800 of them, jitter 40%, with thin dark lines, like grout.

Abstract: Delaunay triangles from 200 points, edge weight 40%, with Quantize at 8 for fewer colours.

Tessellation

Voronoi · Delaunay · Hexagon · Square · Diamond · Circle · BrickPick one: The shape of the cells. Picking one keeps your other settings and clears the preset highlight. See tessellation.

Voronoi: One cell around each point, holding the ground nearest to it. Its corners are the centres of the circles through the triangles' corners. See Voronoi cell.

Delaunay: Triangles joining the scattered points, none inside another's circle. The cell count here comes out at about twice the points. See Delaunay triangulation.

Hexagon: A grid of hexagons, each row shifted half a cell.

Square: A grid of squares. See square tiles.

Diamond: Squares turned on their corners, one on each point of a square grid. The background shows where they do not meet.

Circle: Round dots at random spots, in mixed sizes, drawn one over another. The background shows between them.

Brick: Bricks twice as wide as they are tall, each row shifted half a brick. See brick bond.
Cell countSlider · 50 to 10000 · starts at 1200: For Delaunay, Voronoi and Circle, how many points or dots are scattered. For the grid modes, how many tiles the grid is sized for, so the count drawn comes out a little different. On a phone it stops at 3,000. See cell count.
Edge weightSlider · 0 to 100 · starts at 60: How strongly points gather along edges in the picture. At 0 they are spread at random. Delaunay, Voronoi and Circle use it; in Circle, dots near an edge also come out smaller. The grid modes ignore it. See edge weight.
JitterSlider · 0 to 100 · starts at 0: Shakes the tile modes out of line: Hexagon, Square, Diamond and Brick move and bend each tile, and Circle varies the dot sizes more. Delaunay and Voronoi ignore it. See jitter.

Stroke

WidthSlider · 0 to 5 · starts at 0: The width of the line drawn round each cell, in pixels of the picture. At 0 there is no line. See stroke width.
ColorColour · starts #111113: The colour of that line. Changing it redraws without moving the cells. See stroke colour.
OpacitySlider · 0 to 100 · starts at 80: How solid the line is. At 0 it cannot be seen.

Fill & color

Fill modeChoice: How each cell's colour is picked from the picture under it. Average color takes the mean of a small grid of spots across the cell's box; see average colour. Center sample takes the one pixel at the cell's middle, which is livelier but noisier; see centre sample. Dominant color sorts those same spots into colour groups and takes the colour most of them share, so a cell that is mostly sky stays sky-coloured instead of being mixed with the few peak pixels at its edge.
QuantizeSlider · 0 to 256 · starts at 0: Cuts each of red, green and blue to this many steps, so the picture keeps fewer colours. At 0 it is off, and 256 changes nothing. See colour quantization.
BackgroundColour · starts #08080A: The colour behind the cells. It shows between dots and diamonds, and in gaps while an animation plays. Changing it redraws without moving the cells.

Animation

Off · Grow · Shatter · Color wavePick one: How the picture is played in. Picking one plays it at once, and it plays again after every new build. It never goes into the PNG. See build animation.

Off: No animation. The page opens with it.

Grow: Each cell grows from its middle and fades in, one after another in the order they were built. See stagger.

Shatter: Each cell slides in from a little further out from the middle of the picture and fades in.

Color wave: Bands of shifted colour sweep across the picture and settle back to the true colours. See hue shift.
SpeedSlider · 0.2 to 3 · starts at 1: How fast the animation plays, from 0.2 to 3 times. At 1, Grow takes about a second and a third. See animation speed.
ReplayButton: Plays the chosen animation again. It does nothing while the animation is Off.

Export

GenerateButton: Builds the picture again with the settings you have, scattering new random points where the mode uses them.
RandomizeButton: Does the same as Generate: a new build with new random points. With a grid mode and Jitter at 0, the result is the same each time. See randomize.

Sweep

Space presses Sweep, the lab's one keyboard. See loop.

SweepButton: Starts and stops the sweep: the cell count breathes around the value you set, a smooth wave, and returns to it when you stop. See sine wave and easing.
Seconds a cycleSlider · 1 to 12 · starts at 4: How long one breath takes, in seconds. Record video keeps exactly one, so the clip loops. See loop.
WidthSlider · 10 to 100 · starts at 60: How far the slider travels from end to end, as a share of its whole range, centred on your value. 100 swings the whole way.

Reset

Your picture stays.

ResetButton: Puts every setting back to how the page opened: the Low poly preset, the animation Off, and Speed at 1.