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:
1. ๐ 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.
2. ๐ฐ๏ธ Cosine Similarity Thresholds (The Match Laser)
-
In-Game: When you fire a category query (like
FOODorSPACE), the laser calculates the similarity value against targets it intersects. If the dot product similarity is below $\tau$, the laser deflects.
3. ๐ธ๏ธ 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 Under-the-Hood Engineering Journey
Creating a vector-math arcade game presented some unique engineering tasks:
1. 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:
function getSlicedSimilarity(vecA, vecB, dims) {
const a = vecA.slice(0, dims);
const b = vecB.slice(0, dims);
let dot = 0; let magA = 0; let magB = 0;
for (let i = 0; i < dims; i++) {
dot += a[i] * b[i];
magA += a[i] * a[i];
magB += b[i] * b[i];
}
if (magA === 0 || magB === 0) return 0;
return dot / (Math.sqrt(magA) * Math.sqrt(magB));
}
2. 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
function calculateHNSWPath(startX, startY, targetNode) {
if (targets.length === 0) return [];
// Find closest target to shooter (entry point)
let entryNode = targets[0];
let minDist = Math.hypot(startX - entryNode.x, startY - entryNode.y);
targets.forEach(t => {
const d = Math.hypot(startX - t.x, startY - t.y);
if (d < minDist) {
minDist = d;
entryNode = t;
}
});
const path = [entryNode];
let curr = entryNode;
const visited = new Set([curr]);
// Greedy routing towards targetNode along links
for (let step = 0; step < 10; step++) {
if (curr === targetNode) break;
// Find links from current node
const links = hnswLinks.filter(l => l.from === curr || l.to === curr);
let nextNode = null;
let bestDist = Math.hypot(curr.x - targetNode.x, curr.y - targetNode.y);
links.forEach(l => {
const neighbor = l.from === curr ? l.to : l.from;
if (!visited.has(neighbor)) {
const d = Math.hypot(neighbor.x - targetNode.x, neighbor.y - targetNode.y);
if (d < bestDist) {
bestDist = d;
nextNode = neighbor;
}
}
});
if (nextNode) {
curr = nextNode;
visited.add(curr);
path.push(curr);
} else {
// Jump directly if stuck
path.push(targetNode);
break;
}
}
return path;
}
๐ฌ 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?
UnitBuilds-CC
/
VECTOR-STRIKE
Asteroids inspired game to teach players about Graph DBs for LLMs
๐ฐ๏ธ Vector Strike: Semantic Search Database Defender
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.
Top comments (1)
And that marks 1 week straight of releasing a game a day ๐ I hope I can keep it up, but please dont be mad if I cant. Without going into details, life is really busy at the moment and I might not always have time to post, but I hope you enjoy the game!