ASCII Art is a sketchy ASCII art generator for p5js.

The library contains a set of simple tools facilitating the generation of ASCII art.

The main guidelines of the library are to maintain the code in a compact form, easy to modify, hack and rework.

ASCII Art is a part of the Tetoki! project and is developed thanks to substantial help and cooperation with the WRO Art Center and HAT Research Center.

link to statically hosted file:
https://tetoki.eu/asciiart/asciiart/p5.asciiart.min.js

Download current ASCII Art release (v. 0.3.00a, 25.09.2019) with examples.

ASCII art is a graphic design technique that uses computers for presentation and consists of pictures pieced together from the printable characters defined by the ASCII Standard. Most examples of ASCII art require a fixed-width font.

There is also a slightly more technically advanced ASCII art mutation called ANSI art. ANSI art is a computer art form that was widely used at one time on BBSes. It is similar to ASCII art, but constructed from a larger set of 256 letters, numbers, and symbols — all codes found in IBM code page 437, often referred to as extended ASCII and used in MS-DOS and Unix environments. ANSI art also contains special ANSI escape sequences that color text with the 16 foreground and 8 background colours offered by ANSI.SYS, an MS-DOS device driver loosely based upon the ANSI X3.64 standard for text terminals. Some ANSI artists take advantage of the cursor control sequences within ANSI X3.64 in order to create animations, commonly referred to as ANSImations - however, there are also examples of ASCII art using animation.

ASCII art technique is widely used by artists, hobbysts, hackers. Especially interesting example of use and creative development of the ASCII art are works created by the "ASCII Art Ensemble" group. The group, formed by Walter van der Cruijsen, Luka Frelih, Vuk Cosic, was founded in 1998. Members of the "ASCII Art Ensemble" created a software to "code" moving images into animated (sequential) ASCII art pieces. Most recognizable work by the group is "Deep ASCII" - an ASCII version of the famous pornographic film "Deep Throat" from 1972.

ASCII art is also a descendant of the concrete and vsual poetry and so called typewriter art: a pre-computer technique of creating images from characters available in typewriters (the first known piece of typewriter art — an image of a butterfly composed of brackets, dashes, slashes, and an asterisk, made by Flora Stacey, a British secretary, in 1898).

Examples

NOTE: Not all web browsers allow the use of a video camera (eg built into a laptop or connected via USB). This is not related to the construction of the ASCII Art library, or even with p5js, but with the browser manufacturer's treatment of security. Sometimes this is related to the operating system (eg iOS in some cases blocks access to the camera), sometimes with security settings or certificates. Some of these settings can be changed, but generally not all browsers work with cameras. Currently the best browser on macOS, Windows and Linux to test p5js sketches hosted locally or loaded from a webserver and using video camera (and the ASCII Art library) is Mozilla Firefox

Basics of image processing with the ASCII Art library:


ASCII Art and still images


ASCII Art and video camera

Reference

AsciiArt

The main library pseudo-class. You must create an object derived from this class to use the library. The simplest version of the constructor require just one parameter (handle to the sketch "owning" the object), but you can also use one of the versions that allow you to create an object with more parameters, too:
var aa = new AsciiArt(_sketch);
var aa = new AsciiArt(_sketch, _fontName);
var aa = new AsciiArt(_sketch, _fontName, _fontSize);
var aa = new AsciiArt(_sketch, _fontName, _fontSize, _textStyle);

_fontName, _fontSize, _textStyle correspond to the typical font parameters used in p5js. The given font parameters will be used to create the table that stores glyphs ordered in terms of their area - on the basis of this table, the object will convert the image pixels to the ASCII art form.

convert

A function that converts images into ASCII graphics. It can be used in a version with one or three parameters. The function returns a two-dimensional array containing glyphs (chars).
[AsciiArt instance].convert(_img);
[AsciiArt instance].convert(_img, _w, _h);

If it is used with one parameter, the function assumes that the resolution of ASCII graphics should be equal to the resolution of the converted image. By using version with three parameters, we can determine the resolution of ASCII graphics regardless of the source image resolution (usually the resolution of ASCII graphics will of course be lower than the converted image).

convert2dArrayToString

An auxiliary function that converts a two-dimensional array containing (implicitly) glyphs (chars) into a text string - such arrays are generated by the convert function. It can be used to export the generated ASCII art graphics.
[AsciiArt instance].convert2dArrayToString(_arr2d);

A 2d array to convert should bepassed to the function as a parameters. The function returns String.

invertBrightnessFlag

Boolean variable that allows to reverse the direction of assigning the lightness of pixels to the area taken by the glyphs (this can be compared to generating a negative image). Default value of the variable is false.

printWeightTable

This method prints to the console the table that stores glyphs ordered in terms of their area.
[AsciiArt instance].printWeightTable();

No parameters are required.

typeArray2d

An auxiliary function that prints the contents of a two-dimensional array on the screen. The function assumes that the array stores glifs (chars) - such arrays are generated by the convert function. Can be called in 3 variants:
[AsciiArt instance].typeArray2d(_arr2d, _dst);
[AsciiArt instance].typeArray2d(_arr2d, _dst, _x, _y);
[AsciiArt instance].typeArray2d(_arr2d, _dst, _x, _y, _w, _h);

The parameters are as follows:
_arr2d - 2-dimentional array containing glyphs (chars);
_dst - destination (typically the sketch itself);
_x, _y - coordinates of the upper left corner;
_w, _h - width and height

Contact

write to: contact | at | tetoki | dot | eu

License
Creative Commons License
ASCII Art by Paweł Janicki is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
Based on a work at https://tetoki.eu.