what-is-an-algorithm #

Visualizes an algorithm as a finite, ordered procedure that transforms INPUT -> OUTPUT. A data token moves through the pipeline while the procedure box highlights steps (READ, PROCESS, WRITE) to show sequencing and transformation.

canvasclick to interact

⏮◀◀▶▶STEP0.25x1xZOOM

t=0s

practical uses #

01.Explaining the basic Input-Process-Output model to beginners
02.Introducing step-by-step reasoning before teaching specific algorithms (sorting/searching)
03.Demonstrating how data is transformed through well-defined, finite steps

technical notes #

Pure Canvas2D draw function with time-based loop (~3.6s). Uses responsive scaling, grid snapping for a blocky aesthetic, staged animation (input, procedure, output), and step highlighting synced to token movement. Colors use GREEN/GREEN_DIM on black.

← maximum-likelihood-estimation convex-functions →