A live rendering of a three dimensional torus knot, drawn as a grid of typographic characters in dark ink on warm paper. The knot rotates slowly; moving the pointer across it sends a ripple through the character grid.
- Sheet
- Specimen No.10
- Ink
- 1c near-black
- Stock
- Warm paper
- Press
- Canvas · 60 fps
- Type
- IBM Plex Mono
Fable series · site ten · computational typography
Glyph
An engine that draws with letters.
Before pixels there were characters. This knot is measured for light sixty times a second and set in type. Move your pointer through it.
Fig. 00 · torus knot p(2,3) · set live
Plate 01
The ramp
Every frame, the engine measures light across a grid and trades each measurement for a character. The ramp is its entire palette: a handful of glyphs sorted from bare paper to full ink. Change the ramp and the same light prints a different picture.
Ramp
Resolution
The buttons drive both live engines: the proof beside this text and the opening plate above.
The active ramp, displayed as a large type specimen: each character shown above its index, from zero, bare paper, up to the densest glyph.
Specimen · bare paper to full ink, left to right
Plate 02
How it sees
The whole trick is a single mapping, run thousands of times a frame. Three steps, drawn below with the same arithmetic the engine uses.
Step 01
Light
A scene is lit and shaded. Here a plain sphere; in the opening plate, a torus knot turning in space.
Step 02
Sample
The frame is divided into cells, one per character, and each cell keeps a single luminance value.
X##XX=
#@@@@@##Xx=+
X@@@@@@@##XXx=+:
X#@@@@@@##XXxx=+;·
##@@@####XXxx=++;·
X######XXXxx=++;:·
xXXXXXXxxx==++;:··
=xxxxxx===++;;:···
;+====+++;;;:·····
·;;;;;;:::······
············
······ Step 03
Typeset
Each value picks the glyph with the matching ink weight. More light, more ink. The grid becomes a picture.
Plates 03 and 04
The press
Photographs run through the same mapping: one glyph per cell, fixed type, no tricks. Each plate was set once at build time; the tiny original sits beside its print.
...
....
......
.......
....... ·:.:.
......... .: ....·
......... ·++·. ::.... ..;
......... .;··..... .+;.... ..·
......... .;···.·.... ;;..... .:.
......... .;·...···..;· ++..... .+
.......... .;....···.·..:. .==·... .::
.......... .+·. .....···.:+. ·X;...... ..X
.......... :=·. .....··.··=+· ·#x·...... ..=.
.......... ·x·.. ....···..··++;:. ..:=@;....... ..=.
......... .x:·.. ..··...··+@@x;·:=X##=·. ..... ..=·
......... +=·.. .......··..+X#@@@#x+·.. ..... ...·;
........ ·#;·.. ........··...···::··... ... ... .+.
........ :@;... ........··.·....··..... . ...:·
....... .#=:... . ....··......····..... .......+·
...... .x+·..........···................ . . ......:x:
.... .Xx:·.....···:·····....·..··........... ....:x+.
.... .x+··...···:·····..··...·.·.·····.............::.
... ·#=···:·:·::······.··..·..·....···...........::.
... ·X@=::::::······..·.·........·..··..........·+=·
. .;#@x;::·····..·.·.··..............·...·.....·;=+.
·x##=;:···......···..........................·;X#=:.
.:X@#=:···... ...·....... ...........·:x##x+·.
·X@#+:·.. . ....·..... ... . ..........·;x###x+·
.;=##+:·...... .···.... ... ............·;=xXx=:·.
·x#@x:...... .···..... ....................···;=xxx+++·.
·=X@@=···....····..... ........···..····...··;+xX#Xx:.
.+X@@#;:·...····...... .....·.....········....··;==xx+:.
·;x@@@X;+x;+····....... ..:::····..······.··...···:;+===;:·.
·=X@@@+:#x+····....... ..······.....··..··......···::;;++;:·..
·x@@@X;+x·. ..····.. ..·..·················...·.······:;;::::··;··:..·
·+X@@@#@; ·:····....··..····.........··...............·:=x#XxxX@@X#X
.:x@@@@#. ·:·····.... ..···........·....................·=xX####@@#x
.;X@@@@: ·········. ..··................··........... . ..·:;;;=x++
.:+@@@#x:......·····...··........·.......·.···......... . .. .....··
.·;=@@@xXx.. ......··.................................. .. .......
·=#@@#=;=+·····...................................... . . .....
.:=#@@@=+::····....................................... ...
.:X@@@@x+::···........................................ . ...
:=#@@@X=;:····...................................... . ..
·+#@@@#x=;:···............. . ....................... ....
. :;x@@@@#x+::··.·........... ................... .... . ..
·;x@@@@@#=;:····............ . ..................... . ..
.·;x#@@@@#x+:···............ .. ... .............. .. . . . ....
.+#@@@@#=;:······............ ..... ......... ..... ... ..
·:=X@@@@X=;:······............ ... .......... . ..
·;=@@@@#x+;:······......... .. .......... . ... ...
·:=#@@@@Xx+:······......... ... . ................ . .
.·:=#@@@#x+::·····......... .. ...................
:;=@@@@#x+:······.......... .. ................
·;=X#@@@#x+:·····.............. .................
·:+#@@@#=;:····.............. . ........... .. Plate 03
The fox
Studio portrait of a fox, printed at 96 columns. The rim light along the fur carries the whole plate.

The original photograph
··..................................
::··...·............................ ..
::······............................. .. .. .........
:::·······............................ ... .. ............... ........ ......
::::::·····..................................................... ........ .........
::::::::····......................................·.......................... ...........
::::::::::······.......···....................····........................... .............
:::::::::::·············::·····...·..······..·····.......................................... .
::;;;;;;;:;:···:······::::::······:::::·:::········.............................................
;+;;;;;;;;;;::·········:::::::::::::::::::::::·······...........................................
++;;;;;++;;+;;::······:::::::::::::;;:::;;:::::······...··......................................
++;;;;;;++++++;;:···:::::::::;;;;;;;;;;;;;;;::::::·········.....................................
==+;;;+++=====+;;::::::::::;;+++++++;;;;;;;;;:::··········......................·...............
x==++++=xxxx====++;;;;;::;;;;++++++++;;;;;;:::············..................·······....·........
xXXxxxxxXXXXxx=====+++;;;;;;;+++++++;;;;;;:::::·····...........··························.......
###XXXXXXXXXXxx======++;;;;;;+++++;;;;;;;;;:::··········································........
@#######XXX#Xxxxxx===++;;;;;;++++;+++++;;;:::·········································..........
@@#######XXXXXxxxxx====+++++++==+++==+++;;;::·········································..........
@@@@@@@@@#XXXXXXXXXxxxx=========+++++++;;;;::·············································......
@@@@@@@@@@##XXXXX#XXXXxxxxxx====+++===++;;:::·····::·······························.............
@@@@@@@@@@@@##X#####XXXXXXXXXxxxx======+;;:::::::::::::···························..............
@@@@@@@@@@@@@@@#@@@@########XXXXXXXXXxx=+;;;;;;;:::::::::··························......·······
@@@@@@@@@@@@@@@@@@@@@#######XX########XXXxx===++;;:::::::;::::······················....········
@@@@@@@@@@@@@####@@@@@#####XXXX#####XX####XX#####Xx=+++++=x=+;:·······················..........
@@@@@@@@@@@@@#####@@#@@#####XXXXX#XXXX########@@@@@@@@@@@@@@#=;:····················............
@@@@@@@@@@@#############XXXXXXXXXXXXXXXXXXXX#####@@@@####@@@X+;:····················......··....
@@@@@@@@@@############XXXXXXxxxxxx=======+++++;;;;::::;;+=#+;;:···················...·..........
@@@@@@@######XXXXXXXXxxxxxx======+++;;;;;;;::::::::::::::+x:::·························......···
########XXxx==+=========+++++++++++;;;;;:::::::::::::::::++·····································
##XXXXx=+;++;;;::::::::::;;;;;;;;;;;;;::::::·::::····.............······························
x==++=++;;;;;;:::········::::··::;;;;:::·····......................·····························
+++;+++++;;;;::::·····.···:::············..................... ...····························
;;;;;+++;;;;;::···········::·············........... ......... .....··························.
;;;;;;;;;;;;::·····························..·.............. ........·······················..
;;;;;;;;;;;:::·····························.............................··...···................
;;;;;:;::::::·················.....·········....................................................
;::::::::::::::········.···...........·······...................................................
::::::;:::·············.....................··..................................................
::::::::::·············.................................................... .................
::::::·::::··········.................................................. ...............
::·.......··········................................................ ... ..............
··..........·······............................................... ...........
................···........................................... .. ..........
.................········..·..................................... .. ... ........ ........
..................······........................ ................... ..........................
.......... . .······................... ............. ...........................
.......... .······.··............ ... ....... ...........................
......... ..·................ .. ................. . ...
...... ............ ........... . ..
.. ......... .............
.
..
Plate 04
The lighthouse
Lighthouse in fog, printed at 96 columns. One bright beam against dark water, most of the sheet stays paper.

The original photograph