Sorting algorithms (https://tools.simonwillison.net/sort-algorithms)

Today in animated explanations built using Claude: I’ve always been a fan of animated demonstrations of sorting algorithms so I decided to spin some up on my phone using Claude Artifacts, then added Python’s timsort algorithm, then a feature to run them all at once. Here’s the full sequence of prompts (https://claude.ai/share/2c09f6f7-57ed-47eb-af2e-fc39ddc4c39f):

Interactive animated demos of the most common sorting algorithms

This gave me bubble sort, selection sort, insertion sort, merge sort, quick sort, and heap sort.

Add timsort, look up details in a clone of python/cpython from GitHub

Let’s add Python’s Timsort (https://en.wikipedia.org/wiki/Timsort)! Regular Claude chat can clone repos from GitHub these days. In the transcript you can see it clone the repo and then consult Objects/listsort.txt (https://github.com/python/cpython/blob/d19de375a204c74ab5f3a28ec42335bae139033d/Objects/listsort.txt) and Objects/listobject.c (https://github.com/python/cpython/blob/d19de375a204c74ab5f3a28ec42335bae139033d/Objects/listobject.c).

I don’t like the dark color scheme on the buttons, do better

Also add a “run all” button which shows smaller animated charts for every algorithm at once in a grid and runs them all at the same time

It came up with a color scheme I liked better, “do better” is a fun prompt, and now the “Run all” button produces this effect:

Tags: algorithms (https://simonwillison.net/tags/algorithms), computer-science (https://simonwillison.net/tags/computer-science), javascript (https://simonwillison.net/tags/javascript), sorting (https://simonwillison.net/tags/sorting), ai (https://simonwillison.net/tags/ai), explorables (https://simonwillison.net/tags/explorables), generative-ai (https://simonwillison.net/tags/generative-ai), llms (https://simonwillison.net/tags/llms), claude (https://simonwillison.net/tags/claude), vibe-coding (https://simonwillison.net/tags/vibe-coding)