FX engine guide

Every control

Every control, top to bottom. The effect section shows only the controls of the effect picked in the list. Here all 15 are listed, and each line starts with its effect.

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. Flips and turns are cleared.
SwapButton: Changes which tile FX engine uses, so a picture you added as B in another tool can be used here. When the other tile is empty, the picture the page opens with comes back.
Image BButton: A second kept picture. FX engine uses one picture at a time: the tile it is not using is dimmed and says Not used here, and pressing it only says so.
Save PNGButton: Saves the picture as fx-engine- and the effect's name, such as fx-engine-halftone.png. See PNG.
Record videoButton: Records one sweep, frame by frame, and saves it as fx-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.
Save JPEGButton: Saves it as a JPEG, such as fx-engine-halftone.jpg, at the quality above. See JPEG.

Effects

The 15 effects. Tap one to switch; the picture redraws at once.

HalftoneButton: A grid of dots, sized by how dark each spot is. Where the page opens. See halftone.
ASCIIButton: Rebuilds the picture from text characters. See ASCII art.
ContourButton: Cuts brightness into bands and draws lines where they meet. See contour line.
VoronoiButton: Breaks the picture into irregular cells. See Voronoi.
DitheringButton: Shades with a fixed pattern of few colours. See ordered dithering.
CrosshatchButton: Draws the dark parts with crossed pen lines. See crosshatch.
DotsButton: One dot per grid cell, in the picture's colour. See dot grid.
Edge detectButton: Keeps only the outlines. See edge detection.
Wave linesButton: Draws the picture as rows of wavy lines. See wave lines.
Matrix rainButton: Falling columns of characters. See matrix rain.
Pixel sortButton: Sorts runs of pixels by brightness into streaks. See pixel sorting.
BlockifyButton: Big flat blocks of colour. See blockify.
ThresholdButton: Two colours only, split at one brightness. See threshold.
Noise fieldButton: Pushes the picture around with drifting noise. See noise.
VHSButton: The faults of worn video tape. See VHS look.

Image

The line under the button shows the picture's size in pixels.

Try with sampleButton: Brings back the 800 × 600 picture the page opens with, unflipped and unrotated. Your settings stay.

Halftone

This section takes the name of the effect you picked. It opens as Halftone. Its controls are listed here in the page's own order, not the list's.

ScaleSlider · 4 to 20 · starts at 6: ASCII: how wide each character cell is, in pixels. Cells are 1.4 times as tall as wide. See character cell.
SpacingSlider · 0 to 4 · starts at 0: ASCII: adds 0 to 4 pixels to each cell, so the characters get bigger and fewer.
Standard · Detailed · BlocksPick one: ASCII: the characters used, dark to light. Standard has 10, from a space to @; the brightest spots get @. Detailed has 68. Blocks uses shade and half-block characters. See character set and block characters.
Original · Green · WhitePick one: ASCII: Original paints each character in the picture's colour there. Green draws green characters and White white ones, on black.
ScaleSlider · 1 to 8 · starts at 4: Dithering: how many screen pixels wide each pattern dot is.
LevelsSlider · 2 to 8 · starts at 2: Dithering: how many steps each colour is rounded to. At 2 each is fully on or off. See posterize.
2×2 · 4×4 · 8×8Pick one: Dithering: the size of the Bayer matrix: 2×2, 4×4 (where it opens) or 8×8. Bigger shades more smoothly.
Color · MonoPick one: Dithering: Color dithers red, green and blue apart. Mono dithers brightness only, in greys.
Dot sizeSlider · 2 to 20 · starts at 8: Halftone: how wide each dot's cell is, in pixels. See dot size.
AngleSlider · 0 to 90 · starts at 45: Halftone: turns the dot grid, from 0 to 90 degrees. See screen angle.
SoftnessSlider · 0 to 100 · starts at 20: Halftone: blurs the edge of each dot.
Circle · Diamond · LinePick one: Halftone: Circle dots, Diamond dots, or Line, which draws stripes along the grid. See dot shape.
Grayscale · CMYKPick one: Halftone: Grayscale draws light dots on black, bigger where the picture is darker. CMYK lays cyan, magenta and yellow dot grids at three angles over white; there is no black layer. See CMYK.
SpeedSlider · 5 to 100 · starts at 60: Matrix rain: how fast the columns fall. Each column has its own speed as well.
DensitySlider · 10 to 80 · starts at 24: Matrix rain: how wide each column is, in pixels. Higher gives wider columns, bigger characters and fewer of them.
TrailSlider · 2 to 30 · starts at 18: Matrix rain: how long the fading tail behind each falling head is. See trail.
Image mixSlider · 0 to 100 · starts at 20: Matrix rain: blends your picture in. At 0 only the rain shows; at 1 only the picture.
Green · Cyan · WhitePick one: Matrix rain: Green, Cyan or White rain. The head of each column is always close to white.
ScaleSlider · 4 to 30 · starts at 10: Dots: the size of each grid cell, in pixels. Each cell holds one dot.
Min radiusSlider · 0 to 50 · starts at 5: Dots: how big the dots are in the darkest cells, as a share of the cell.
Max radiusSlider · 20 to 100 · starts at 90: Dots: how big the dots are in the brightest cells.
Circle · SquarePick one: Dots: Circle or Square dots.
Color · WhitePick one: Dots: Color paints each dot in the picture's colour there. White makes them all white.
BackgroundColour · starts #000000: Dots: the colour between the dots.
LevelsSlider · 2 to 20 · starts at 10: Contour: how many brightness bands the picture is cut into. A line runs where two bands meet. See contour interval.
ThicknessSlider · 5 to 40 · starts at 20: Contour: how thick the lines are.
SmoothSlider · 0 to 100 · starts at 30: Contour: softens the lines. At 0 they are hard-edged; higher lets each line fade out gently on both sides, more so where the picture changes slowly.
Lines · Filled · BothPick one: Contour: Lines draws white lines on black. Filled draws flat grey bands with no lines. Both, where it opens, draws both.
Off · OnPick one: Contour: On flips light and dark before the bands are cut. See invert.
Low thresholdSlider · 0 to 100 · starts at 10: Pixel sort: pixels darker than this are left alone and break a run.
High thresholdSlider · 0 to 100 · starts at 90: Pixel sort: pixels brighter than this are left alone and break a run. See sort interval.
RangeSlider · 1 to 250 · starts at 150: Pixel sort: how far, in pixels, each pixel looks along its run. Higher makes longer streaks and more work for the GPU.
Horizontal · VerticalPick one: Pixel sort: Horizontal sorts along rows; Vertical down columns. See sort direction.
Off · OnPick one: Pixel sort: On sorts the other way, so the dark end of each streak swaps sides.
Block sizeSlider · 2 to 50 · starts at 10: Blockify: how wide each block is, in pixels. Each block takes the colour at its centre.
GapSlider · 0 to 30 · starts at 5: Blockify: a dark gap around each block. It is thin, and shows most with small blocks.
Off · 4 · 8 · 16Pick one: Blockify: Off keeps each block's colour. 4, 8 and 16 round each colour channel to steps of a quarter, an eighth or a sixteenth. See colour quantization.
Square · Circle · DiamondPick one: Blockify: Square, Circle or Diamond blocks, on black.
LevelSlider · 0 to 100 · starts at 50: Threshold: the brightness where Low color turns into High color.
SoftnessSlider · 0 to 100 · starts at 8: Threshold: widens that change into a soft ramp between the two colours.
Off · OnPick one: Threshold: On swaps which parts get which colour.
Low colorColour · starts #000000: Threshold: the colour of the parts darker than Level.
High colorColour · starts #ffffff: Threshold: the colour of the parts lighter than Level.
StrengthSlider · 10 to 100 · starts at 40: Edge detect: makes every edge stronger, so faint ones show.
ThresholdSlider · 0 to 100 · starts at 5: Edge detect: edges weaker than this are dropped.
Luminance · Per channelPick one: Edge detect: Luminance finds edges in brightness, in grey. Per channel finds them in red, green and blue apart, so the edges come out coloured. See Sobel operator.
Dark · LightPick one: Edge detect: Dark draws light edges on black. Light draws dark edges on white.
Off · OnPick one: Edge detect: On adds the edges on top of your picture. Background then does nothing.
FrequencySlider · 5 to 80 · starts at 20: Crosshatch: how far apart the lines are, in pixels. Higher spaces them wider.
ThicknessSlider · 5 to 40 · starts at 18: Crosshatch: how thick the lines are. Darker places draw them a little thicker.
LayersSlider · 1 to 4 · starts at 4: Crosshatch: how many line directions: two diagonals, then upright lines, then level lines. Each layer reaches only darker places; the fourth shows only in the darkest parts, and only with Threshold above about 0.5.
ThresholdSlider · 0 to 100 · starts at 70: Crosshatch: shifts where the layers start. Higher lets every layer reach lighter places, so more of the picture is hatched.
Black · White · CustomPick one: Crosshatch: Black draws black lines on white. White draws white lines on black. Custom draws in Line color on white.
Line colorColour · starts #000000: Crosshatch: the line colour, used only when Color is Custom.
Line countSlider · 10 to 200 · starts at 50: Wave lines: how many lines run across the picture.
ThicknessSlider · 10 to 50 · starts at 30: Wave lines: how thick the lines are. Brighter parts draw them thicker.
AmplitudeSlider · 0 to 100 · starts at 80: Wave lines: how far the lines bend. Brighter parts bend more; black stays flat. See amplitude.
WiggleSlider · 0 to 100 · starts at 50: Wave lines: how many waves run along each line. See frequency.
Off · OnPick one: Wave lines: On, where it opens, keeps the waves moving. Off holds them still.
SpeedSlider · 5 to 100 · starts at 50: Wave lines: how fast the waves move while Animate is on.
ScaleSlider · 5 to 80 · starts at 40: Noise field: how fine the noise is. Higher gives smaller swirls. See noise scale.
AmplitudeSlider · 0 to 100 · starts at 60: Noise field: how far the picture is pushed. Overlay does not use it. See displacement map.
SpeedSlider · 0 to 100 · starts at 35: Noise field: how fast the noise drifts. At 0 it holds still.
OctavesSlider · 1 to 4 · starts at 3: Noise field: how many layers of finer noise are added, from 1 to 4. See octave and fractal Brownian motion.
Displace · Overlay · BothPick one: Noise field: Displace pushes the picture around. Overlay leaves it in place and tints it with noise colours. Both does both.
Cell scaleSlider · 3 to 40 · starts at 18: Voronoi: how many cells across and down. Higher gives more, smaller cells. See Voronoi cell.
Edge widthSlider · 0 to 50 · starts at 25: Voronoi: how thick the lines between cells are. At 0 there are none. See Voronoi edges.
Edge colorColour · starts #ffffff: Voronoi: the colour of the lines between cells.
Image · Cell average · SolidPick one: Voronoi: Image keeps your picture inside the cells. Cell average gives each cell one flat colour from the picture near it. Solid gives each cell a random flat colour, not from your picture.
Off · OnPick one: Voronoi: On, where it opens, makes the cells drift slowly. Off holds them still.
ScanlinesSlider · 0 to 100 · starts at 65: VHS: how dark the fine horizontal lines are. Also drains a little colour. See scanlines.
ChromaSlider · 0 to 100 · starts at 55: VHS: pulls red and blue apart, sideways and a little up and down. See chromatic aberration.
NoiseSlider · 0 to 100 · starts at 40: VHS: how much flickering speckle is added. See analog noise.
JitterSlider · 0 to 100 · starts at 35: VHS: shakes each row sideways, with a bigger jump now and then. See jitter.
TrackingSlider · 0 to 100 · starts at 30: VHS: bands that roll down the picture and bend it sideways. See tracking error.
Color bleedSlider · 0 to 100 · starts at 40: VHS: smears red and green in from one side, which warms and brightens the picture. See colour bleed.

Transform

Turns or flips the picture itself, before any effect.

Horizontal · VerticalPick one: Horizontal mirrors the picture left to right; Vertical top to bottom. Press again to undo. A lit pill means it is on.
90°Button: Turns the picture a quarter turn clockwise from how it came in. Pressing it again does not turn it further.
180°Button: Turns the picture upside down, from how it came in.
270°Button: Turns the picture a quarter turn anticlockwise, from how it came in.
Reset transformButton: Clears the turn and both flips.

Adjustments

Applied to the picture before the effect, for every effect.

BrightnessSlider · -100 to 100 · starts at 0: Makes the picture lighter or darker, from -1 to 1.
ContrastSlider · 0 to 300 · starts at 100: Pushes lights and darks apart, from 0 (flat grey) to 3. See contrast.
SaturationSlider · 0 to 300 · starts at 100: How strong the colours are, from 0 (grey) to 3. See saturation.
HueSlider · 0 to 360 · starts at 0: Turns every colour around the colour wheel, in degrees. See hue.
SharpnessSlider · 0 to 500 · starts at 0: Sharpens fine detail. See sharpness.
GammaSlider · 20 to 300 · starts at 100: Lightens or darkens the middle tones and leaves black and white alone. Above 1 lightens. See gamma.

Color mode

Starts closed; tap its title to open it. Mode is applied before the effect; Intensity after it.

ModeChoice: Recolours the picture before the effect: Original, Grayscale, Sepia, Invert, or Duotone (deep purple to warm yellow). See grayscale, sepia and duotone.
BackgroundColour · starts #000000: The colour that takes the place of the black an effect leaves, such as the ground behind ASCII, Dots or Edge detect. Black changes nothing.
IntensitySlider · 0 to 100 · starts at 100: How much of the effect shows. At 1 you see the effect; lower blends back to your adjusted picture; at 0 the effect is gone.

Post-processing

Starts closed. Applied last, on top of the effect.

BloomSlider · 0 to 100 · starts at 0: Makes the bright parts glow brighter. See bloom.
VignetteSlider · 0 to 100 · starts at 18: Darkens the edges and corners. It opens at 0.18. See vignette.
Film grainSlider · 0 to 30 · starts at 2: Adds fine speckle that changes every frame. It opens at 0.02. See film grain.

Export

JPEG qualitySlider · 10 to 100 · starts at 92: How much detail Save JPEG keeps, from 10 to 100. Lower makes a smaller file. See JPEG quality.
CopyButton: Copies the picture to the clipboard as a PNG. See clipboard.

Sweep

Shows for every effect. Space presses Sweep, the lab's one keyboard. See loop.

SweepButton: Starts and stops the sweep: the picked effect's first slider 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

ResetButton: Puts every slider, colour, pill and the colour mode back, clears flips and turns, and returns to Halftone.