Professor Oops

Chemistry and pH

Chemistry and pH

Every spot of paper knows how sour it is

Dip the page in red cabbage juice, then drop vinegar on it: the spot turns pink. Shake baking soda onto the wet page and it turns green-blue, and where the two meet it fizzes. Each tiny spot of paper keeps count of what is dissolved in it, and the game works out from those amounts how acid that spot is.

Painted illustration of the painter pouring purple red cabbage juice into a row of glasses that go from pink through purple and blue to green, with a lemon and baking soda.

Vinegar, lemon and ketchup all make the paper sour in the same way, so anything sour joins in

The paper in Professor Oops is a grid of spots about 0.6 mm across. Every spot holds a short list of numbers: how much acid is in its water, how much baking soda, bleach, cabbage dye, tea, salt and so on. In the released game there are twelve of these.

The list never records who put something there. Vinegar, lemon, ketchup, mustard and the plus clip of a battery all add to the same "acid". Lemon juice brings a bit more than vinegar, orange juice far less. So anything sour joins in with everything acid does, without anyone writing a line of code for that pair.

Water moves these amounts around. A drop of water on a vinegar spot carries the acid outwards, just as it carries paint. Some things cling to the paper fibres and hardly move: cabbage dye mostly stays where it soaked in, and rust's iron stays put. Acid and salt go wherever the water goes.

Every spot of paper knows how sour it is

For engineers

Every spot of paper knows how sour it is

Twelve full-page grids over a page of up to 512 × 384 cells hold the dissolved amounts, in game units anchored on vinegar. An 11-rule reaction table runs on them at most 10 times a second in the simulation's Web Worker. pH is never stored: it is derived per spot when something asks, following the strong-acid law on the acid side and a capped rise on the alkaline side. Each indicator dye is a colour chart in absorbance, so dye amounts add the way real dyes do, at one lookup per drawn spot.

Under the hood
Vinegar, lemon and ketchup all make the paper sour in the same way

Under the hood

Vinegar, lemon and ketchup all make the paper sour in the same way

Each dissolved thing is its own full-page grid of numbers. At the largest page, 512 × 384, that is 196,608 spots, each with all twelve amounts. The units are not molar. They are game amounts anchored on one point: one unit of acid is vinegar's strength.

Every sour food has its real-world pH typed in, and the acid it brings as it soaks in follows from that pH by the strong-acid law, anchored on vinegar:

one pH step lower = ten times the acid

So lemon brings a little more acid than vinegar, cola a little less, and orange juice and ketchup far less.

Each dissolved thing has its own share between the water and the fibres. Cabbage dye clings fairly hard, tea less, turmeric harder, iron hardest of all, and acid and salt not at all. A clinging thing also keeps track of how much of it has let go, so a drop on dried cabbage paper moves only that part. An automated test holds the middle of a vinegar spot on cabbage paper to most of its dye, and the total dye on the page to a millionth.

The twelve things each spot of paper keeps count of in the released game

Any acid

in vinegar units · moves with water

Baking soda

dissolved · moves with water

Washing soda

also wood ash · moves

Bleach

wears off, faster when dry

Cabbage dye

clings to the fibres

Turmeric

clings harder

Tea and coffee

clings

Rust's iron

clings hardest

Salt

dissolved · moves

Sugar

dissolved · moves

Soap

dissolved · moves

Urea

dissolved · moves

The released game's twelve. The next update next update adds four more for chemistry: a non-fizzing alkali (bar soap, the battery's minus clip), hydrogen peroxide, the share of acid that can evaporate and the salt an acid leaves when it is used up.

Each food has its pH typed in, and the acid it brings follows from itA sour food brings acid as it soaks in by the strong-acid law, anchored on vinegar: lemon a little more than vinegar, cola a little less, orange juice and ketchup far less.

Lemon is typed in at pH 2.2, vinegar 2.4, cola 2.5, orange juice 3.5, ketchup 3.9, tea 5.5, milk 6.7 and egg white 8.8.

Each food has its pH typed in, and the acid it brings follows from it0246810lemonvinegarcolaorangeketchupteamilkegg whitepHEach food has its pH typed in, and the acid it brings follows from it0246810lemonvinegarcolaorangeketchupteamilkegg whitepH
Data table
Each food has its pH typed in, and the acid it brings follows from it
typed-in pH
lemon2.2
vinegar2.4
cola2.5
orange3.5
ketchup3.9
tea5.5
milk6.7
egg white8.8

Source: The pH each food has typed in, close to the real foods' but without cited sources.

How sour a spot is gets worked out from what's in it, every time it's drawn

Nothing in the game stores a pH. When the screen needs to colour a spot of cabbage paper, it asks "how acid is it here?", and a short formula answers from the amounts in that spot.

On the acid side the formula follows the real rule for a strong acid: ten times less acid is one pH step closer to neutral. Vinegar's acid reads vinegar's real pH, 2.4, and a tenth of it reads 3.4. Orange juice reads back its own real pH.

On the alkaline side each base lifts the pH in a straight line, up to its own limit, near the real liquid's: washing soda reaches about 12 and bleach about 13. Whichever side there's more of wins, and the pH is set by what's left over.

We're proud of how little this is: a handful of arithmetic per spot, cheap enough to run for every spot on the screen. It is also not a chemistry calculation. There are no molecules or ions in it, and adding plain water doesn't dilute the reading, because the formula reads amounts and not concentrations. Water only changes it by carrying acid away to the next spot.

Under the hood
How sour a spot is gets worked out from what's in it

Under the hood

How sour a spot is gets worked out from what's in it

The reading is computed on demand, once per drawn spot, from a handful of arithmetic. There is no stored pH and no equilibrium solver.

Acid side, both versions: the strong-acid law, one pH step per tenfold, anchored on vinegar's real pH and kept inside the 0 to 14 scale.

Alkaline side, released game: each base adds its own capped straight-line rise. The bases are weighed against the acid as one amount, each counted by how much acid it can take up. If the acid is larger, what's left over sets the reading on the acid side. If the bases are larger, the rise is scaled down by the share of it the acid has cancelled.

Next update next update: baking soda stops at its real buffer point, pH 8.3. Washing-up soap is neutral, and bar soap gets its own alkali that stops near 10. The salt a used-up acid leaves behind now acts as a weak-acid buffer. It pulls the reading towards neutral in step with the share of acid already spent, which replaces the jump with a steady climb.

Goop lying on top adds its own pH, weighted by how thick it is. So ketchup on vinegar paper reads about 0. The two acids stack.

Using up vinegar with baking soda: the colour jumps in the released game and climbs in the next updateThe textbook line is the Henderson-Hasselbalch equation at pKa 4.76, 1 mol/L; it is our comparison and not part of the game.

The released game reads under pH 3.5 until 90 % of the vinegar is used up, then jumps to 7; the next update climbs steadily and reads 4.7 at half-way, where the textbook line reads 4.76.

Using up vinegar with baking soda: the colour jumps in the released game and climbs in the next update2468100.000.200.400.600.801.00share of the vinegar used uppHUsing up vinegar with baking soda: the colour jumps in the released game and climbs in the next update2468100.000.200.400.600.801.00share of the vinegar used uppH
  • released game
  • next update
  • textbook, acetic acid (comparison only)
Data table
Using up vinegar with baking soda: the colour jumps in the released game and climbs in the next update
share of the vinegar used upreleased gamenext updatetextbook, acetic acid (comparison only)
0.002.42.42.38
0.102.452.863.81
0.252.523.554.28
0.502.74.74.76
0.7535.855.24
0.903.46.545.71
0.994.46.956.76
1.00779.4

Source: Readings computed from the game's own pH reading in both versions, for one unit of vinegar.

This is the clearest change in the next update. In the released game, as baking soda uses up vinegar, the reading stays low until almost the end, then it jumps. In the next update the spent acid's salt holds the pH up, so the colour climbs steadily through pink and purple. Its straight line meets the textbook curve for acetic acid at the half-way point, where both read about 4.7. The textbook line is our comparison, computed with the Henderson-Hasselbalch equation at pKa 4.76. It is not in the game's code.

Red cabbage juice goes pink with vinegar and blue-green on soap, in the order printed charts show

Real red cabbage juice changes colour because its dye molecule changes shape with the acidity. The game doesn't model the molecule. It has a chart: a handful of colours across the pH scale, from deep pink-red through purple and blue to green and finally yellow. The colour for any pH is read from that chart.

The exact shades were picked by hand. Their order agrees with published charts of the real juice, though our pH 5 is a bit pinker than the printed charts are there RHS chart. Two more dyes work the same way. Turmeric, the yellow in mustard, stays yellow up to about pH 7.4 and then turns orange and red-brown. Tea darkens a little in alkali and pales in acid.

So mustard smeared on a bar of soap goes red-brown, and blueberry juice on soap turns blue-green, because blueberries carry the same dye as cabbage. Automated tests check both in the released game.

Under the hood
Red cabbage juice goes pink with vinegar and blue-green on soap

Under the hood

Red cabbage juice goes pink with vinegar and blue-green on soap

Each dye's hand-picked colours are blended into a fine chart across the whole pH scale, red, green and blue for each step. The blending happens in reflectance, the colour you see. The chart is kept as absorbance, how much light the dye takes away, because that is the quantity that adds up when dyes mix. Drawing reads the spot's pH, looks up the chart and scales it by the amount of dye there, the Beer-Lambert law:

absorbance = chart colour at that pH × amount of dye;   seen = e−absorbance

Cabbage dye has no colour of its own in the paper, so its whole chart colour is added. Turmeric and tea bring their own stain, so only their change from neutral is added. Because colours add as absorbance, more dye gives a deeper colour of the same hue. The chart is the same in the released game and the next update.

Try it: mix one spot of paper The game's own rule

Set the acid and one base in a spot of cabbage paper. Both versions of the game read it with their own formula and colour it from the real table. What to look for: baking soda alone reads pH 10 in the released game and 8.3 in the next update, teal against blue. Washing-up liquid turns cabbage blue-green in the released game and leaves it purple in the next update. This is the reading before the fizz uses anything up.

One spot of cabbage paper coloured by its pH in the released game and the next update, with the cabbage, turmeric and tea colour charts
  • released
  • next update
  • cabbage
  • turmeric
  • tea
  • 0
  • 7
  • 14
  • ▲ released · ▼ next update
−4
acid
—
1.00
Base
released pH
—
next update pH
—

Anything sour fizzes on baking soda, because the fizz rule only asks what's in the spot

The game has a short table of reactions, eleven in the released game. Each one says what must be in a spot before it can happen, how fast it goes there, and what it does. The fizz rule needs acid and baking soda (or washing soda) in the same spot. It uses them up, gives off carbon dioxide, and lays down a pale froth, tinted by any paint on the paper there.

Because the rule only looks at amounts, the speed follows them. Vinegar fizzes far harder on baking soda than orange juice does, since it brings over ten times the acid. Ketchup that has soaked in fizzes too, a little. Automated tests pin both.

The gas doesn't vanish. It goes into the air above the paper as a heavy layer that spreads out low, like poured water. A candle near a fizzing patch goes out with no wind at all, while one across the page burns on. The same fizz inside dough fills the dough with gas instead, and you get soda bread full of holes.

Under the hood
Anything sour fizzes on baking soda

Under the hood

Anything sour fizzes on baking soda

The fizz rule. It needs acid and a dissolved soda in the same spot. Its speed follows the amount of acid there. It uses the two up in a fixed ratio, as the real reaction does, gives off a set volume of carbon dioxide for each unit of soda, and lays a little froth round the spot.

Where the gas goes. All carbon dioxide in the game, from every source, takes one shared route into the air simulation's heavy-gas layer, which spreads low. Fire reads how deep that layer is where it burns and goes out once the gas covers it; a candle compares the depth with the height of its own flame. An automated test checks that a candle beside the fizz goes out, while soda alone, vinegar alone and a candle across the page burn on, in still air.

How the table runs. Chemistry collects time and runs a pass at most 10 times a second, in JavaScript in the simulation's Web Worker. The rules have no WebAssembly kernel of their own, but the paper's kernel carries the dissolved things as the water moves. The pass sleeps when nothing reacted, and a coarse map of where each ingredient is says where to look, so a rule is only asked where its first ingredient is. That check took a pass over a soaked page from 7.4 to 2.9 ms when it landed, before the release. Every rule's effect has a closed form, so a "wait three days" skip runs it once with all the hours.

Try it: drop an acid on baking soda The game's own rule

A page dipped in cabbage juice, with a patch of dissolved baking soda. Tap or drag to drop the acid you pick, or press Drop the acid. What to look for: pink where the acid spreads, teal over the soda, and pale froth where they meet. Vinegar fizzes hard and fast; ketchup barely fizzes. The fizz rule, the acid it uses per soda, the gas it gives off, the froth it lays and acid wearing off follow the released game. The spreading and the froth fading away are a simple sketch.

Cabbage paper with a patch of baking soda; acid drops spread, turn pink and fizz into pale froth where they meet the soda
Acid
CO2 given off
—
soda left
—
acid on the page
—
A page dipped in red cabbage juice in the game: a white heap of baking soda with the purple paper turned blue round it, a row of pink vinegar drops beside it, and bubbles where the pink meets the blue.
The real game. Cabbage dip, a heap of baking soda from the sieve wetted with water drops, then vinegar drops along its edge: blue round the soda, pink acid, bubbles where they meet. The blue is the next update's baking soda next update; in the released game the soda turns the cabbage teal-green.

Bottles in the released game fizz through a separate model of the same idea. A carbonated drink lets its gas go faster the more places a bubble can start. Each mint adds many such places. Salt grains add them too, by grain size, so salt sprinkled into a cup of cola fizzes up with no salt-and-cola code, and a test checks it. Gas rushing out of the neck fast enough throws the drink up with it. The elephant-toothpaste flask warms by about as much as 6 % peroxide really does when it breaks down, about 41 °C. That warmth was set to land there; nothing calculates it from first principles. In the next update next update a bottle or cup runs the paper's own reaction table on a single well-mixed cell, so bleach and vinegar in a cup give the same warning as on paper.

Three mints in cola: the gas rushes through the neck fast enough to jet for about a secondA bottle of cola, three mints whose bubble sites fade over a few seconds, and gas that leaves faster the more sites there are, out through the neck. About a fifth of the gas is left after 1 s and a twenty-fifth after 2 s.

The gas leaves the neck at about 200 cells/s as the mints drop and falls below the 40 cells/s a jet needs at about 1 s.

Three mints in cola: the gas rushes through the neck fast enough to jet for about a second0501001502000.00.51.01.52.02.5seconds after the mints dropgas speed, cells/sThree mints in cola: the gas rushes through the neck fast enough to jet for about a second0501001502000.00.51.01.52.02.5seconds after the mints dropgas speed, cells/s
  • gas rushing out of the neck
  • speed for a jet
Data table
Three mints in cola: the gas rushes through the neck fast enough to jet for about a second
seconds after the mints dropgas rushing out of the neckspeed for a jet
0199.6340
0.05183.88
0.1169.38
0.15156.02
0.2143.72
0.25132.39
0.3121.95
0.35112.34
0.4103.49
0.4595.34
0.587.83
0.5580.91
0.674.54
0.6568.67
0.763.27
0.7558.29
0.853.7
0.8549.48
0.945.59
0.9542
138.7
1.0535.66
1.132.86
1.1530.28
1.227.9
1.2525.71
1.323.69
1.3521.83
1.420.12
1.4518.54
1.517.08
1.5515.74
1.614.51
1.6513.37
1.712.33
1.7511.36
1.810.47
1.859.65
1.98.89
1.958.2
27.56
2.056.97
2.16.42
2.155.92
2.25.46
2.255.03
2.34.64
2.354.28
2.43.94
2.453.63
2.53.3540

Source: Computed from the released game's own bottle model. Ignores the liquid the jet throws out.

Bleach fades dark colours through brown and yellow to white

Draw a bleach pen over a dark drawing and it doesn't just get lighter. It passes through red-brown and orange to yellow and then white, as bleach-pen art does. One line takes black marker to red-brown; three lines over the same place take it to white. A drop of bleach on thick marker only gets it as far as red-brown. That path comes from one idea: bleach lets red light back through fastest, green a bit slower and blue slowest. So a black line goes reddish-brown first, then yellow, then white.

A drop of bleach on cabbage paper first turns the dye yellow, because bleach is strongly alkaline and pH 13 is yellow on the chart. Then the bleach destroys the dye. Two simple things together give both real effects. Crayon wax and soap underneath hold the bleach back, so a thick crayon line keeps its colour far longer than the paper round it. Bleach also kills mould and wears off as it dries.

Bleach and an acid together give off chlorine. The game treats that as a safety lesson, plainly: the gas builds up in the room, and the child is told to open a window or get out into fresh air.

Under the hood
Bleach fades dark colours through brown and yellow to white

Under the hood

Bleach fades dark colours through brown and yellow to white

The bleach rule, the same in both versions. Bleach works on damp paper, and wax or soap underneath holds it back. It takes colour away as absorbance, in the red, green and blue channels at three different speeds, red fastest and blue slowest. That one difference is what sends black through red-brown, orange and yellow before white. Each step fades the colour exponentially, and a stability cap keeps one long step from overshooting.

The bleach is used up in step with the colour it takes, so a thick marker line wears a drop out before the line is white. It also fades cabbage, turmeric and tea dye. A second rule makes it wear off by itself, slowly while wet and much faster once dry. A third turns bleach meeting acid into chlorine and hands the gas to the room. An automated test checks that warning.

Try it: bleach a drawing The game's own rule

Three dark strokes and a band of cabbage dye on wet paper. Tap or drag to drop bleach, or press Drop bleach. What to look for: black passes through brown and yellow; the cabbage band flashes yellow before it fades; the strokes keep their colour under the pale blue crayon line. Turn the crayon off and that strip bleaches like the rest. The bleach spreading is a simple sketch.

Dark strokes and a band of cabbage dye on wet paper fading under bleach drops through brown and yellow, with a crayon line that resists
Bleach
bleach on the page
—
colour taken out
—
Two black marker strokes and a brown one in the game, crossed by two bleach pen lines: the left line, drawn once, has turned the black red-brown and the brown pale yellow; the right line, drawn three times, has bleached all three to white, with thin orange and yellow edges.
The real game. A bleach pen down across black and brown marker, once on the left and three times on the right: black goes red-brown first, then through orange and yellow to white.

A fizz puts out a candle and raises dough, though no rule names a tool

The reaction rules never name a tool. The code says so in the rules' own contract, and we checked: anything that writes acid, soda or tannin into the paper joins every reaction that reads them. Most of the links below come from that. Each one has a test in the released game.

Shared: washing soda in the ash

Burn a hole in the paper, wet it, then dip it in cabbage juice

Blue round the ash, purple further off.

Heat and fire · pinned by a test

Shared: heavy CO2 layer in the air

Fizz vinegar on baking soda next to a candle

The candle goes out with no wind; one across the page burns on.

Air that really moves · pinned by a test

Shared: acid

Clip a battery to salty water on cabbage paper

Pink at the plus clip, and the acid itself helps carry the current.

Electricity · pinned by a test

Shared: the dough's gas

Get baking soda and vinegar into dough

It rises as you watch, with no froth, and bakes full of holes.

Dough, mould and time · pinned by a test

Shared: acid

Draw a line of vinegar across an ant trail

No ant gets past: they won't walk into the acid or its smell.

Animals with their own minds · pinned by a test

Shared: each dissolved thing's share in the water

Drop vinegar on cabbage paper

The acid spreads with the water while most of the dye stays put: a pink spot with a soft rim, never a white disc.

Water in paper · pinned by a test

The whole chemistry fits on one page of rules

12
things dissolved in every spot of paper, each a full-page grid of numbers. Four more for chemistry in the next update.
11
rules in the reaction table, from fizzing to iron-gall ink. 18 in the next update.
3
indicator dyes that change colour with pH: red cabbage, turmeric and tea, each a colour chart picked by hand.
10/s
chemistry passes at most, in the background worker. Reactions don't need the frame rate.
6
links from chemistry into other systems, from candles to ants to dough, each pinned by a test, with no rule that names a tool.
2.9 ms
for a chemistry pass over a soaked page, down from 7.4, measured when the first-ingredient checks landed, before the release.

Where we simplify, and why

A child on a tablet needs the right colour in the right place, many times a second. Each shortcut below keeps what a child can see and drops what only a laboratory could measure.

In real life. pH comes from the concentration of hydrogen ions, settled by chemical equilibrium in each volume of water.

In the game. A reading worked out from the amounts in one spot with a short hand-written formula, anchored on vinegar = pH 2.4 and the strong-acid law of one pH step per tenfold.

Why that's enough. One cheap read per drawn spot and no solver. Lost: dilution (plain water doesn't raise it), ions, real mixtures. Two acids on top of each other stack, so ketchup on vinegar reads about 0.

In real life. The alkaline side is logarithmic, and baking soda buffers itself near pH 8.3.

In the game. A straight line with a cap per substance. The released game lets baking soda reach 10 and reads washing-up liquid as 10. next update Soda stops at 8.3 and washing-up liquid stays neutral.

Why that's enough. One cap per base is one number to set, and in the next update the caps put baking soda and soap where they belong. Past its cap the amount hardly matters: in the released game a sprinkle of baking soda reads the same as a heap.

In real life. The dye's molecule takes different forms at different pH, each with its own colour.

In the game. A handful of hand-picked colours, blended into a fine chart, looked up by the rough pH.

Why that's enough. The colour order matches published charts, and it reads well on screen. Lost: the exact shade, and how real juice varies. Inside a cup the dye isn't drawn; it shows once spilled on paper.

In real life. Bleach oxidises each dye molecule in its own way.

In the game. Red, green and blue fade at three fixed speeds of one rate, red fastest and blue slowest.

Why that's enough. Dark colours pass through brown, orange and yellow, as bleach-pen art does. Every dye follows the same path.

In real life. About 286 mL of CO₂ comes from a gram of baking soda, and fizz speed depends on mixing and surface.

In the game. A set volume of gas per unit of soda, at a speed that follows the acid.

Why that's enough. Enough gas to pool and reach a flame, from one line. Same speed for a pinch or a heap until it's used up.

In real life. Milk's casein clumps at about pH 4.6.

In the game. Milk curdles once there is enough acid in a spot for the milk there. No pH is read.

Why that's enough. Direct and robust. The lumps come from a fixed pattern on the page, so playing and skipping time give the same lumps.

In real life. Rust is electrochemistry, with water and oxygen, over days.

In the game. A time-skip formula: nothing under half a day, then more the damper the paper and the longer the wait, up to two days.

Why that's enough. Too slow to watch anyway. Salt doesn't speed it, and vinegar counts only as dampness.

In real life. Salt water at the plus clip gives off a poisonous gas and bleaches the dye.

In the game. Acid at the plus clip, a base at the minus clip, unnamed bubbles. Water and salt aren't used up.

Why that's enough. A decision. The only poisonous gas in the game is the bleach lesson, and an automated test forbids naming the gas.

In real life. An eggshell takes a day or two to dissolve in vinegar.

In the game. Seconds to minutes. Acid fades away over a few minutes on wet paper, faster once dry.

Why that's enough. A child's attention. In the released game lemon juice wears off too. next update Only vinegar's share does, and lemon stays sour.