Play: About

Play: Background

API: Modules

• boot() is called once before the first pre call;
  it can be used to access context info (for example font metrics) before the firs render pass.
• pre() is called once per loop, before main;
  it can be used to prepare data for rendering (for example bitmaps, webcam data or normalisation of the mouse pointer).
• main() is called once per each cell;
  this is the main loop to prepare the data for the renderer: it can return a single character (or an object).
  
• post() is called once per loop after pre and main, just before the rendering;
  it can be used to overwrite data in the buffer (for example for a window overlay).

export function main(){
	return '?'
}
		

export function main(coord){
	return String.fromCharCode((coord.y + coord.x) % 32 + 65)
}
		

export function main(coord, context){
	const f = context.frame
	return String.fromCharCode((coord.y + coord.x + f) % 32 + 65)
}
		

const density = 'ABCxyz '
export function main(coord, context){
	const t = context.time * 0.0001
	const x = coord.x
	const y = coord.y
	const o = Math.sin(y * Math.sin(t) * 0.2 + x * 0.04 + t) * 20
	const i = Math.round(Math.abs(x + y + o)) % density.length
	return density[i]
}
		

API: Function signatures and parameters

function boot(       context,         buffer, data) // Called only once
function pre (       context, cursor, buffer, data) // Called every frame
function main(coord, context, cursor, buffer, data) // Called for every cell
function post(       context, cursor, buffer, data) // Called every frame
		

const coord = {
	x,      // column of the cell (starting top left)
	y,      // row of the cell
	index   // index of the cell
}
		

const context = {
	frame,          // current frame
	time,           // current time in ms
	cols,           // number of columns of the rendering context
	rows,           // number of rows of the rendering context
	width,          // width of the container element (pixels)
	height,         // height of the container element (pixels)
	metrics : {
		aspect      // aspect ratio of a single char (monospaced font assumed)
		cellWidth,  // width of a char
		lineHeight, // computed, but should be the same as CSS
		fontFamily, // CSS string
		fontSize,   // Derived from CSS (pixels)
		_update()   // Function to recalc the metrics (slow!)
	},
	settings,       // The settings object
	runtime : {
		cycle,      // local cycle count of the script (for debugging purposes)
		fps         // average frame rate (measured)
	},
}
		

const cursor = {
	x,          // column of the cell hovered
	y,          // row of the cell hovered
	pressed,    // mouse or pointer is pressed (boolean)
	p : {       // cursor state of the previous frame
		x,
		y,
		pressed
	}
		

API: The return object in main()

const out = {
	char,            // the char to be rendered
	color,           // the foreground color (CSS string)
	backgroundColor, // the background color (CSS string)
	fontWeight       // the font weight (CSS value or string)
				     // the online version supports these three weights:
				     // 300, 400, 700 (other values will 'snap' to those)
}
		

API: Boot

let extraCellData
let cols, rows

export function pre(context, cursor, buffer) {
	if (cols != context.cols || rows != context.rows) {
		// The window has been resized or first run
		rows = context.rows
		cols = context.cols

		// ...do something with the buffer (resize, reset, etc.):
		extraCellData = new Array(rows * cols).fill(0)
	}
}
		

API: Settings

export const settings = {
	// Base settings and the default values
	element         : null,   // target element for output
	cols            : 0,      // number of columns, 0 is equivalent to 'auto'
	rows            : 0,      // number of columns, 0 is equivalent to 'auto'
	once            : false,  // if set to true the renderer will run only once
	fps             : 30,     // fps capping
	renderer        : 'text', // can be 'canvas', anything else falls back to 'text'
	allowSelect     : false   // allows selection of the rendered element
	restoreState    : false,  // will store the 'state' object in local storage
	                          // this is handy for live-coding situations

	// CSS settings for the output element (will override document settings)
	backgroundColor : '',     // document CSS: 'white'
	color           : '',     // document CSS: 'black'
	fontFamily      : '',     // document CSS: 'Simple Console'
	fontSize        : '',     // document CSS: '1em'
	fontWeight      : '',     // document CSS: 400
	letterSpacing   : '',     // document CSS: 'initial'
	lineHeight      : '',     // document CSS: '19px'

	// Settings specific to 'canvas' renderer (may change in future):
	canvasOffset : {          // can also be set to 'auto'
		x : 0,
		y : 0
	},
	canvasSize : {            // canvas size in pixels
		width  : 0,
		height : 0
	}
}
		

Live coding: Hotkeys

Cmd/Ctrl+Enter   : run
Cmd/Ctrl+I       : immediate mode
Cmd/Ctrl+Period  : toggle editor views
Cmd/Ctrl+Shift+F : enter fullscreen (output only)
Cmd/Ctrl+Shift+C : copy a frame from the output as text

Cmd/Ctrl+S       : save to local storage, with permalink
Cmd/Ctrl+Shift+U : share to playground (needs author and title tags)
		

Live coding: Bangs

/**
Type ?help
	 anywhere to open this page for an overview about the playground,
	 more commands like this and some examples.
	 ?abc is an alias for ?help.

Type ?lsd
	 anywhere to open the local storage directory.

Type ?immediate on
	 to enable immediate mode; change back with off.

Type ?video night
	 to switch to dark mode for the editor; change back with day.

Type ?new
	 to open a new document (unsaved changes will be lost).

Type ?save
	 to save a local copy of the program (useful on mobile).

Type ?fullscreen
	 to request a fullscreen window (press ESC to switch back to windowed).
*/
		

/**
Type !video night
	 anywhere in a comment to start the editor in night mode
	 the next time it is reloaded.

Type !immediate on
	 anywhere in a comment to start the editor in immediate mode
	 the next time it is reloaded.
*/
		

Live coding: Save and upload

• @author and @title tags need to be set somewhere (see below)
• the program must generate an output
• there must be at least one LOC (line of code)

/**
@author ertdfgcvb
@title  Dynamic resize
@desc   Resize the window to alter the pattern.
*/

export function main(coord){
	return '--|-------'[coord.index % 10]
}
		

Source: Built-in modules

Source: Examples

Source: Standalone version

<!-- existing element, styled via CSS -->
<pre></pre>

<script type="module">

	// Import the program runner
	import {run} from './run.js'

	// Import a custom program; with at least a main() function exported
	import * as program from './program.js'

	// Run settings can override the default- and program seetings.
	// See the API for details.
	const settings = {
		fps : 60,
		element : document.querySelector('pre')
	}

	// Boot (returns a promise)
	run(program, settings).catch(function(e){
		console.warn(e.message)
		console.log(e.error)
	})

</script>
		

Notes: On performance

Notes: Technical

• Bug 217047: document.fonts.ready is resolved too quickly in first run of module.
  A workaround has been found, involving an artifical delay of 3 rAFs which solves the issue.
• Bug 218275: Web Inspector: error line number missing when code is a module, making debugging difficult.
  This one makes debugging code inside a module on Safari extremely painful and almost impossoible.
• Bug 218284: Error event not captured when error originates in module.
  This bug won’t allow proper error highlighting in the live-edior on Safari.
  
• Bug 225695: Fractional CSS line-height value translates to rounded (floored) element height.
  This will result in erroneus line height calculations.
  
• Bug 240213: .measureText() returns TextMetrics object with rounded values for bounding box.
  The values of the bounding box returned by CanvasRenderingContext2D.measureText() are rounded resulting in imprecise calculations in typographic centered applications (except for .actualBoundingBoxRight).
  

Font: Simple Console

Font: Character set

0 1 2 3 4 5 6 7 8 9
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
. , ; : ¿ ? ¡ ! @ # % ‰ & * ' "
€ £ $ ¥ ¢
¤ ¦ ¶ § © ® ™ ° º ª ¹ ² ³ ¼ ½ ¾
· + - × ÷ ± = ≠ < > √ ∞ ∫ ≈ ~ ¬ ≤ ≥ [ ] ( ) { } | \ / ⁄
fi fl Æ Œ æ œ ß Ø ø Ə ə ^ ¨ `
Ω ∂ ∆ π ∏ ◊ ∑ μ
‘ ’ ‚ “ ” „ « » ‹ ›
† ‡ • − – _ ¯ …

┐ ┌ ┘ └ ┼ ├ ┤ ┴ ┬ │ ─ ╎ ╌ ╵╷╴╶

┓ ┏ ┛ ┗ ╋ ┣ ┫ ┻ ┳ ┃ ━ ╏ ╍ ╹╻╸╺

╗ ╔ ╝ ╚ ╬ ╠ ╣ ╩ ╦ ║ ═

╕ ╒ ╛ ╘ ╪ ╞ ╡ ╧ ╤

╖ ╓ ╜ ╙ ╫ ╟ ╢ ╨ ╥

┑ ┍ ┙ ┕ ┿ ┝ ┥ ┷ ┯

┒ ┎ ┚ ┖ ╂ ┠ ┨ ┸ ┰

╮ ╭ ╯ ╰

╇ ╈ ╉ ╊ ╃ ╄ ╅ ╆ ┽ ┾ ╀ ╁

┡ ┢ ┩ ┪ ┞ ┟ ┦ ┧

┲ ┱ ┹ ┺ ┮ ┭ ┵ ┶

╼ ╾ ╽ ╿

█ ▛ ▜ ▟ ▙ ▄ ▀ ▐ ▌ ▞ ▚ ▖▗ ▘▝

█ ▇ ▆ ▅ ▄ ▃ ▂ ▁ ▔

█ ▉ ▊ ▋ ▌ ▍ ▎ ▏ ▕

█ ▓ ▒ ░

╱ ╲ ╳

■ □ ▢ ▣ ▪ ▫ ▬ ▭ ▮ ▯ ◆ ◇
○ ◎ ◉ ● ◐ ◑ ◒ ◓ ◕ ◖ ◗ ◙ ◚ ◛ ◜ ◝ ◞ ◟ ◠ ◡
◧ ◨ ◩ ◪ ◫ ◰ ◱ ◲ ◳ ◴ ◵ ◶ ◷ ◢ ◣ ◤ ◥
		

Resources: Artists, books and references

• Eric Fischer: The Evolution of Character Codes, 1874-1968
• Ernst Jandl: oeö (1964)
• Stan VanderBeek: Poemfield No 3 (1967)
• Richard Williams: Art1 [GitHub] (1968)
• Frederick Hammersley: Computer-generated drawings on paper (1969)
• Peter Finch: Typewriter Poems (1972)
• John Socha: Norton Commander (1986)
• AA-lib, a portable ascii art GFX library (1997)
• libcaca, the industry-standard colour ASCII-art library (2003)
• Tarn Adams, Zach Adams: Dwarf Fortress (2006)
• Barrie Tullett: Typewriter Art – A modern Anthology, Laurence King Publishing (2014)
• Marvin and Ruth Sackners: The art of typewriting, Thames and Hudson (2015)
• Ruth Wolf Rehfeldt: Signs Fiction, Chert Galerie, Motto Books (2015)
• Michael Straßburger: MapSCII (2016)
• O. Akiyama: ASCII Art Synthesis with Convolutional Networks (2017)
• Domenico Barra: Ascii Pron Remix Art (2017)
• shiru8bit: AONDEMO, A demo for an old telephone (2018)
• Paco García Barcos: Sobre como se instalo… (2019)
• Doeke Wartena: P5 Terminal Graphics (2020)

• Teletext Art
• Typography in 8 bits: System fonts
• 16colors, retro ANSI/ASCII art gallery
• VTM: A Text-based Desktop Environment, aka Monotty Desktop (~2020)
• Wikipedia: Box-drawing character
• Wikipedia: Semigraphics
• Wikipedia: PETSCII
• Twitter: datad00r
• tmdc.scene.org, Text Mode Demo Contest
• int10h.org, Oldschool PC Fonts
• text-mode.org, A collection of standard text graphics

• Iosevka, typeface family
• Hack, hackable open source font
• IBM Plex, open source font

Resources: Contributors

• Alex Miller WWW IG
• iamelizasj WWW TW IG
• masshuudojo TW IG
• Maxwell Neely-Cohen WWW TW
• nkint TW
• raurir TW
• Romain Cazier WWW TW
• xpktro TW
• zspotter TW IG

Resources: Changelog

Resources: Repository