rayne cloudy

Posted on May 28

ascii-based graphics: the only image file format for the terminal

#opensource #github #showdev #terminal

hello, devs!

i'm excited to show you all this tiny project i made in my free time!! it's nothing much, but it's the first project i've ever shared with the public. say hello to ascii-based-graphics!

this is a new file format that can be easily edited with a text editor (an ability that you don't have with pngs, jpegs, and most other image formats). it also has a text output using ansi escape codes to color the image, which brings images to the terminal!!

example of abg in action

take a look at the image at the top of this post. that was made using abg. here is what it looks like in a text editor:

1.0.1
abg banner
xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx v2 v2 xx xx xx xx xx xx xx p4 xx xx xx xx v4 v4 v4 xx xx xx p4 xx xx v4 v4 xx
xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx v2 v2 v2 xx xx xx xx xx p4 xx xx xx xx xx xx v4 xx xx xx p4 xx xx xx v4
xx xx y4 xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx v2 v2 xx xx xx xx p4 xx xx xx xx xx xx v4 xx xx p4 xx xx xx xx
xx xx y4 xx xx xx xx xx xx xx xx xx xx xx y4 xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx v2 xx xx xx xx p4 p4 p4 xx xx xx xx v4 xx xx p4 p4 xx xx
xx y4 y4 y4 xx xx xx xx xx xx xx xx xx y4 y4 y4 xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx v2 xx xx xx xx xx xx p4 xx xx xx v4 xx xx xx xx p4 p4
xx xx y4 xx xx xx xx xx xx xx xx xx xx xx y4 xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx v2 xx xx xx xx xx xx p4 xx xx xx v4 xx xx xx xx xx
v2 xx y4 xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx v2 v2 v2 v2 xx xx xx p4 xx xx xx v4 v4 xx xx xx
xx v2 v2 v2 v2 v2 y4 xx y4 xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx w2 xx xx xx xx xx xx xx xx xx xx xx xx xx v2 xx xx p4 xx xx xx xx xx v4 v4 v4
xx xx xx xx xx xx v2 y4 xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx w2 w4 w2 xx xx xx xx xx xx xx xx xx xx xx xx v2 xx xx xx p4 xx xx xx xx xx xx xx
xx xx xx xx xx xx y4 xx y4 xx xx xx xx xx xx xx xx xx xx w2 w2 w2 xx w2 w4 w2 w2 xx w2 w2 w2 xx xx xx xx xx xx xx xx v2 xx xx xx p4 p4 xx xx xx xx xx
p4 p4 p4 p4 p4 xx xx xx xx v2 xx xx xx xx xx xx xx xx w2 w4 w4 w4 w2 w2 w4 w4 w4 w2 w4 w4 w4 w2 xx xx xx xx xx xx xx xx v2 xx xx xx xx p4 p4 p4 p4 p4
xx xx xx xx xx p4 p4 xx xx xx v2 xx xx xx xx xx xx xx w2 w4 w2 w4 w2 w2 w4 w2 w4 w2 w4 w2 w4 w2 xx xx xx xx xx xx xx xx xx v2 xx xx xx xx xx xx xx xx
xx xx xx xx xx xx xx p4 xx xx xx v2 xx xx xx xx xx xx w2 w4 w4 w4 w4 w2 w4 w4 w4 w2 w4 w4 w4 w2 xx xx xx xx xx xx xx xx xx xx v2 v2 xx xx xx xx xx xx
v4 v4 v4 xx xx xx xx xx p4 xx xx v2 xx xx xx xx xx xx xx w2 w2 w2 w2 xx w2 w2 w2 xx w2 w2 w4 w2 xx xx xx xx y4 xx xx xx xx xx xx xx v2 v2 v2 v2 v2 xx
xx xx xx v4 v4 xx xx xx p4 xx xx xx v2 v2 v2 v2 xx xx xx xx y4 xx y4 xx y4 xx y4 w2 w4 w4 w4 w2 xx xx xx xx y4 xx xx xx xx xx xx xx xx xx xx xx xx v2
xx xx xx xx xx v4 xx xx xx p4 xx xx xx xx xx xx v2 xx xx y4 xx y4 xx y4 xx y4 xx y4 w2 y4 w2 xx xx xx xx y4 y4 y4 xx xx xx xx xx xx xx xx xx xx xx xx
p4 p4 xx xx xx xx v4 xx xx xx p4 xx xx xx xx xx xx v2 xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx y4 xx xx xx xx xx xx xx xx xx xx xx xx xx
xx xx p4 p4 xx xx v4 xx xx xx xx p4 p4 p4 xx xx xx xx v2 xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx y4 xx xx xx xx xx y4 xx y4 xx xx xx xx xx
xx xx xx xx p4 xx xx v4 xx xx xx xx xx xx p4 p4 xx xx xx v2 v2 xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx y4 xx xx xx xx xx xx
v4 xx xx xx p4 xx xx xx v4 xx xx xx xx xx xx xx p4 xx xx xx xx v2 v2 v2 xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx y4 xx y4 xx xx xx xx xx
xx v4 v4 xx xx p4 xx xx xx v4 v4 v4 xx xx xx xx xx p4 xx xx xx xx xx xx v2 v2 xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx

if you don't know how to read it, this may look like chaos. however, this makes a lot more sense than you may first realize.

dissecting an abg file

the first line is the version of abg this file uses. this is because abg is subject to change in the future. the second line serves no purpose to the interpreter, so it could be a description of the image. every line after this is the actual image. the first letter of every pixel is the color. in version 1.0.0:

r = red
y = yellow
g = green
b = blue
v = cyan
p = purple
w = white
x = transparent

the second character is the brightness.

1 = black
2 = very dark
3 = little darker
4 = bright
x = transparent

limitations

abg only allows for 20 possible colors (a mere 7% of the atari's 256), but this number will never increase. this is because of the number of ansi escape codes that exist. yes, it's sad, but there's nothing i can do :'(

future updates

in the future, i plan on branching away from just pixels, and into more commonly used characters used to make art (such as /, ,, |, etc.)

thanks!

thanks for reading my article! i don't know if anybody'll use this, ever, but it was fun to make!! :) have a great rest of your day, devs!!

repository

breakfast-for-dinner / abg

ascii-based graphics format for showing images in the terminal

abg

this stands for ascii-based graphics format. this is an ideal file format for terminal-based graphics.

example

here's abg in action:

a person waving hello
xx xx xx xx xx xx xx xx
xx xx y4 y4 y4 xx xx xx
xx y4 w4 w4 w4 y4 xx xx
y2 w4 w4 w4 w4 w4 y4 xx
y2 w4 w1 w4 w1 w4 y4 xx
y2 w4 w4 w4 w4 w4 y4 xx
y2 w1 w4 w4 w4 w1 y4 xx
y2 y2 w1 w1 w1 y4 y4 xx
y2 y2 y2 w1 y4 y4 xx w1
xx y2 w1 w1 w1 y4 w1 xx
xx w1 y2 w1 y2 w1 xx xx
xx w1 xx w1 xx xx xx xx
xx w1 xx w1 xx xx xx xx
xx xx xx w1 xx xx xx xx
xx xx w1 xx w1 xx xx xx
xx

…

View on GitHub

Top comments (7)

Eljay-Adobe • Jun 3

ANSI escape code support more than 20 colors. They support 16,777,216 colors.

ANSI has the 3-bit color sequences, SGR 30-37 range (40-47 background).

The 4-bit color sequences adds 90-97 range (100-107 background).

The 8-bit color sequences via ESC [ 38 ; 5 ; (n) m where (n) is 0-255. (48 instead of 38, for background.)

The 24-bit color sequences via ESC [ 38 ; 2 ; (r) ; (g) ; (b) m has (r), (g) and (b) channels each in the 0-255 range. (48 for background.)

rayne cloudy • Jun 4

gasp! this is incredible!

Shawn P. Conroy • Jul 12

One thing I wondered about originally and now that I'm looking more closely, this is to only use space or block character, right? We cannot do the ASCII art using half blocks or 50% shade blocks or anything like that.

If you wanted to add that ability, perhaps an update would be to allow for a third character that defines what character will be that colour. Like this could be a percentage bar with the high density dot character and low density dot character:

p4▓ p4▓ p4▓ p4░ p4░ p4░ p4░ p4░ p4░ p4░

Could use it for the top and bottom characters.

Another incremental step would be to have background colours. Have a second for each character:

p4w4▓ p4w4▓ p4w4▓ p4w4░ p4w4░

I'd recommend people use xxxxX or double space with xxxx for 'blank' characters.

I remember back in the ANSI graphics days when people would combine ascii art with ansi colours for dial up BBS. Combining the 16 (or 20?) colours with the 8 or so background colours was pretty neat. I asume the additional colours are just brighter colours of the 8 base colours you choose.

You call it transparent, but it's also black, right? Tho B is already taken.

Neat project, thanks for sharing.