Если вы обнаружите, что часто запускаете скрипты в терминале, почему бы не добавить к ним цветную пиксельную графику?
Есть несколько способов добиться этого, но один из самых надежных — использовать символ «▄», нижний полублок U+2584, который в основном квадратный, а затем назначить ему два цвета: один для фона и один для переднего плана.
Мы можем сохранить изображение как многострочную строку и связать каждый символ с другим цветом. Таким образом, мы также получаем простой, но удобный редактор Pixel Art Editor.
Мы можем удобно связать более темные цвета с более темными символами и наоборот, чтобы изображение выглядело реалистично и в редакторе.
Например:
const image = ` ╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬ ╬╬╬╬╬╬╬╬╬╬████████████████╬╬╬╬╬╬╬╬╬╬ ╬╬╬╬╬╬╬╬██▓▓▓▓▓▓▒▒▒▒▒▒▒▒▒▒██╬╬╬╬╬╬╬╬ ╬╬╬╬╬╬██▓▓▓▓▓▓▒▒▒▒▒▒▒▒▒▒▒▒▒▒██╬╬╬╬╬╬ ╬╬╬╬╬╬██▓▓▓▓▓▓▒▒▒▒▒▒▒▒▒▒▒▒▒▒██╬╬╬╬╬╬ ╬╬╬╬╬╬██▓▓░░░░ ▒▒▒▒▒▒██╬╬╬╬╬╬ ╬╬╬╬╬╬██▓▓░░░░ ▒▒▒▒██╬╬╬╬╬╬ ╬╬╬╬╬╬██▓▓░░██ ██ ▒▒ ██╬╬╬╬╬╬ ╬╬╬╬╬╬██░░░░░░ ██╬╬╬╬╬╬ ╬╬╬╬╬╬██░░░░██████████ ██╬╬╬╬╬╬ ╬╬╬╬╬╬██░░░░░░ ██╬╬╬╬╬╬ ╬╬╬╬╬╬╬╬██░░░░░░ ██╬╬╬╬╬╬╬╬ ╬╬╬╬╬╬██░░██████░░░░░░░░░░ ██╬╬╬╬╬╬ ╬╬╬╬██░░ ██╬╬╬╬ ╬╬██░░ ██░░ ██╬╬ ╬╬██░░░░████░░░░ ░░░░ ████░░ ██╬╬ ╬╬██░░ ██░░ ██░░ ██╬╬ ╬╬██░░░░ ██▓▓▒▒▒▒▒▒▒▒▒▒██░░░░ ██╬╬ ╬╬╬╬████████▓▓▒▒▒▒▒▒▒▒▒▒████████╬╬╬╬ ╬╬╬╬╬╬╬╬╬╬██▓▓▒▒████▓▓▒▒██╬╬╬╬╬╬╬╬╬╬ ╬╬╬╬╬╬╬╬╬╬██████╬╬╬╬██████╬╬╬╬╬╬╬╬╬╬ ╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬`
Что с этой цветовой палитрой:
Будет генерировать это:
Из-за вертикальной прямоугольной природы символов мы можем использовать двойные символы, чтобы сделать соотношение более реалистичным. Используя один символ, мы получили бы что-то растянутое по горизонтали, как в
const image = ` ╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬ ╬╬╬╬╬████████╬╬╬╬╬ ╬╬╬╬█▒▒▒▓▓▓▓▓█╬╬╬╬ ╬╬╬█▒▒▒▓▓▓▓▓▓▓█╬╬╬ ╬╬╬█▒▒▒▓▓▓▓▓▓▓█╬╬╬ ╬╬╬█▒ ░░░░▓▓▓█╬╬╬ ╬╬╬█▒ ░░░░░▓▓█╬╬╬ ╬╬╬█▒ █░░░█░▓░█╬╬╬ ╬╬╬█ ░░░░░░░█╬╬╬ ╬╬╬█ █████░░░█╬╬╬ ╬╬╬█ ░░░░░░░█╬╬╬ ╬╬╬╬█ ░░░░░█╬╬╬╬ ╬╬╬█ ████████░█╬╬╬ ╬╬█ ░░░░░░░░░░░█╬╬ ╬█ ░░░░░░░░░█ ░░█╬ ╬█ ██ ░░░░██ ░█╬ ╬█ ░░█ ░░░░█ ░░█╬ ╬█ ░█▒▒▓▓▓▓█ ░█╬ ╬╬████▒▒▓▓▓▓████╬╬ ╬╬╬╬╬█▒▓██▒▓█╬╬╬╬╬ ╬╬╬╬╬███╬╬███╬╬╬╬╬ ╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬`
Основной цикл для рендеринга изображения с цветом в терминале довольно прост:
for (var y = 0; y < height - 1; y += 2) {
var row = []
for (var x = 0; x < width; x += xScale) {
row.push(chalk['bgHex'](color[i[y][x]])['hex'](color[i[y + 1][x]])('▄'));
}
}
Он перемещается по осям x и y изображения и генерирует ряды («▄▄▄▄▄▄▄▄▄▄») цветных символов.
Ось Y сканируется с удвоенной скоростью, потому что нам нужно два пикселя для вывода одного символа (один используется для цвета фона, а другой — для цвета переднего плана).
Персонаж раскрашивается с помощью библиотеки chalk.
Не также xScale, который используется для правильного рендеринга двух изображений выше (с одиночным символом или двойным символом).
Если строки изображения нечетные, нам нужно иметь дело с последним рядом пикселей. Это было не так просто, в итоге я использовал пробел, задающий цвет фона:
if (height % 2 === 1) {
var row = []
for (var x = 0; x < width; x += xScale) {
row.push(chalk['bgHex'](color[i[height - 1][x]])(' '));
}
}
Другие варианты, возможно, отобразят дополнительное пространство между строками.
Мы также можем добавить простую систему для добавления комментариев рядом с изображением:
outcome.push(indentation + row.join(‘’) + (comment && comment[y / 2] ? comment[y / 2] : “”))
Вот как мы можем, наконец, отобразить изображение в терминале:
const comment = ` Terminal Pixel Art` console.log( paint( image, “ “, comment, 2 ) )
Код доступен по адресу https://github.com/lucamug/terminal-pixel-art.
Это все!
Присылайте мне фрагменты кода и скриншоты, если вы собираетесь добавить пиксельную графику в свой терминал, и я поделюсь ими здесь!
