Living Museum of Learning
We Were Both Wrong About the King
Situation
Ethan has been coding for almost ten years, since he was in Grade 2.
He is now in a boarding school where personal computers are not allowed, so his computer time is mostly limited to weekends. His old Mac can no longer run the newer Xcode, but Python, SageMath, and a local p5.js environment are still open doors.
He was also the first of my students to build a 3D soccer ball in p5.js. He did the complicated 3D calculations on three pages of paper, wrote code on paper, and waited for the weekend to test and debug it.
This morning, however, Ethan had never even drawn an image on a p5.js canvas.
So we started with one Chinese chess piece.
I gave him the URL of a piece image:
bx
I suggested that bx might mean “black xiang.”
Then I gave him a new little mystery:
Could he find the red king?
Turning Point
Before writing the first line of code, Ethan wanted to search online for the “size” of a Chinese chessboard.
I was confused.
“What? What size? Do you play Chinese chess?”
“Yes, of course I do,” he said.
I asked why we should care about the official size.
A Chinese chessboard can be enormous, like a basketball court, or small enough to sit on a table.
Ethan didn't argue.
He just started coding.
Before that, though, I asked him:
“What is the controlling value of this board?”
He immediately answered:
“cellSide.”
He still wondered whether we needed another scale factor.
Did we?
It seemed not.
If cellSide controls the grid, everything else can follow it.
Later, after he tried the first version of p5.js image(), the piece appeared enormous. Ethan quickly understood why the five-parameter version was useful: it gave him control over the size.
Then he asked:
“Should we use another value for the piece size?”
No.
cellSide was already enough.
The board had one controlling value, and the pieces could simply follow it.
Ethan's Chinese Chess
Emergence
His first Chinese chessboard looked suspiciously unlike a Chinese chessboard.
The river was missing.
“Is it a board?” I asked.
Oops.
Ethan apparently hadn't played Chinese chess for years.
Then I asked whether anything else was missing.
He thought of the stars.
He was right that the stars were missing.
But I was thinking of the two palaces — the big X shapes.
And that led to another important step.
Ethan had noticed repeated line-drawing code. Instead of continuing to write the same operation again and again, he extracted it into:
function drawLine(col1, row1, col2, row2) {
let x1 = gridX + col1 * cellSide;
let y1 = gridY + row1 * cellSide;
let x2 = gridX + col2 * cellSide;
let y2 = gridY + row2 * cellSide;
line(x1, y1, x2, y2);
}
Then, when I was about to move on to the palaces, he stopped me:
“Wait. Let me refactor out the drawLine code then I'll add them easily.”
Exactly.
Once the board was described in logical col and row coordinates, those two palace Xs became much easier to express.
And the same idea naturally led to:
function drawPiece(pieceImage, col, row) {
let x = gridX + col * cellSide - cellSide/2;
let y = gridY + row * cellSide - cellSide/2;
image(pieceImage, x, y, cellSide, cellSide);
}
Now:
drawPiece(bx, 2, 0);
drawPiece(rs, 4, 9);
The board was beginning to speak in its own language.
The Mystery of the Red King
There was still one unfinished puzzle.
What was the filename of the red king?
I gave Ethan only a clue.
If bx could mean black xiang, perhaps the filenames followed Chinese chess terminology.
Ethan started thinking aloud:
“rg? rj? red jiang. Oh, red uses ‘shuai’ maybe.”
We suddenly had three possibilities to try.
Then:
Boom.
A red shi appeared in the place where the red king should have been.
We laughed.
And then another guess produced a red chariot.
Two red shi pieces were now guarding the center red ju.
😂
After class, Ethan sent me a screenshot from his iPhone:
“uncle，本来想把帅搞出来的，结果把车弄出来了[Facepalm]”
Uncle, I originally wanted to get the shuai out, but ended up getting the chariot instead.
I replied:
“so much fun ”
At the time, I still hadn't understood the full joke.
Then I looked at the actual filenames.
The mysterious kings were:
bb and rb.
Not jiang.
Not shuai.
Boss.
The original creator had apparently used “boss” for the king.
So our entire theory had been based on a false assumption.
rs was red shi.
rj was red ju.
And rb was red boss.
Ethan and I had both been misled by the same little naming system.
Learning
This morning wasn't really about learning how to draw a Chinese chessboard.
It was about learning how to build a model from what is actually there.
Ethan discovered that one value, cellSide, could control the geometry of the whole board.
He discovered that repeated drawing operations could become drawLine().
He discovered that pieces could become drawPiece().
He discovered that logical (col, row) coordinates could make later work easier.
And, perhaps most importantly, he discovered that a plausible explanation is still only a hypothesis.
“Red jiang.”
“Red shuai.”
Both sounded perfectly reasonable.
Both were wrong.
The real answer was boss.
And sometimes the teacher doesn't know the answer either.
Theme
Learning = playful creation
A student is given just enough information to start exploring.
The project creates the questions.
The questions create the abstractions.
And sometimes the answer makes both student and teacher laugh.
What Is Possible
A student can move from drawing his first p5.js image to designing reusable abstractions within a single session.
How Does It Happen
By following curiosity, noticing repetition, questioning assumptions, and leaving room for mistakes to become discoveries.
Why Does It Matter
Because real learning does not always look like acquiring the correct answer.
Sometimes it looks like two red shi pieces guarding a red ju — while the teacher and student are laughing across the Pacific Ocean.
