I am currently working on a web application that inputs a graph from the user in the adjacency list format, and based on that, it performs various algorithms, such as Djisktra algorithm, Bellman Ford, BFS, DFS etc. The only issue I am facing is about animations on the graph.
http://postimg.org/image/qa4uto9gd/ (A snapshot of my work)
Basically, the graph drawn here in red is the graph wherein I want to apply the transitions during BFS/DFS, somewhat similar to this http://visualgo.net/dfsbfs.html minus the edge transitions for now.
I am using HTML5 canvas to draw graphs, wherein each node is represented using a circle, and each of the edge will be an arrow. I have an array that stores the X and Y coordinates of each node/circle. However, I want to show a visual representation of the BFS/DFS effect on my graph, i.e. when BFS is being run,
- The node under scrutiny transitions to some color(say teal)
- Then the neighbourhood nodes undergo transition to some color(say teal again)
- Then the node originally under scrutiny undergoes a color transition to some darker color(say darker teal) to show that its scanning of neighbours is complete.
The above color changing algorithm is somehow similar to the one given in Introduction to Algorithms, Third Edition, Thomas H. Cormen I am stuck in the implementation of the animation part somehow. Can anyone suggest me how can I perform these transitions using jQuery?
You can't animate an output on canvas with jQuery, because the contents are not DOM nodes. jQuery works with DOM nodes (elements) and their properties for the animation, so with the canvas itself (width, height etc. - quite tricky to animate the canvas itself and maintain the aspect ration of the output within it, but a discussion for another time). The example you gave uses SVG (DOM nodes) so they can be manipulated via jQuery. You need plain old javascript to color the "nodes" your canvas outputs. Look fiddle
,pick it apart and apply as needed.Question seems duplicate of: Continuous Color Transition