Arrays & algorithms
Cells stay put; values travel. Great for teaching sorting, searching and two-pointer techniques.
Syntax
array Title values 5 3 8 1 compare 0 1 swap 0 1 set 2 9 mark 3 sorted mark 0..2 done unmark 1 pointer i 2 pointer i none note text caption text wait 300ms
array Binary search for 23 values 2 5 8 12 16 23 38 56 72 91 pointer lo 0 pointer hi 9 pointer mid 4 mark 4 active unmark 4 mark 0,1,2,3,4 skipped pointer lo 5 pointer hi 9 pointer mid 7 mark 7 active unmark 7 mark 7,8,9 skipped pointer lo 5 pointer hi 6 pointer mid 5 mark 5 active mark 5 done note "Found 23 at index 5"
Generate from real code
import { traceArray } from '@vhyxchart/core';
const source = traceArray('Bubble sort', [5, 1, 4, 2, 8], (a) => {
for (let i = 0; i < a.values.length - 1; i++)
for (let j = 0; j < a.values.length - i - 1; j++)
if (a.compare(j, j + 1) > 0) a.swap(j, j + 1);
});array Bubble sort values 5 1 4 2 8 pointer i 4 compare 0 1 swap 0 1 compare 1 2 swap 1 2 compare 2 3 swap 2 3 compare 3 4 mark 4 done pointer i 3 compare 0 1 compare 1 2 swap 1 2 compare 2 3 mark 3 done pointer i 2 compare 0 1 compare 1 2 mark 2 done pointer i 1 compare 0 1 mark 1 done mark 0 done pointer i none note "Sorted — the largest value bubbled up each pass"