ASCII art guide

Every control

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

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. A picture longer than 1600 pixels on a side is read through a copy of that size, so the sliders stay quick. If the browser cannot open the file, a message says so and the picture you had stays.
SwapButton: Changes which tile ASCII art uses, so a picture you added as B in another tool can be used here. When the other tile is empty, the logo comes back.
Image BButton: A second kept picture. ASCII art draws 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 AIKIZI logo the page opens with, 192 pixels square.
Save PNGButton: Saves the text as a picture, ascii-art.png, drawn with your font size, spacing, colours and background. See PNG.
Record videoButton: Records one sweep, frame by frame, and saves it as ascii-art.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.
Copy textButton: Copies the characters to the clipboard as plain text, with no colour. See copy as text.
Save .txtButton: Saves the characters as ascii-art.txt. See text file.
Save HTMLButton: Saves the text as a web page, ascii-art.html. See HTML export.

Image

A line shows how many characters across and down the text has, and the size of the picture in pixels. A picture longer than 1600 pixels on a side is read through a smaller copy, and the line adds the size it is read at.

Characters

ASCII · Detailed · Blocks · Braille · CustomPick one: Which characters the picture is built from. See character set.

ASCII: Ten steps: space . : - = + * # % @. The set the page opens with. See classic ramp.

Detailed: Twenty-two characters, from a space through quotes, slashes and brackets to letters, @ and #, for finer steps of brightness.

Blocks: A space and the shades ░ ▒ ▓ █, which fill part or all of a cell. See block characters and shade ramp.

Braille: Each character is a grid of up to eight dots, two across and four down, so every character holds eight pixels of the picture. A dot is set where its pixel is brighter than middle grey, the way the other sets put heavy marks on bright cells. See braille characters.

Custom: The characters you type in Custom set. See custom set.
Custom setText: Shows when Custom is picked. Type any characters. The tool measures how much ink each one has and sorts them from light to dark itself, so the order you type does not matter. With fewer than two characters it uses the ASCII set.

Rendering

Width sets how many characters are picked. Font size, Line height and Letter spacing only change how they are drawn, on the page, in the PNG and in the HTML.

Width (chars)Slider · 40 to 200 · starts at 100: How many characters make one row. The number of rows follows from the picture's shape. On phones and touch screens it stops at 120 and opens at a width that fits the frame. See width in characters.
Font sizeSlider · 4 to 16 · starts at 8: How big the characters are drawn, in pixels. See font size.
Line heightSlider · 0.6 to 1.4 · starts at 1.0: The distance from one row to the next, as a share of the font size. Below 1 the rows overlap. See line height.
Letter spacingSlider · -1 to 2 · starts at 0: Extra space between characters, in pixels, from −1 to 2. See letter spacing.
InvertOn or off · starts off: Swaps light and dark before the characters are picked, so heavy marks go to dark areas. With Braille it swaps which pixels get dots. See invert.

Color

Mono · Green · ANSI 16 · Full RGBPick one: The colour of the text.

Mono: White text.

Green: Green text, like an old terminal screen. See phosphor green.

ANSI 16: Each character takes the nearest of the 16 colours old terminals could show. See ANSI colours and terminal.

Full RGB: Each character takes the average colour of the pixels it stands for. See full RGB text.
BackgroundColour · starts #08080A: The colour behind the text, on the page, in the PNG and in the HTML. The text colour does not change with it.

Edge detection

It measures where the brightness changes sharply with the Sobel operator. It works with every character set, Braille too.

Draw edgesOn or off · starts off: Where an outline is strong enough, the cell gets a line character instead: a dash, a slash, a bar or a backslash, by the outline's direction. The other cells keep the character set. With Braille, every pixel on a strong outline gets a dot. See edge detection and edge characters.
ThresholdSlider · 10 to 200 · starts at 80: How strong an outline must be to get a line character, or a Braille dot. Lower draws more lines; higher keeps only the sharpest. See threshold.

Export

Copy imageButton: Copies the same picture as Save PNG to the clipboard. See clipboard.

Sweep

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

SweepButton: Starts and stops the sweep: the width in characters 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 control back to how the page opened: ASCII, Mono, the opening width and type settings, Invert and Draw edges off, and the dark background.