Have you ever wondered how vector databases like Pinecone, Milvus, Qdrant, or pgvector search through billions of high-dimensional documents in milliseconds? Under the hood, they map semantic concepts into dense numerical vectors, calculate multidimensional cosine similarity angles, and traverse proximity graphs to locate nearest neighbors without scanning the entire database.
To help you visualize how vector databases and embeddings actually operate, I built a retro-vector arcade game:
#
🛰️ Vector Strike: Database Defender
Play in Fullscreen Mode (if the embed sizing is tight)
#
🛠️ Choose Your Database Optimizations
Your mission as a Vector Database (VDB) administrator is to configure your query settings and index structures to defend your index nodes:
📏 Similarity Threshold (τ): Tweak the match threshold slider. High thresholds require near-identical semantic matches but protect your index, whereas lower thresholds act like a splash-damage laser but risk matching incorrect clusters. #
🪐 Embedding Dimensions (2D $\rightarrow$ 8D $\rightarrow$ 32D): Higher dimensions isolate categories and guarantee precise hits. Lowering dimensions collapses the projection space, causing spatial overlap that results in false deflections and friendly-fire query failures. #
⚡ Proximity Indexing (Flat Scan $\rightarrow$ HNSW Graph): #
Flat Scan: Runs a brute-force linear search over all targets. It causes computation latency spikes as more query objects arrive. #
HNSW (Hierarchical Navigable Small World): Dynamically builds proximity links between adjacent node targets. The turret traverses vectors along the nearest-neighbor graph, snap-locking onto targets with zero lookup latency.
#
🧬 Playable ML Concepts Explained
Here is how the arcade mechanics map to production vector databases:
- 🔀 Multidimensional Projections (Dimension collapse)
In-Game: You can toggle between 2D, 8D, and 32D space. In 32D space, the categories are cleanly separated. In 2D space, the database collapses, and you'll find space rockets getting deflected by vehicle lasers because they overlap on the collapsed axes.
💾 The Real-World Counterpart
Embeddings map textual semantics into high-dimensional space (e.g., 1536 dimensions for OpenAI's text-embedding-3-small
). Reducing dimensionality (via PCA or projection) squeezes distinct concepts onto similar planes.
⚠️ How it affects VDBs
When dimensions collapse, semantic resolution is lost. A vector database will begin returning false matches because unrelated words map to nearby coordinates on the truncated plane.
- 🛰️ Cosine Similarity Thresholds (The Match Laser)
In-Game: When you fire a category query (like FOOD
or SPACE
), the laser calculates the similarity value against targets it intersects. If the dot product similarity is below $\tau$, the laser deflects.
🗜️ The Real-World Counterpart
Cosine similarity measures the cosine of the angle between two multi-dimensional vectors. It is a scale-invariant metric commonly used to check how close two documents are in embedding space.
⚠️ How it affects VDBs
Production search pipelines filter results based on a minimum similarity score threshold. Setting the threshold too high returns zero results, while setting it too low returns irrelevant noise.
- 🕸️ HNSW Graph Traversals (Nearest-Neighbor Search)
In-Game: In HNSW mode, you see thin green link lines draw between targets. Firing the laser instantly traces a route along the lines, hopping from node to node to hit the target instantly rather than flying through the screen linearly.
🔋 The Real-World Counterpart
HNSW (Hierarchical Navigable Small World) structures vectors into multi-layer proximity graphs. Instead of comparing the query vector against every single vector in the database, the search navigates the graph towards the closest neighbors.
🚀 How it affects VDBs
By avoiding exhaustive linear scanning, HNSW slashes search latency from $O(N)$ to logarithmic time, allowing databases to query millions of records in microseconds.
#
🛠️ The Under-the-Hood Engineering Journey
Creating a vector-math arcade game presented some unique engineering tasks:
- Simulating Dimensionality Collapse in JS
To let players experience "Dimensional Collapse" in real-time, we precompute a 32-dimensional coordinate matrix for all words.
The Solution: When the player changes the dimension setting, the engine dynamically slices the vector coordinates vec.slice(0, activeDim)
and normalizes the sliced vectors before running the dot product:
- High-Performance HNSW Traversal Visualization
To visualize greedy graph routing on canvas, we calculate proximity paths dynamically using a distance heap. When HNSW mode is active, the laser tracks the step-by-step hops along target coordinates, firing audio triggers at each step.
Click to see the Greedy HNSW Traversal path generation
💬 Let's Discuss:
- What is your high score defending the Vector Database?
- Did you notice how 2D mode causes spaceships and rockets to deflect matching vectors due to axis collapse?
- Which index type did you find more visually pleasing: Flat or HNSW traversal paths?
Asteroids inspired game to teach players about Graph DBs for LLMs
An educational retro-oscilloscope vector graphics game that maps database defense mechanics directly to vector embeddings, cosine similarity thresholds, and vector graph index traversal (Flat Scan vs. HNSW Graph Routing).
🎮 The Concept #
In Vector Strike, you play as a Vector Database administrator defending your vector database partitions against incoming query concepts (represented by descending labeled target clusters).
To eliminate targets, you press keys 1
-5
to instantly fire the matching category laser and match target embeddings using Cosine Similarity:
Embedding Accuracy: Toggle dimensionality (2D, 8D, 32D). Lower dimensions (2D) collapse projection spaces and travel super fast, but cause spatial collisions and false deflections. Higher dimensions (32D) travel slower, but accurately filter complex overlap concepts. #
Match Tolerance (τ): Adjust your matching threshold slider. Tighten it for score multipliers on exact matches, or loosen…
Disclaimer: AI was used throughout this project, it is just fitting that it would co-author with me, so special thanks to the Foundry for its tireless hours toiling away and Gemini for producing the cover image.