Animate a Sorting Algorithm by Hand, Step by Step
Published · Updated · Jakub Kuźnicki
Update policy: product facts, cited sources, and checked output evidence are revalidated when they change. See the author methodology.
Pseudocode on a slide rarely shows the comparisons happening
A sorting algorithm is one of the first places a static slide fails a learner: the code sits still while the thing that actually matters, which pair gets compared and swapped, and when, happens only in the reader's head. I paste a working bubble sort into Scribe and let the pen draw it in the order the interpreter would run it, then use the drawn order as the spine of the explanation instead of a bullet list of rules.
The fixture: a nine-line bubble sort
function bubbleSort(nums) {
for (let i = 0; i < nums.length; i++) {
for (let j = 0; j < nums.length - i - 1; j++) {
if (nums[j] > nums[j + 1]) {
[nums[j], nums[j + 1]] = [nums[j + 1], nums[j]];
}
}
}
}This is the classic textbook bubble sort: two nested loops, one comparison, one conditional swap. Scribe's JavaScript profile colors the keywords, the loop counters and the swap statement distinctly, so a viewer can point at the outer loop, the inner loop and the comparison as three separate, colored shapes rather than one grey block of text.
What the video draws, and what you still have to say
Scribe draws the source text stroke by stroke; it does not animate array values swapping position on screen. That distinction matters for an honest walkthrough: the clip gives you the code, revealed in execution order, as a spine to talk over. The actual comparisons, that index 0 and index 1 get compared first, that a swap only happens when the left value is bigger, are the words you add while the relevant lines are visible. Treat the video as the whiteboard a teacher would normally be drawing by hand, not as a drop-in substitute for narrating the algorithm.
Where the two-loop shape helps a learner
- Pointing at the outer loop's i and asking what it tracks (how many passes have completed) before touching the inner loop at all.
- Pausing on the comparison line specifically, since that single conditional is the entire sorting decision; everything else is bookkeeping.
- Naming the swap line as the only place data actually moves, which is easy to miss when nums[j] and nums[j + 1] look like just another line of code.
The same approach works for a recursive function, a binary search, or any algorithm where the reader needs to see one small piece of logic in the context of the loop or recursion around it, not just the isolated line.
When a static diagram is still the better tool
A single comparison-and-swap operation doesn't need a video; a two-frame diagram says it faster. Reach for a drawn walkthrough when the audience needs to see a whole pass, or several passes, in the order they actually execute, which is exactly the part a still image or a wall of pseudocode tends to flatten.
Try it with your own algorithm
Preview is free with no account needed; Scribe lets you paste any of the eleven supported languages and watch the stroke order before deciding whether to export. The educator use case page has more on teaching workflows, and pricing covers what a signed-in FREE export includes.
For a shorter, narrated example of the same paste-and-draw path applied to a bug fix instead of an algorithm, see explain your code in 60 seconds; for the general case for building any explainer this way, read how to make a hand-drawn explainer.