We began building a server side node application that would search for data through the Spotify API for music tracks, the Twitter API for a user’s latest tweets, and the OMDB API for movie information. As someone who loves to create all kinds of graphic art for my projects, I was challenged to find a way to scratch my image itch.

The first step includes making the app function correctly; any visual overhaul is secondary to that task. When it was completed, I searched for a simple ASCII Graphics Generator and created a LIRI logo.

LIRI ASCII Logo

I really liked the font that I had selected, but others mentioned it was a little hard to read what it was trying to say – especially since the app’s name (LIRI) isn’t in the standard user’s daily lexicon. I considered changing the font, but instead I opted to include the “Thanks” message in plain text to the left of the ASCII graphic logo.

Another member of the leadership suggested that I could use the same type of ASCII characters to enhance the titles of the selected movies or songs. That was a much bigger challenge with obstacles I could already see from miles away:

  • Putting 1 word on its own line could make some titles scroll forever. Case in point: “Star Wars: Episode VI – Return Of The Jedi” might occupy more than the entire screen.
  • How do I effectively add multiple words to a single line without extending past the horizontal limit?
  • How do I space each letter appropriately to avoid gaps?
  • How do I actually capture the letters of a long title (as a string) and actually convert it to a font that is 5-10 vertical lines high per character?

I chose a graphic font that is fairly easy to read and doesn’t take up too many vertical lines per character, then I typed the entire alphabet into the generator. Every letter (upper and lower case), number, and special character was used. I copied the entire result and threw it into a new file, then I created a JavaScript constructor called Letter that would store line1, line2, line3, line4, line5, line6, line7, and the ASCII Character Code of the letter.

LIRI Constructor Code

After playing around with some of the numbers, I decided it was safe to display 10 characters on a single line. I wrote a function that compares 2 words in an array; if they contain less than 10 characters, combine them into 1 long word, then compare it again.

When the letters were done, I compared the ASCII Code of each letter to the stored ASCII Code of my constructed objects and simply concatenated each of 7 lines together. When I reached the end of the word (or words, if they were less than 10 characters), I would print the entire set of lines, empty them, and start again on the next row.

LIRI ASCII Font

I did some fine-tuning on the letters by removing some of the extra space in the smaller letters (such as i, j, and l) so there wouldn’t be perceived spaces in the middle of some words, and I’m quite happy with the results.

LIRI Final Output

I am forever in Catherine Liu’s debt for showing me some time-saving keyboard shortcuts inside Sublime that allowed me to find every forward slash in need of an escape key and add quotes to the beginning and end of every single line of each ASCII letter. Those shortcuts turned hours of work into seconds!