ANIMATIX WALKTHROUGH · DATA STRUCTURES

Where Keys Live

  • 4 interactive scenes
  • WebGPU 60 FPS vector canvas
  • O(1) arithmetic lookup
  • Zero search iterations

A hash table is the fundamental associative data structure of modern computing: the hash decides where a key lives, so finding it later needs no search. Eight buckets, letter sum modulo arithmetic, collision chaining, and instant probe hits and misses.

Fig 00 // Complete 3-Stage Hash Lifecycle
pkg-slim · 1.6MB 60 FPS WEBGPU
Complete Suite · Declarative Storage

Hash Table Lifecycle

Watch keys hash into position, collide and form linked bucket chains, and retrieve in constant time with deterministic mathematical indices.

scene.amx ↗
Buckets: 8 Direct Slots Hash Function: Σ(letter_pos) mod 8 Collision Strategy: Singly-Linked Chaining
01
Key Ingress

Arithmetic maps "cat" (0), "dog" (2), and "sun" (6) directly into buckets.

02
Collision Chaining

"owl" collides with "dog" at bucket 2 and links below without corruption.

03
Direct Retrieval

Queries compute bucket index directly, verifying keys with 1 or 0 hops.

Fig 01 // Deterministic Key Ingestion: Mod 8
pkg-slim · 1.6MB 60 FPS WEBGPU
Stage 01 · Ingestion Arithmetic

Where Keys Live

Add letter positions (a=1, b=2, …), then take mod 8. cat = 3+1+20 = 24 mod 8 = 0. The hash dictates where a key resides, eliminating scan overhead.

buckets.amx ↗
Key "cat": 24 mod 8 → Bucket 0 Key "dog": 26 mod 8 → Bucket 2 Key "sun": 54 mod 8 → Bucket 6
Fig 02 // Slot Contention & Linked Chaining
pkg-slim · 1.6MB 60 FPS WEBGPU
Stage 02 · Graceful Degradation

Two Keys, One Bucket

With unbounded keys and finite buckets, collisions are mathematically inevitable. owl hashes to bucket 2 where dog already lives. The bucket quietly forms a linked list, degrading to a 2-item traversal rather than failing.

collision.amx ↗
Conflict: Bucket 2 (dog & owl) Mechanism: Dynamic Linked Pointer Overhead: O(k) chain length
Fig 03 // Arithmetic Verification: Hits & Misses
pkg-slim · 1.6MB 60 FPS WEBGPU
Stage 03 · Zero-Search Retrieval

Lookup: Hash First, Compare After

Retrieval runs the ingestion logic in reverse: query sun hashes to 6 (immediate hit), query owl checks bucket 2 and traverses the link (chained hit), and query cow checks bucket 1 (empty slot, immediate O(1) miss).

lookup.amx ↗
Direct Hit: "sun" → bucket 6 (1 compare) Chained Hit: "owl" → bucket 2 (2 compares) Empty Miss: "cow" → bucket 1 (0 compares)