Solving the Towers of Hanoi

Holy guacamole friends, I’ve made it to the end of Tier 1 on P1xt’s famous CS/WD guide. One marathon 10-hour coding day to solve my most challenging problem yet!

M. Lee Pee
Aug 22, 2017 · 3 min read

Here I am, writing about my Towers of Hanoi solver. When I started this journey in March, I thought I’d NEVER be able to complete such a monumental task. Even when I started the project I wasn’t 100% sure I was ready. But now, 5 months later, here it is. I actually finished this on July 7th, but life got in the way and I haven’t had time for a review.

I broke the project down into smaller pieces so I could organize my thoughts. This also helped because after I achieved each “piece” I felt a sense of completion and motivation to go forward.

The design

I’ll admit my design is not pretty, by any means. I faced a lot of challenges with the layout and structure. I started by drawing a picture of what I wanted it to look like: three “prongs”, a shared “base”, and the “disks” of varying size. The disks needed to be placed on top of each other, and with varying (shrinking) sizes. There needed to be a reference point to place each disk on the prong.I needed to capture the number of disks (from the user) and create a formula to draw each disk with varying size. I started with only HTML and a tiny bit of CSS to draw one disk on the background. I used a div to draw the disk and move it from one prong to another, manually in the HTML file, to make sure it remained centered on each prong. That way, to animate the moving, I would just have to remove and append the disk to the other prongs as needed.

To dynamically add the disks as per user input, I wrote a small helper function to calculate the size of each disk based on a smallest disk size (scaling upwards), and the height of each disk was fixed, so I could place one atop another by controlling the bottom CSS property.

The last thing I did was randomize color of each disk based off of a random color picker I wrote for my FreeCodeCamp quote generator!

My tower solver

The logic

My first go-ahead was to implement in JS the recursive solution to this problem as read on Wikipedia. This made for an elegant a brief solution. I tested it out using arrays and it worked! However, for me, it caused many headaches later one during the animation part…

The animation

Holy hell this part was the worst. I struggled and struggled with setTimeout and delay and all kinds of CSS-animate trickery. Nothing worked. Everything moved out of order and it was a disaster. At first I just wanted to do a simple fade-in / fade-out, but due to the recursion I was getting lost within functions calls (call stack)

The re-write

I took a step back and decided that the recursive function, while nice to look at, was giving me a bit of a nightmare in tracking state. I re-wrote my logic portion using the iterative solution from wikipedia, and it was fairly simple to implement. Then, I discovered the setInterval function, and how you can call the end to it with clearInterval. This was exactly what I needed to solve the problem!

Source Code

The future

I have now explored codepen and github to see other solutions to this problem. Some people used generators (wow) to iterate through the solution, adding a time delay to each iteration. Some animations people made are super impressive, moving each piece up and across. My design as well it not at all mobile responsive, and it is actually pretty ugly. These are all things I could add in the future or on a rewrite. Anyways I’ve finished Tier 1 of the P1XT guide, so now I have a few edx courses ahead of me!

Onward!

)

M. Lee Pee

Written by

Teaching myself webdev for fun and glory!

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade