onehappycloud · the lab

Small experiments that explain an idea.

Not products, but things we build to understand how something works, and then take apart on the page. Play against the algorithms, send monkeys after Shakespeare, and see how a microphone hears a piano.

Experiment 01 · algorithms

Game Trainer

Tic-Tac-Toe, Connect Four and Gomoku against a computer that shows its work. Most game AIs just answer with a move. This one colours every square by how good it is, ranks the moves, draws its search tree and explains why, with two very different algorithms to compare.

play it belowMinimax · α-βMonte Carlo Tree Search3 games · 1 engine0 dependencies

Play it

The real Game Trainer, right here

This is the app itself, not a recording. You play X, the computer plays O, and the trainer on the right explains every position. Switch game at the top, and switch engine under Setup.

Two ways to think

Same board, two very different engines

Minimax · α-β

Think through every reply

Try every move, then every answer to it, and so on. Assume both sides play their best, and pass the results back up. Exact, but the tree grows very fast.

Good at

Proof

Tic-Tac-Toe is solved outright: 71,742 positions from the empty board, and every first move is a draw with perfect play.

Monte Carlo Tree Search

Play lots of quick games

Finish the game at random, thousands of times, and count what wins. Spend more of the effort on moves that look promising, but keep checking the others.

Good at

Big boards

It needs no hand-written idea of a good position, only the rules. The default for Connect Four is 20,000 simulations per move.

Both

Too many moves on 15×15

Gomoku has 225 squares. Looking at all of them, several moves deep, is out of reach for either engine.

Beam

Only look near the stones

Candidates are empty squares near the action, ranked by a quick attack and defence score: the best 20 at the top of the tree and 8 deeper down.

How minimax works

Step through a search

X to move, three empty squares. One move wins, one draws and one loses, but only if you look ahead. Step through the search and watch the scores travel up the tree: +1 means X wins, 0 a draw, −1 O wins. X picks the highest score, O the lowest.

Minimax search tree for a Tic-Tac-Toe position
Ready.Press Step to start at the top.

How Monte Carlo Tree Search works

Four steps, thousands of times

Each simulation walks down the tree by the best UCB score, adds one new move, plays the rest of the game at random, and sends the result back up. UCB is the win rate so far plus a bonus for moves that have been tried less. Run a few and watch the effort shift.

  1. 1 · Selection–
  2. 2 · Expansion–
  3. 3 · Simulation–
  4. 4 · Backpropagation–

By the numbers

One engine, three games

3games from one k-in-a-row engine: 3×3 get 3, 6×7 get 4 with gravity, 15×15 get 5
71,742positions to solve Tic-Tac-Toe from the empty board with alpha-beta
20 · 8Gomoku candidates at the root and deeper in the tree; rollouts stop after 40 moves
6trainer views: heatmap, insight, search tree, deepening or convergence, how it decides, game review
Vanilla JavaScriptNegamax · alpha-beta · iterative deepeningUCT · smart rolloutsSVG chartsNo build step

Experiment 02 · simulation

Infinite Monkeys

Given enough monkeys, typewriters and time, will one of them type Shakespeare? Most simulators wait for one famous line and never see it. Ours checks every keystroke against the complete works, so you watch real passages appear, see which play they come from, and compare the luck with the maths.

just for funC# · .NET 9 · Blazorsuffix array1 to 1 trillion monkeystime acceleration

The real app

The Infinite Monkey Simulator

Screenshots from the running app with 1,000 monkeys on the classic 27-key typewriter. They follow the page's light or dark setting, like the app itself.

localhost:5235
Infinite Monkey Simulator, light theme Infinite Monkey Simulator, dark theme
Record timeline and observed versus expected chart, light theme Record timeline and observed versus expected chart, dark theme
How long would it take panel, light theme How long would it take panel, dark theme

Try it

A room full of monkeys, in this page

The same idea, running in your browser. Each monkey presses one of 27 keys at random, once a second of monkey time. After every key we look up the longest tail of its typing in Shakespeare's 154 sonnets. The real app does this against all 5.0 million characters of the complete works.

Monkeys

8.1 billion is one for every person on Earth.

Time acceleration

One real second is one minute of monkey time.

The sonnets load when you press Start.

Keystrokes00 per second
Monkey time0 s00:00 of real time
Acceleration×60paused
Longest match–theory expects –

Longest passage typed so far

…

The typing roomShowing 8 of 1,000 monkeys. Green keys spell a passage from the sonnets.

How long would it take?

–

The gap

Three things monkey demos usually get wrong

Typical demo

Waits for one line

It picks a famous phrase and waits for it. Even "to be or not to be" takes about 5.8 × 1025 keystrokes, so nothing ever happens.

Our simulator

Searches all of Shakespeare

After every key, the longest tail of the monkey's typing is looked up in all 5.0 million characters. With 1,000 monkeys a nine-letter passage is expected within about an hour of monkey time, with its play and line.

Typical demo

Time is whatever the loop does

"Ten million tries" says nothing about how long monkeys would actually need.

Our simulator

One key per second per monkey

K keystrokes by M monkeys take K / M seconds. Time acceleration sets how fast the monkey clock runs against yours, from real time to as fast as the CPU goes.

Typical demo

A number, no proof

You get a count, but not whether it is what probability predicts.

Our simulator

Luck checked against theory

With D(L) distinct passages of length L, each key has a D(L) / 27L chance of finishing one. A chart puts that next to what the monkeys really typed.

How it works

What happens on every keystroke

01

Press a random key

A fast SplitMix64 generator per monkey picks one of the keys. The text is folded to the same keys: lower case, straight quotes, single spaces.

02

Try to grow the match

The whole text sits in a suffix array, so a match is a range of sorted positions. The new key narrows that range with a binary search: ha → ham.

03

Or drop from the front

If nothing continues, the run is over. Characters come off the front until the tail occurs again, so hamq falls back to q.

04

Keep the record

A new longest run is stored with the monkey, the keystroke, the monkey time, and the play and line where Shakespeare wrote it.

By the numbers

Big numbers, honestly counted

5.0 Mcharacters of Shakespeare, indexed in about a second
108+keystrokes per second at Max, on background threads
1,024typewriters simulated one by one. Beyond that, each stands in for many monkeys
v4the fourth try, after a console app and two Windows Forms versions
C# · .NET 9Blazor ServerSuffix arraySplitMix64xUnitProject Gutenberg #100

Experiment 03 · web app

Piano Timing Coach

Piano learning apps usually need a MIDI keyboard, or only check that you pressed the right key. This one listens to a real piano through the microphone and grades every note on timing, to the millisecond, in an ordinary browser tab.

acoustic piano · microphoneMIDI or computer keys tooruns in the browser0 dependencies

The real app

Practising Twinkle Twinkle

Screenshots of the running app, played from the computer keyboard so we could time a few mistakes on purpose.

localhost:5173
Falling notes view with graded hits
Sheet music view with graded notes
Results with grade, timing chart and tips

The gap

Why a microphone is the hard way

Pitch trackers

Hear one note at a time

A piano keeps ringing. When you play the next key, the old notes are still there, and a tuner-style detector often reports the wrong one.

Timing Coach

Listen for what changed

Right after the hammer strikes, the sound is compared with the sound just before. The harmonics that rose belong to the new key.

Pitch trackers

The metronome counts as a note

The click leaks from the speakers into the microphone, and knocks on the piano sound like playing.

Timing Coach

Clicks are thrown out

A note only counts if its own harmonics gained energy and it is clearly tonal. A click raises everything evenly, so it is rejected.

Pitch trackers

Latency makes you late

Speakers, microphone and browser all add delay, so playing exactly on the beat gets graded late.

Timing Coach

One clock, calibrated

Notes, metronome and screen share the time the sound actually reaches you. A test through the speakers, or tapping along on headphones, measures the delay.

How it works

Before and after the hammer

A simplified spectrum of what the microphone hears. The pale bars are the moment before an onset, the solid bars just after it. Pick what happens next.

Spectrum before and after an onset
Microphone→Onset: spectral flux→Before vs after→Pitch: MPM, if it agrees→Verify: harmonics rose, tonal→Grade on the heard clock

By the numbers

Tested on synthetic pianos

51offline test runs: 17 scenarios at 3 sample rates, from fast 16ths to a noisy room
100%of notes found in every run, with no wrong keys and no notes from clicks alone
< 10 msjitter in every run; average timing error 13 ms at most
3modes: Play along, Wait for me, and Listen. Plus MIDI import and a text format for songs
JavaScript modulesWeb Audio · AudioWorkletFFT · spectral fluxMcLeod pitch methodWeb MIDICanvasNode.js tests