Wirebook

Wirebook › Bonus lesson

How can two people draw on the same picture at once?

Bonus lesson · about 6 minutes · hands-on · nothing you type leaves your browser

You and a friend are colouring the same picture on two tablets. You do the sun, they do a bush, and at the very same moment you both colour the middle square. When the tablets talk to each other again, whose drawing survives? Online drawing boards, shared documents and spreadsheets have to answer this question many times a second.

Two tablets, one picture

Click squares on either tablet. Changes travel to the shared picture in the middle after a short delay. Turn a tablet's Wi-Fi off, draw on both, then turn them back on. Try each rule. Everything happens in your browser; nothing is sent anywhere.

🦊 Fox's tablet

Up to date

☁️ Shared picture

This is the copy everyone agrees on. It lives on a server.

🦉 Owl's tablet

Up to date

0changes arrived
0changes lost or overruled
0same-square clashes
0times someone had to wait

Three ways to share one picture

RuleWhat happensGood for
Last save winsEach device uploads its whole copy. The last one to arrive replaces everything, so the other person's work quietly disappears.Things only one person edits, like your own settings
Take turnsOnly the device holding the "lock" may change things. Nothing clashes, but everyone else waits, and if the holder goes offline, nobody can draw.Old-style shared files ("someone else has this document open")
Merge small changesDevices send tiny changes ("square 27 is now pink") instead of whole pictures. Changes to different squares simply both happen. Only a change to the same square needs a rule, such as "the later one wins".Live drawing boards, shared documents, multiplayer design tools

The sneaky part: typing at the same time

Pictures are easy because square 27 is always square 27. Words are trickier. Fox and Owl both start from the same sentence. Each adds some words at a position (a count of letters from the start). If Owl's change is applied without adjusting, Fox's new letters push everything along and Owl's words land in the wrong place.


🦊 Fox adds

Fox sees:

🦉 Owl adds

Owl sees:

Without adjusting the position

Shifting Owl's position past Fox's new letters

Both people got what they meant.

How real apps keep everyone's work

Related lessons: a shared park with lag (one world kept on a server), how a game remembers progress, how a download picks up where it left off. Grown-up twins: Tooltern's text diff shows exactly what changed between two versions.

Words from this lesson

Earn a bonus badge

Get all 3 right to collect the Drawing together bonus badge. Bonus badges are extra: they don't change your stamp count or rank. Wrong answers are fine: just try again.

1. Two tablets each upload their whole picture and the last one replaces the server copy. What can go wrong?

2. Fox and Owl colour different squares while offline. With square-by-square merging, what happens when they reconnect?

3. Fox adds 4 letters at the start of a sentence while Owl adds one at the end. Why might Owl's letter land in the wrong place?

Try another lesson

  1. 3Can a website get tired?7 min · interactive
  2. 12How does a game remember where you got to?6 min · interactive
  3. 1What happens when you open a web page?6 min · interactive