Member-only story

Terminal Pixel Art

Lucamug
3 min readJun 20, 2019

--

If you find yourself often running scripts in the terminal, why not adding some colored pixel art to them?

There are several way of achieving this but one of the most reliable is using the character “▄”, the Lower Half Block U+2584, that is mostly square and then assigning it two colors, one for the background and one for the foreground.

We can store the image as a multiline string and associate each character to a different color. This way we get also a simple but convenient Pixel Art Editor.

We can conveniently associate darker colors to darker characters and vice versa so that the image looks realistic also in the editor.

For example:

const image = `
╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬
╬╬╬╬╬╬╬╬╬╬████████████████╬╬╬╬╬╬╬╬╬╬
╬╬╬╬╬╬╬╬██▓▓▓▓▓▓▒▒▒▒▒▒▒▒▒▒██╬╬╬╬╬╬╬╬
╬╬╬╬╬╬██▓▓▓▓▓▓▒▒▒▒▒▒▒▒▒▒▒▒▒▒██╬╬╬╬╬╬
╬╬╬╬╬╬██▓▓▓▓▓▓▒▒▒▒▒▒▒▒▒▒▒▒▒▒██╬╬╬╬╬╬
╬╬╬╬╬╬██▓▓░░░░ ▒▒▒▒▒▒██╬╬╬╬╬╬
╬╬╬╬╬╬██▓▓░░░░ ▒▒▒▒██╬╬╬╬╬╬
╬╬╬╬╬╬██▓▓░░██ ██ ▒▒ ██╬╬╬╬╬╬
╬╬╬╬╬╬██░░░░░░ ██╬╬╬╬╬╬
╬╬╬╬╬╬██░░░░██████████ ██╬╬╬╬╬╬
╬╬╬╬╬╬██░░░░░░ ██╬╬╬╬╬╬
╬╬╬╬╬╬╬╬██░░░░░░ ██╬╬╬╬╬╬╬╬
╬╬╬╬╬╬██░░██████░░░░░░░░░░ ██╬╬╬╬╬╬
╬╬╬╬██░░ ██╬╬╬╬
╬╬██░░ ██░░ ██╬╬
╬╬██░░░░████░░░░ ░░░░ ████░░ ██╬╬
╬╬██░░ ██░░ ██░░ ██╬╬
╬╬██░░░░ ██▓▓▒▒▒▒▒▒▒▒▒▒██░░░░ ██╬╬…

--

--

No responses yet