51

Explaining Code Using ASCII Art

 5 years ago
source link: https://www.tuicool.com/articles/hit/RZ3a2aQ
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

People tend to be visual: we use pictures to understand problems. Mainstream programming languages, on the other hand, operate in an almost completely different kind of abstract space, leaving a big gap between programs and pictures. This piece is about pictures drawn using a text character set and then embedded in source code. I love these! The other day I asked around on Twitter for more examples and the responses far exceeded expectations (thanks everyone!). There are a ton of great examples in the thread; here I’ve categorized a few of them. Click on images go to the repositories.

Data Structures

One of the most common kinds of ASCII art in code is illustrating the shape of a data structure.

The example I started with comes from LLVM:

22IZJfQ.jpg!web

The layout of a data structure in the Jikes RVM:

ZFF77zf.jpg!web

A tree rotate in Musl:

UVVFbyR.jpg!web

Double-ended queue from the Rust library:

vmQJVvJ.jpg!web

Swift compiler internals:

zy6Vbya.jpg!web

Malloc header layout:

vAZR3ay.jpg!web

State Machines

JavaScript profiling:

niAjaaJ.jpg!web

RPCs in Cloud Spanner:

ziuayu3.jpg!web

I/O stream states:

j6Bjyqz.jpg!web

Logical Structure in the Problem Domain

Control flow in a JavaScript program being decompiled:

Y7z6RzJ.png!web

ECC internals:

qqIbYjN.jpg!web

Formatting numbers:

vemm22i.jpg!web

A quantum circuit:

uEvyiue.png!web

Balancing memory management objectives in an OS kernel:

ErmqUbR.jpg!web

Subtyping relations (this is a very cool special case where the ASCII art is also code):

MRBVJfj.jpg!web

The format of a DBF file:

B3yIFfF.jpg!web

A lookup table for image processing:

UvIviai.jpg!web

Shape of a color function:

rQjy2mA.jpg!web

Structure of a URI:

bUryymq.jpg!web

A very quick tutorial on undo systems from emacs:

fQzEfyu.jpg!web

Geometry

Attitude control in the Apollo Guidance Computer (!!!):

677vYrN.jpg!web

Image tiling:

f6NNjiZ.jpg!web

Boomerang trajectories in Nethack:

ZJv6BrF.png!web

Rendering CSS borders:

euENbqN.jpg!web

Quadtrees:

YBjAbuy.jpg!web

Speed control in a milling machine:

R7ZNfqu.jpg!web

Scrolling web pages:

Mb2Q7na.jpg!web

I hope you enjoyed these as much as I did!


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK