How to Add Colors to ASCII Art
How to Add Colors to ASCII Art 관련
You can spice up your ASCII Art by using a library called lolcat. lolcat is a Linux command that can style text in the terminal with rainbow colors. There is also a library called isomorphic-lolcat, that you can use in JavaScript to make your ASCII Art in rainbow colors.
Terminal Formatting
To use the lolcat library, you first need to know how to change the colors of the terminal.
You can do this using low-level formatting that looks like this:
[[b;red;]some text]
The whole text is wrapped in brackets and the formatting of the text is in additional brackets, where each argument is separated by a semicolon. To learn more about the syntax, you can read the Wiki Article: Formatting and Syntax Highlighting (jcubic/jquery.terminal).
Here, we'll only use a basic change of color. Instead of red, you can use CSS color names, hex color, or rgb().
How to Use the Lolcat Library
To use the library, we first need to include it in HTML:
<script src="https://cdn.jsdelivr.net/npm/isomorphic-lolcat"></script>
To format the string with colors, we can use this function:
function rainbow(string) {
return lolcat.rainbow(function(char, color) {
char = $.terminal.escape_brackets(char);
return `[[;${hex(color)};]${char}]`;
}, string).join('\n');
}
function hex(color) {
return '#' + [color.red, color.green, color.blue].map(n => {
return n.toString(16).padStart(2, '0');
}).join('');
}
The lolcat.rainbow will call a function in every character from the input string, and pass color as an object with RGB values and the character.
Rainbow ASCII Art Greetings
To use this code, you need to wrap the call to render with rainbow:
function ready() {
term.echo(() => {
const ascii = rainbow(render('Terminal Portfolio'));
return `${ascii}\nWelcome to my Terminal Portfolio\n`;
}).resume();
}
You can also use two calls to echo, since only the Figlet message needs to be executed inside the function:
function ready() {
term.echo(() => rainbow(render('Terminal Portfolio')))
.echo('Welcome to my Terminal Portfolio\n').resume();
}
You'll notice that when you resize the window, the rainbow changes randomly. This is the default behavior of lolcat. To change it, you need to set the random seed.
function rand(max) {
return Math.floor(Math.random() * (max + 1));
}
function ready() {
const seed = rand(256);
term.echo(() => rainbow(render('Terminal Portfolio'), seed))
.echo('Welcome to my Terminal Portfolio\n').resume();
}
function rainbow(string, seed) {
return lolcat.rainbow(function(char, color) {
char = $.terminal.escape_brackets(char);
return `[[;${hex(color)};]${char}]`;
}, string, seed).join('\n');
}
The rand function returns a pseudo-random number from 0 to max value. Here we created a random value from 0 to 256. ### How to Make the Greeting Text White
As we showed previously, you can make the text white with terminal formatting. You can use:
[[;white;]Welcome to my Terminal Portfolio][[;#fff;]Welcome to my Terminal Portfolio][[;rgb(255,255,255);]Welcome to my Terminal Portfolio]
Moreover, if you include additional file XML formatting, you can use XML-like syntax. That makes formatting much easier.
<script src="https://cdn.jsdelivr.net/npm/jquery.terminal/js/xml_formatting.js"></script>
After including the above file in HTML, you can use CSS named colors as XML tags:
<white>Welcome to my Terminal Portfolio</white>
The XML formatting supports more tags like links and images. See Extension XML Formatter (jcubic/jquery.terminal) for more info.
Note
XML formatter is a function added to $.terminal.defaults.formatters, which transforms the input XML-like text into terminal formatting. You can add the same to your own formatters.