Skip to content

Simply download and unpack. Everything should work out of the box if you have an internet connection.

Notifications You must be signed in to change notification settings

leonaburime/OOP-HTML5-Canvas

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

7 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Object-Oriented Programming for HTML5 Canvas

This site has been setup for you to use at http://canvas.civinia.com. Its something I built to try and get hired at Google. Sadly it did not work out ;-), but wherever there's failure theres another opportunity for success.

The purpose of the page is to show how certain data structures work ranging from various sorting algorithms, to linked lists, Djikstra's algorithm and so on. I slowed the Javascript engine using TweenMax.js so you can see how it operates. I did not use it for Data Structures because that would have required significantly more time and responbilities in my life were starting to pile up.

How to use...

There are four tabs at the top of the page named 'Data Structures','Node Connections', 'Search', and 'Sort'. Click on any one of them to see which options are available for each choice.

Sort - This section shows how each sort operates. There are six sorting algorithms listed here - Bubble, Insertion, Merge, Quick, Radix, and Selection Sort. TO RUN- Simply click 'Add Random Nodes' a bunch of times and press the green 'Solve' button.
The program will solve it right before your eyes. If you like after its done use the slider to go back over what you have just seen.

Search - This section shows how various searching algorithms work.
TO RUN - Click 'Add Random Nodes' for however many nodes you want to use and drag them into place. You must then connect ALL of them by double clicking on one which will be the parent and then another which will be the child. Some of the algorithms have special rules - such as not being able to add a node with a higher number when you have already created a similar relationship just like in the regular algorithm. The grey error/message prompt as well as the search box should tell you what to do next e.g. starting at a node, searching for a number.

Node Connections - This section simply gives you a dynamic table of which node is connected to which node by which line

Data Structures - This section shows how to build a linked list, a binary search tree, and an avl tree. TO RUN - You have to follow the grey prompt on how to add nodes when you want to run the algorithm. Simply clicking 'Add Random Node' will not work because some of the the data structures here are self sorting meaning they update on every insertion.

The page is very self-explanatory. I plan on updating some of the features in the near future but its not on my priority list right now unless someone wants to message me about something specific.

About

Simply download and unpack. Everything should work out of the box if you have an internet connection.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published