tower-of-hanoi-webapp

Interactive visualisation and animation of tower of hanoi , hosted on heroku

Comment 3

Brief :

I was studying about Tower of Hanoi ( https://en.wikipedia.org/wiki/Tower_of_Hanoi ) and I thought to myself how about I make a visualisation of this wonderful puzzle all by myself ? I had no idea about how to do that , I progressed with that thought . So , finally with HTML canvas and javascript , I figured out a way to manipulate animation without using any external dependency .

Things I learned :

  1. Html Canvas and Javascript for front end.
  2. Python for backend.
  3. Exchanging information between back-end and front-end in web app
  4. Flask

How I built :

  1. I made a tower() class in python which takes input n during initialisation in it's constructor - which is the number of discs , and there is a method call inside it named hanoi() which will organise the discs from initial pole to final pole using 3rd pole as an auxiliary pole .

  2. There is a count property of that class which get's incremented whenever there is a successful conversion of a disc .

  3. I used flask as the web framework and used its inbuilt jinja templating engine to render a html page and used wtforms to get the parameter 'n' i.e. number of discs as user input .

  4. Finally n is passed to flask and python processes and returns the count property of tower() class and the array of the sequential transformations .

  5. In front end I used vanilla javascript to get the array and in a loop iterating through all pairs of the array , I updated the html canvas . With a new pair , the previous drawn element gets cleared and new element is drawn .In this way I was able to get the illusion of animation . Also I used SetInterval function and recursively called it with a delay of a "speed" (time in millisecond ) parameter which is decided by the user through a range bar in home page .

  6. Finally user gives input , adjusts speed (speed is set to default as 500ms) and see the animation in action .

  7. I minified the js and used it inside html to decrease load times .

Challenges I faced :

  1. The making of the animation without requestAnimationFrame() was a huge challenge . I made everything from scratch and that was very difficult .
  2. I didn't know anything about html forms and HTTP requests . I learnt flask , forms and templating . It was a challenge , but once the basics were clear it was easy .

Thanks you so much for giving me this platform :)

Share this project:

Updates