I Figured Out a Way to Make Ruby Command Line Flip Books, And I Did This By Learning from Everyone All the Time

Some background — I’m three-ish weeks into a coding bootcamp with no formal coding or computer science education on my resume: I don’t really know what I’m doing, and sometimes, I don’t even know why I’m here.

HOWEVER, after feeling lost and scared for most of the bootcamp, I landed a major breakthrough that really boosted my confidence.

All on my own, I was able to pull together information from multiple sources — my instructor, other students, and google — to create something cool and new. Something that helped me shine. I created a way to code command line animations via what I’ve been calling a Command Line Flip Book. Here’s an example:

The above application is coded like this:

good_job = [<<-FRAME1, <<-FRAME2, <<-FRAME3, <<-FRAME4, <<-FRAME5, <<-FRAME6, <<-FRAME7, <<-FRAME8, <<-FRAME9, <<-FRAME10]
~-~-~-~-~-~-~-
-----------G--
-~-~-~-~-~-~-~
FRAME1
-~-~-~-~-~-~-~
----------G--O
~-~-~-~-~-~-~-
FRAME2
~-~-~-~-~-~-~-
-------G--O--O
-~-~-~-~-~-~-~
FRAME3
-~-~-~-~-~-~-~
----G--O--O--D
~-~-~-~-~-~-~-
FRAME4
~-~-~-~-~-~-~-
-G--O--O--D--J
-~-~-~-~-~-~-~
FRAME5
-~-~-~-~-~-~-~
-G-O-O-D--J--O
~-~-~-~-~-~-~-
FRAME6
~-~-~-~-~-~-~-
-GO-O-D--J-O-B
-~-~-~-~-~-~-~
FRAME7
-~-~-~-~-~-~-~
-GOO-D--J-O-B-
~-~-~-~-~-~-~-
FRAME8
~-~-~-~-~-~-~-
-GOO-D--JO-B--
-~-~-~-~-~-~-~
FRAME9
-~-~-~-~-~-~-~
--GOOD--JOB---
~-~-~-~-~-~-~-
FRAME10

good_job.each do |f|
    puts "\e[H\e[2J"
    puts f
    sleep(0.2)
end

HOW IT WORKS

An each method pulls the whole application together.

First, it clears the command line interface using this odd line of code: puts "\e[H\e[2J". This is important because each frame has to appear in the same place to create the illusion of movement.

Next it puts a Heredoc (f) on the command line from thegood_job array.

After that it sleeps for 0.2 seconds —long enough for a user to see it. Once, it finishes sleeping, it’s ready to iterate the next index of the array until it plays each frame (heredoc).

Essentially, the computer acts like a flip book showing text in a heredoc as small modifications are drawn in the same spot over and over.

HOW I FIGURED IT OUT

It excited me to work this code out and get it to run, particularly because I pulled each code concept from a different source and synthesized all the ideas together to make something new. Something I had never personally seen, yet worked exactly how I imagined.

Firstly, I never set out to make an animation. My classmate Mike was working on command line game involving beavers. I thought it’d be cool if he could somehow create animations for the beavers. This became the seed of the idea. How could you make actual animations?

When I thought about it, I remembered a tangent our instructor went on where he showed us an odd line of code for clearing the command line screen. This gave me the idea for the flip book.

I put together these two ideas creating the first version of the flip book. The problem: it flashed by so quickly, it was impossible to tell what happened — or if anything happened at all.

I remembered talking to another classmate, David, who when working on a project he was only able to pull a certain amount of information from an API per hour. He used a command called sleep() in order to give the API a break until it would allow him to draw more information. I realized I could use that concept to slow down the flip book so each image could be seen before flipping to the next.

My first animation was a dotted line growing across the screen — sorta like a loading bar. I refactored everything into heredocs and spent a good amount of time on google learning the atypical syntax needed to compose an array of heredocs. You can find my final version above or link over to this blog for more info.

Pulling everything together, my animation took life.

Looking back, more than anything, I learned that you have to learn from everyone and from everywhere all the time. Each concept was innocuous while I was learning it. Oh sleep() that’s interesting. Oh heredocs those are weird. What the hell is puts "\e[H\e[2J"? Then I had a goal. I looked inward and pulled each concept out, put it on operating table, zapped it with lighting, and kaboom, and I had my very own Frankenstein.

I made something very cool to me, and it added a little shine to our project due at the end of the week.