Graph animation code step by step: Written in Python/PyGame to animate a BFS Graph algorithm to help visualize how the algorithm works. (play with code at https://repl.it/talk/share/Graph-Anim...
This is a video that shows how to animate a visual of a the Breadth First Search (BFS). As the algorithm steps though searching a graph, each step in the algorithm show progress by coloring nodes and edges so that a CS Data Structure student can understand how the BFS algorithm works
I step though the code within the repl.it IDE environment, which is a great IDE environment for student and coders to play with code and share and publish their work.
I show the development of the code in three stages, so you can see how I incrementally develop the program.
Links:
To repl.it code base: https://repl.it/talk/share/Graph-Anim...
To my YouTube BFS and DFS animations set to music:
BFS: • Animated Visualization BFS Algorithm:...
DFS: • Animation of Graph DFS(depth first se...
How to use sprites: • PyGame draw cycle, flip, sprites, and...
Video Chapters:
00:00 Intro to my popular YouTube BFS animation set to music
00:29 Repl.it introduction
00:56 The main code demo program
02:11 Drawing the Nodes as circles
04:43 Trick to drawing circle with inside fill color of desired thickness
06:24 Adding the edges, with more colors
10:43 refactor drawing circles into method
11:05 Doing the while animation
12:43 refactor all drawing into one method
13:18 add update method to do end of loop clock and display update tasks
14:40 the main algorithm loop, we set colors when things happen
17:04 What to do after, learn about using sprites in pygame