swAPI

A p5.js library for visualizing sorting algorithms

Editable demo: https://openprocessing.org/sketch/2716521

Interactive web app: https://openprocessing.org/sketch/2330796

Usage

HTML:

<script src="https://cdn.jsdelivr.net/npm/p5"></script>
<script src="https://cdn.jsdelivr.net/gh/eyaler/swapi/index.min.js"></script>

JavaScript:

function setup() {
	createCanvas(windowWidth, windowHeight)
	const numbers = [8, 42, 16, 15, 23, 4, 8]
	setupBoxes(numbers)
	mySort(numbers)
}

function draw() {
	drawBoxes()
}

function mySort(numbers) {
	...
	animateBoxes(i, j, kOrMode)
}

Where:

kOrMode	Animation
false	Highlight box i and box j
k (index)	Also highlight box k
true, 'swap' or missing	Also wap box i and box j
'after'	Also insert box j after box i
'before' or 'insert'	Also insert box j before box i

Examples

Bubble sort

Highlighting two boxes and swapping

function mySort(numbers) {
	let lastSwap = numbers.length - 1
	while (lastSwap) {
		let lastIndex = lastSwap
		lastSwap = 0
		for (let i = 0; i < lastIndex; i++) {
			let swapped
			if (swapped = numbers[i] > numbers[i + 1]) {
				;[numbers[i], numbers[i + 1]] = [numbers[i + 1], numbers[i]]
				lastSwap = i
			}
			animateBoxes(i, i + 1, swapped)
		}
	}
}

Open in code editor

Selection sort

Highlighting three boxes and swapping two

function mySort(numbers) {
	for (let i = 0; i < numbers.length - 1; i++) {
		let indexOfSmallest = i
		for (let j = i + 1; j < numbers.length; j++) {
			if (numbers[j] < numbers[indexOfSmallest])
				indexOfSmallest = j
			animateBoxes(i, indexOfSmallest, j)
		}
		if (indexOfSmallest > i) {  // Check what happens if you relax this condition
			;[numbers[i], numbers[indexOfSmallest]] = [numbers[indexOfSmallest], numbers[i]]
			animateBoxes(i, indexOfSmallest)
		}
	}
}

Open in code editor

Selection sort with insertion

Highlighting three boxes and inserting the second box before the first

function mySort(numbers) {
	for (let i = 0; i < numbers.length - 1; i++) {
		let indexOfSmallest = i	
		for (let j = i + 1; j < numbers.length; j++) {
			if (numbers[j] < numbers[indexOfSmallest])
				indexOfSmallest = j
			animateBoxes(i, indexOfSmallest, j)
		}
		if (indexOfSmallest > i) {
			const smallest = numbers[indexOfSmallest]
			for (let j = indexOfSmallest; j > i; j--)
				numbers[j] = numbers[j - 1]
			numbers[i] = smallest
			animateBoxes(i, indexOfSmallest, 'before')
		}
	}
}

Open in code editor

Insertion sort

Highlighting two boxes and inserting the second box before the first

function mySort(numbers) {
	for (let i = 1; i < numbers.length; i++) {
		const current = numbers[i]
		let j
		for (j = i; j && numbers[j - 1] > current; j--) {
			numbers[j] = numbers[j - 1]
			animateBoxes(j - 1, i, false)
		}
		if (j)
			animateBoxes(j - 1, i, false)
		if (j < i) {
			numbers[j] = current
			animateBoxes(j, i, 'before')
		}
	}
}

Open in code editor