Ch 3 - Animate the queue operations

[redblobgames]

From @Rishav159:

For the bfs, dfs and ucs diagrams, there is a section in the right that shows a queue which contains the frontier nodes. As the algorithm progresses, the nodes in these queues are added and removed. Currently, the queue simply updates instantly. It would be nice to have animations allowing the user to see that some new nodes are added or if a node is removed

[Dragneel7]

@redblobgames to make it more intuitive we can add fade out transition for the nodes that are being popped out and provide a different queue that contains all the popped out nodes in the respective order.
Or at every instance we can show the reader 2 queues the present queue and the queue before the node being popped out so it becomes easier to do comparison about what is happening.
What are your thoughts regarding this?

[redblobgames]

Animations are really tricky to implement, especially because we have both a “step” style (previous/next buttons) and a “random access” style (using the slider). D3 has an animation system that might make this easier, but we are not using D3 in this chapter. So the animation should probably be done with a finite state machine.

I think before/after is making the reader compare the two to figure out where the changes are happening. Fade-out might work but I think we might want different animations for each diagram:

1. BFS: this is a queue so all the nodes can slide left each time a node is removed. That node moves left and fades out. New nodes can fade in and slide in from the right.
2. DFS: this is a stack so all the nodes do not move around. Instead, when the node is removed, it could fade out and move right. But this is a problem because new nodes also come in from the right. So maybe removed nodes should move up or down instead of right, and the new nodes slide in from the right.
3. UCS: the node diagram on the right is different than BFS and DFS. For this one the priority queue displayed on the right is currently unordered. Should it be ordered? I don't know. For animation the node might move from the left side ("Priority queue") to the right side ("Explored nodes") instead of fading out.

In all of these algorithms there are really two separate phases that could be animated in sequence:

1. The neighbors of the current node (green) are expanded. This animation can add new nodes into the frontier.
2. The current node is removed. This animation can move the node from the frontier to the explored set.