A two-player WebGL game that turns linear combination, the determinant, and eigenvectors into three connected garden chambers — one continuous world, crossed from dusk to moonlit night.
Linear algebra is usually a solitary screen task — vectors are symbols on a flat plane, rotated and scaled in silence.
In plain terms
Two players share control of one vector: one sets its length, the other its angle. Neither can solve a puzzle alone — so they have to talk, negotiate, and move together. The math is learned through the body and through conversation, not memorized symbols.
I care most about learners with dyscalculia or spatial anxiety, for whom the silent, symbol-heavy screen is a threshold they can't cross alone. I built the design on four ideas taken from the research:
Positive interdependenceCSCL
Success is shared. Length and angle are split across two people, so no one can opt out.
Shared attentionTUI
One screen, not two. Both players look at the same garden, so language does the work.
Asymmetric cooperationGAME
Unequal control forces negotiation — each player has to teach the other what their half does.
Embodied cognitionHCI
The hand remembers what the eye forgets. Rotation becomes a movement, not a rule.
CSCL Computer-Supported Collaborative LearningTUI Tangible User InterfaceHCI Human–Computer Interaction
The core mechanic · three steps
STEP 01
Player A · LengthKeys WS
Pushes or pulls to set how long the vector is.
STEP 02
Player B · AngleKeys AD
Rotates to set which way the vector points.
STEP 03
Together · The goalTalk & align
Neither lands the tip alone. They talk it onto the target.
Collaboration measurably helps math · effect sizes (Cohen's d)
Group task performanceChen et al. · 2018 · N = 425
0.89
Cooperative math, G10–11Ridwan et al. · 2022
0.87
Skill acquisitionChen et al. · 2018
0.64
CSCL achievementMeta-analysis · 2021 · N = 3,474
0.52
How to read it — these are effect sizes (Cohen's d); anything above 0.8 is a large effect. Collaborative math learning clears that bar repeatedly — the case for building this was empirical, not just aesthetic.
From evidence to design — the throughline
EvidenceCollaboration lifts outcomes across 400+ studies (ES 0.4–0.9).
→
Decision. Co-op is the default mode, not a bonus level.
EvidenceAsymmetric "public-goods" games provoke the deepest strategy talk (game theory).
→
Decision. Split one vector — A owns length, B owns angle. Neither can solo it.
Decision.Direct-drag handles now; Arduino knobs next — never bare sliders.
Bottom line
The research is clear that collaboration helps math. Threshold Garden is my attempt to make that collaboration physical — to put the math in the space between two hands.
Selected sources — Chen, Wang, Kirschner & Tsai (2018), Review of Educational Research · Ridwan et al. (2022) · Suresh et al. (2021), the TalkMoves corpus · 2021 CSCL meta-analysis (N = 3,474). Full bibliography available on request.
02
02 · Discovery — listening first
User interviews
What I asked: where exactly does linear algebra stop making sense — and who is with you when it does?
Format
Semi-structured · 45–60 min
Synthesis
Affinity mapping · 142 coded notes
Setting
In school · familiar classroom
Ethics
Guardian consent · anonymized
8
semi-structured interviews 45–60 min each
4
learners, G10–11 2 with dyscalculia
2
math teachers 35–48 per class
2
educational game designers
Affinity themes · N = 8 · mentions
"I remember by doing, not by reading"kinesthetic preference across both learner groups
7/8
"Symbols feel arbitrary"det, λ, basis — names without bodies
6/8
Fear of being slow in front of othersstrongest in dyscalculic learners
5/8
Working in pairs lowers the stakes"if we're both confused, it's the problem's fault"
5/8
"GeoGebra feels like a tool, not a place"existing software lacks atmosphere & ritual
4/8
"I can rotate it in my hands. I cannot rotate it in my head."P3 · learner, dyscalculia · on mental rotation tasks
"When the whole class is silent, asking 'why' feels like confessing."P6 · learner, G11 · on classroom dynamics
"I don't need them to compute faster. I need them to stop being afraid of the grid."P7 · teacher, 12 yrs · on what success looks like
Personas · behavioral extremes from the interview data
"I know the answer is a place, not a number. I just can't find the road."
Goals
Pass linear algebra without memorizing recipes
Understand why det can be negative
Never be the slowest visible person in the room
Frustrations
Numbers swap places when she holds 2+ variables
Mouse + slider UIs punish shaky precision
Help always arrives as more symbols
symbols
shapes & spacestrongly spatial
reading
touching & doingstrongly hands-on
alone
with a partnerclearly with others
What this means for the design — she enters through the hands and needs a partner to share the load. A symbol-first, solo, precision-heavy screen loses her on contact.
Mr. Chen · the stretched teacher
38 · teaches 3 classes of 40+ · 15 min prep per lesson
"I have one body and forty pairs of eyes. The tool has to do the noticing for me."
Goals
An activity that runs itself for 20 minutes
Visible evidence of who is stuck where
Concepts that survive until the exam
Frustrations
Lab software needs 10 min of setup he doesn't have
Pair work collapses into one student driving
"Fun" tools that quietly drop the math
lecture
facilitateleans facilitate
skeptical
eagercautiously open
What this means for the design — he'll adopt a tool that facilitates and shows him who is stuck — but only if it runs itself with near-zero setup and never quietly drops the math.
Tool landscape · positioning
FIG · the open quadrant — precise tools were solitary (GeoGebra, Desmos); social tools stayed symbolic (VMT, pair worksheets). The collaborative-and-embodied quadrant was nearly empty. That gap became my thesis.
Classroom observation · 3 sessions · 120 min
OB · 01
One mouse, one driver
In shared-laptop pair work, the stronger student held the mouse 83% of observed time. The partner's role decayed to witness.
OB · 02
Gesture precedes language
Students traced vectors in the air seconds before they could verbalize them — hands consistently ahead of words.
OB · 03
Errors hide indoors
Mistakes on private screens stayed private; the same error on the projector sparked group debugging within seconds.
"Hands were always ahead of words, and words ahead of symbols. So I gave the game one job: let a learner enter at the hand and exit at the symbol."Field synthesis · design implication
Target · 01
Physical input that forgives imprecision
Coarse, damped controls — shaky hands land on the same math as steady ones.
Target · 02
Forced — but warm — interdependence
Neither role is optional; neither role is the smart one. Space is a shared ritual.
Target · 03
Math state visible to a third pair of eyes
A teacher reads who is stuck where from across the room, without interrupting.
03
03 · Concept & world — one garden, three hours of light
Core concept
One matrix. Three identities. One day in the garden.
I gave each identity of a matrix its own garden: lines become bridges, areas become courtyards, axes become gates.
Each chapter translates a mathematical property into a spatial verb. The camera moves continuously from dusk to daylight to moonlit night; the world never cuts away.
Art direction · 3 chapters = 3 hours of light · art is the pedagogy
Dusk
Desert oasis · Union Bridge
CH.1 · LINEAR COMBINATION
Nested thresholds repeat vector composition in architecture; the traveler crosses only after r reaches the gate. Dusk makes addition a journey.
terracotta · sand · turquoise
Daylight
Lotus court · Measuring Court
CH.2 · DETERMINANT AS AREA
Positive area is a green lotus leaf; swap the columns and the court turns to its cold-blue underside — the sign is written into the material. Near collinearity, the platform collapses into a line.
lotus pink · mint · leaf green
Moonlit night
Bamboo night · Resonance Axis
CH.3 · EIGEN AXIS
Twelve gates and twelve paths radiate from a moon dial: x turns like a clock hand and Ax chases it. The moonbeam curtains are the theoretical eigen-axes — the math glows before it is named.
indigo · moon white · amber
Scene design studies · reconstructed from the build's geometry
STUDY 01 — bridge composition: nested gates on one sightline; the target ring sits where the dusk sun lands.STUDY 02 — court plan & waterline section: one platform, two readable states — leaf face above, cold underside below.STUDY 03 — moon-dial radial plan: 12 gates · 12 paths · 72 fine ticks; every direction is a walkable hour.STUDY 04 — character sheet: silhouette first — hood, cone, scarf; the lamp is the only light he owns. Idle hang · walk swing ≈ 50° · run streamline.
Design studies (reconstructed) — drawn from the shipped scene geometry to document composition intent; not scanned originals.
04
04 · Character & modeling — a witness, not an avatar
The traveler · 《送灯》 Carrying the Lamp
Not an avatar. A consequence.
The faceless figure carries a lamp through the garden, and the lamp's brightness is the resonance — how close the pair's math is to the threshold. He waits until a valid mathematical path exists, then walks it. Correctness becomes an event someone can witness.
U direction / column 1V scale / column 2SPACE shared confirmation
Modeling diagram · one character, three channels
FIG · the traveler is a layered controller, not a rig: posture, cloth and lamp read the same walk but never feed each other impulses.
The traveler, in place · procedural — hood, cone, verlet scarf, lamp · wire / clay / lit
05
05 · Gameplay — one garden, one day, three thresholds
The formula stays precise. The task becomes spatial.
Every chapter keeps one exact identity on screen and turns its terms into things two people can hold. The pass conditions are quantified and always visible: a full bar always means Space works.
Ⅰ
Union Bridge
Three-phase ramp — one skill at a time
r = u + v
①
Length onlyreach the gate ring
WS
②
Angle onlypoint at the gate
AD
③
Compose u + vland r in the gate's heart
A/DW/SJ/LI/K
WIN · ‖r − target‖ < 1.2 · bar full ⇔ Space
Real gameplay · Union Bridge
On confirm, a traveler walks the bridge the players just built — vector addition becomes a path you watch being walked.
Ⅱ
Measuring Court
u, v become the columns of A — spanning signed area
det(u,v) = uₓv_y − u_yvₓ
·
Tune u / tune vor drag vector tips directly
A/DW/SJ/LI/K
·
Swap columnswatch the sign flip — court mirrors underwater
WIN · lock both axes (repeated root: one) · chimes ring the lock
Real gameplay · Resonance Axis
Moonbeam curtains stand along the theoretical eigen-axes and brighten as you approach — the math glows before you reach it.
Co-op · defaultU + V
U owns direction / column 1, V owns scale / column 2. Space is a shared ritual — both must mean it.
Solotwo hands
One toggle: "left hand u / right hand v." Demos never depend on a second player.
GestureMediaPipe
The same split maps to bare hands on camera — pinch for length, turn for angle.
Final gameplay · four key moments — live loops captured in-engine
MOMENT 01 · DUSKThe walk across r
The traveler crosses the vector bridge the pair just composed — addition, made walkable, applauded by no one but the water.
MOMENT 02 · DAYThe leaf flips
Swap columns and the courtyard mirrors underwater — the lotus leaf shows its cold-blue underside. Sign = orientation, written in material.
MOMENT 03 · NIGHTAlignment, audible
Ax sweeps as x rotates; at alignment three lines collapse into one, the moonbeam brightens, and a single chime confirms what the eyes suspected.
MOMENT 04 · ENDINGFireflies & the chain
Moonlight turns gold, fireflies rise, and the three-chapter knowledge chain appears in one line: r = u + v → det(u,v) → Ax = λx.
06
06 · Interface — intuition in the world, precision at the edge
Actual game UI · three layers
Three layers. One mathematical state.
The 3D world carries intuition; the edges carry precision. All three layers redraw every frame from the same state object — nothing on screen can disagree with the math.
ABC
One real frame, Chapter 2 · the world stays in the middle; teaching lives at the edges. All three layers redraw from the same state object every frame.
A / REFERENCE
Learn panel
A small looping concept animation, one sentence, and concept tabs (area · sign · collapse). It auto-focuses as the phenomenon changes — reference, not lecture. Ten hand-built loops cover length, angle, composition, area, sign, collapse, eigen sweep and λ.
B / JUST IN TIME
Event teaching card
Appears when the player causes a phenomenon, never on a timer: first negative det → "sign = orientation"; first near-collinearity → "area collapses into a line." The formula is introduced at the moment of consequence.
C / PRECISION
Equation + plot + threshold
The right edge exposes live value-substituted equations (det = 27.34 in this frame), orientation, 2D geometry with labeled tips, remaining error against target +47.08, the keys, and the confirm state. A full bar always means Space works.
Input pipeline · three hands, one state
State routing · one source of truth, four outputs
Hands as controllers · verified on device
The camera is the third input.
MediaPipe hand tracking is vendored into the build and runs entirely on the player's machine — no video ever leaves the laptop. A pinch reads as length, a turn of the wrist as angle, and both feed the same damped state as the keys, so a shaking hand still lands on the same mathematics.
Tested live on a physical webcam · the same U / V split, no keyboard required.
Five learning-design principles
01
Dual representation, always in sync
3D carries intuition; 2D carries precision. Both redraw from one state, every frame.
02
Event-driven teaching
Explain at the moment of cause, never as a front-loaded lecture.
03
Collapsible reference
Help stays available without occupying the world.
04
Art as feedback
Materials, light and sound repeat the mathematical state.
05
Transparent judge
Pass conditions are quantified on screen — no guessing what the game wants.
What changed · interface iteration ledger
tutorial as a wall of text→three-phase ramp + collapsible helpsliders and keys only→direct drag + keys + hand gesturewin condition hidden→number, bar and action always agree"match length" in Ch.3 (wrong model)→tune λ; win = residual ‖Ax−λx‖/‖x‖
07
07 · Architecture & craft — the system behind the garden
Any static server runs it — classrooms don't have npm. python3 -m http.server is the whole deploy.
ACCESS
02
Source transform over rewrite
Three finished standalone levels were injected, not rewritten — atmosphere ported wholesale, regressions isolated per level.
VELOCITY
03
State persisted, judged transparently
Progress survives refresh; every threshold is visible. Trust is a technical feature.
TRUST
Performance forensics · the cinematic hitch
Draw calls fell 3×. Frame time rose 4×. The bottleneck was never the objects.
The fixes · measured before → after
Reflection pass during cutscenescapped at 20 Hz only while the camera flies · normal play untouched
3.13 → 0.78 ms
Scarf idle jittertraveling ripple moved out of the physics solver — geometry only
3.98 → 0.10 u/s · ÷39
Traveler updates in transitownership: the shell holds the walk; levels yield
2 → 1 call / frame
Traveler buried in the marker stonefoot height blended deck ↔ stone-top by horizontal distance
0.71 u → 0 frames below
Cutscene resolution governor
1.000.820.68
Drops a tier below 51 fps, restores above 69, with a 1.1 s cooldown — active only during cinematics, where the camera is flying and softness is invisible. Capable machines never leave 1.00.
The other hitch · shader compilation
The 1–2 s freeze at chapter hand-off was programs compiling on first sight. Prewarm only works if it reproduces the real light configuration — light count is part of the program cache key. Verified objectively with renderer.info.programs.
Sound as judge: Ch.3's wind chimes are decoration and an audible win condition — higher resonance, livelier sway, denser tings. Locking a direction plays one clear note; locking an axis, a pentatonic arpeggio (WebAudio sine + detuned triangle).
08
08 · Process — drafted, broken, rebuilt
My V0 was three separate mini-apps behind iframes — correct math, no garden.
The draft proved the math pipeline. Everything spatial — continuity, atmosphere, one garden growing across a day — came from iteration. Every pass shipped with notes; the full ledger lives in the project documentation.
"Iteration you can't audit is just churn."working principle · 7 documented passes + 30 logged commits
APR → AUG 2026 · 7 documented passes · 30+ logged commits in the final sprint · ≈27,000 lines of hand-written JS / CSS / HTML · zero-dependency deploy
The first draft
The current build
One world; the camera travels through all three chambers.
What the draft taught us · V0 → current
Three scenes, hard cuts
→
One continuous garden, camera travels
world model
Tutorial as wall of text
→
Three-phase ramp: length → angle → compose
learning
Ch.3: "adjust length" (wrong model)
→
V tunes λ; win = residual ‖Ax−λx‖/‖x‖
mathematical model
Sliders only
→
Direct drag on vector tips + keys + gesture
interaction
Guess the win condition
→
Quantified thresholds; bar full ⇔ Space
clarity
The same three rooms, four builds apart · real captures from surviving builds
2026-05 · Ch.1, standalone — an island in a void; no dusk, no dunes, no traveler2026-05 · Ch.2, "channel edition" — the court before the leaf language2026-05 · Ch.3, "seamless edition" — axes without a dial to read them2026-08 · Ch.1, current — the same math, now a place
Seven documented passes · 2026-04 → 2026-06
P0Critical fixes
Main entry silently served a degraded fallback to every player; canvas races; bar/confirm mismatch.
P1Math panels ×3
Shared scaffold extracted; Ch.2/3 gained full equation + plot panels in both run modes.
Then the craft sprint · 30 logged commits in 6 lanes · 2026-06 → 2026-08
scenes3 → 1
separate mini-apps → continuous world
eigen presets3 → 6
tiered ★ → ★★★, repeated-root handling
models11 → 5
auditioned → kept · 745 KB
win checkquantified
every threshold visible on screen
09
09 · Evaluation — evidence, limits, and the next study
Heuristic evaluation · completed 2026-06-11
42 findings across five lenses gave the project a repair map.
Five dimensions, parallel reviewers, hands-on play. This was an internal audit — not a substitute for participant evidence — and every reported issue was checked against the live build before being accepted; false positives were closed without churn.
Findings by lens · all verified against the build
Learning
12
Functionality
9
Playability
8
Design
7
Art
6
42 logged findings
Finding 01
The polished levels never loaded from the main entry.
Import stripping was incomplete; the source transform failed silently, so every player received a degraded fallback.
No formal external playtest has been conducted yet. This section is deliberately a research plan, so future evidence can be added without rewriting the case study's claims.
6–10participants
Half with prior linear algebra, half without; at least two co-op pairs. Unaided three-chapter run.
03concept retells
After each chapter, participants explain the concept in their own words · scored on a 0–2 rubric.
05signals
Time per chapter · stuck points (> 60 s) · card read-rate · retell accuracy · SUS.
Questions to test
H1Does the live 2D math panel improve concept retell accuracy?panel on / off A-B
H3Does splitting control generate productive mathematical talk?code think-aloud transcripts
45-minute session · run of show
00–05Consent + baseline05–10Control warm-up10–30Pair play + think-aloud30–38Concept retell38–45SUS + debrief
01 Observe→02 Code→03 Compare→04 Revise
PHOTO 01Pair play · shared screen
Reserved for a wide contextual image: posture, shared attention, two control roles.
PHOTO 02Hands + think-aloud notes
Reserved for a close crop of physical interaction or facilitator notes.
Final display · line becomes bridge · plane becomes court · axis becomes gate
01 · dusk — the path across r = u + v02 · day — signed area held above water03 · night — direction becomes a hand on a dial
Honest limits
External participant testing remains to be completed.
Ch.2 water still lacks the real-time reflection used in Ch.1.
Wind-chime synthesis needs by-ear tuning with users.
Desktop keyboard first; touch and mobile are not yet supported.
Next
Run the two-group playtest, code concept-retell quality, and examine whether the co-op role split produces mathematical conversation rather than simple task division.
The contribution is not a claim that a game "solves" linear algebra. It is a designed hypothesis: when abstract operations become shared spatial acts, learners have more ways to notice, explain, and remember them.
