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.
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?
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.
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.
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!