ascii-based graphics: the only image file format for the terminal
Tags: opensource, github, showdev, terminal
Published: 2024-05-28 07:20:17

## _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:
```abg
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
{% embed https://github.com/qwertyy-dev/abg %}