mergesort: description using animated table

lectures/complexity/slides.qmd

@@ -162,55 +162,55 @@ bubble_sort(test_values)
 ::::
 
 
-## Merge Sort (1/3) {.leftalign}
+## Merge Sort (1/3) {auto-animate=true}
 
+![](static/merge_sort01.png){data-id="img"}
 
-:::{.r-stack}
-
-![](static/merge_sort01.png){.fragment fragment-index=1}
-
-![](static/merge_sort02.png){.fragment fragment-index=2}
+## Merge Sort (1/3) {auto-animate=true}
 
-![](static/merge_sort03.png){.fragment fragment-index=3}
+![](static/merge_sort02.png){data-id="img"}
 
-![](static/merge_sort04.png){.fragment fragment-index=4}
+<table class="codelist">
+<tr><td colspan="4" data-id="sp1">left, right = split(values)</td></tr>
+<tr><td>sort(left)</td><td>sort(right)</td></tr>
+<tr><td colspan="4" data-id="j1">join(left, right)</td></tr>
+</table>
 
-![](static/merge_sort05.png){.fragment fragment-index=5}
-
-![](static/merge_sort06.png){.fragment fragment-index=6}
-
-:::
+## Merge Sort (1/3) {auto-animate=true}
 
+![](static/merge_sort02.png){data-id="img"}
 
-:::{.fragment fragment-index=1}
+<table class="codelist">
+<tr><td colspan="4" data-id="sp1">left, right = split(values)</td></tr>
+<tr class="l1"><td colspan="2" data-id="sp21">l1, r1 = split(left)</td><td colspan="2" data-id="sp22">l2, r2 = split(right)</td></tr>
+<tr class="l1"><td>sort(l1)</td><td>sort(r1)</td><td>sort(l2)</td><td>sort(r2)</td></tr>
+<tr class="l1"><td colspan="2"data-id="j21">left = join(l1, r1)</td><td colspan="2" data-id="j22">right = join(l2, r2)</td></tr>
+<tr><td colspan="4" data-id="j1">join(left, right)</td></tr>
+</table>
 
-1. Array with $n$ elements
+## Merge Sort (1/3) {auto-animate=true}
 
-:::
+![](static/merge_sort03.png){data-id="img"}
 
-:::{.fragment fragment-index=2}
+<table class="codelist">
+<tr><td colspan="4" data-id="sp1">left, right = split(values)</td></tr>
+<tr class="l1"><td colspan="2" data-id="sp21">l1, r1 = split(left)</td><td colspan="2" data-id="sp22">l2, r2 = split(right)</td></tr>
+<tr class="l2"><td>split...</td><td>split...</td><td>split...</td><td>split...</td></tr>
+<tr class="l2"><td>[x1]</td><td>[x2]</td><td>[x3]</td><td>...</td></tr>
+<tr class="l2"><td>join...</td><td>join...</td><td>join...</td><td>join...</td></tr>
+<tr class="l1"><td colspan="2"data-id="j21">left = join(l1, r1)</td><td colspan="2" data-id="j22">right = join(l2, r2)</td></tr>
+<tr><td colspan="4" data-id="j1">join(left, right)</td></tr>
+</table>
 
-2. Split array in two groups
+## Merge Sort (1/3) {auto-animate=true}
 
-:::
+![](static/merge_sort05.png){data-id="img"}
 
-:::{.fragment fragment-index=4}
-
-3. Sort each group (using Merge Sort, recursively)
-
-:::
-
-:::{.fragment fragment-index=5}
-
-4. Merge groups, keep order
-
-:::
-
-:::{.fragment fragment-index=6}
-
-5. Recurse until done
-
-:::
+<table class="codelist">
+<tr><td colspan="4" data-id="sp1">left, right = split(values)</td></tr>
+<tr><td>sort(left)</td><td>sort(right)</td></tr>
+<tr><td colspan="4" data-id="j1">join(left, right)</td></tr>
+</table>
 
 
 ## Merge Sort (2/3)

lectures/custom.scss

@@ -109,3 +109,24 @@ kbd, .kbd {
 .reveal .handson.slide-background {
   background-color: var(--dark-bg-color);
 }
+
+.reveal table.codelist {
+    font-size: .8em;
+    width: 100%;
+    font-family: monospace;
+    border: none;
+    tr {
+        border: none;
+        border-left: solid;
+        &.l1 {
+            background-color: #ddd;
+        }
+        &.l2 {
+            background-color: #ccc;
+        }
+        td {
+            border: none;
+            border-right: solid;
+        }
+    }
+}