Living Museum of Learning
When the Board Disappeared
Situation
Tianjing was working on her Chinese chess board in p5.js.
She had already learned translate() and rotate() from working in 3D, but she had never used them for a 2D drawing before.
This time, she needed to put the four characters of the Chinese chess board into place:
楚、河、汉、界.
Her older sister had shown her the syntax, so Tianjing started experimenting.
Her first version looked like this:
function drawText() {
push();
translate(380, 235);
rotate(90);
text("楚", 0, 0);
pop();
push();
translate(330, 235);
rotate(90);
text("河", 0, 0);
pop();
push();
translate(120, 265);
rotate(-90);
text("汉", 0, 0);
pop();
push();
translate(170, 265);
rotate(-90);
text("界", 0, 0);
pop();
}
The idea seemed perfectly reasonable.
Then she ran it.
The board disappeared.
Turning Point
Donald immediately wondered whether there was something wrong with the syntax.
But before he could think it through, Tianjing tried something herself.
She changed:
rotate(90);
to:
rotate(10);
And she explained:
“It was out.”
That tiny sentence revealed what she was actually doing.
She wasn't blindly trying different numbers.
She had noticed that the transformation had moved the drawing out of the visible canvas.
So instead of treating the problem as “my code doesn't work,” she treated it as a question about geometry:
What did my rotation do to the coordinate system?
Emergence
This was a beautiful transfer of knowledge.
Tianjing already understood translate() and rotate() in a 3D context. She did not yet have a complete mental model of what those transformations would do in 2D.
But she didn't need to start from zero.
She carried the idea across.
Then, when the result surprised her, she experimented with the transformation itself.
The first rotate(90) made everything disappear.
A much smaller rotation brought the drawing back.
The important thing wasn't that 10 was the final answer.
It was that Tianjing had discovered something fundamental:
changing the coordinate system changes where your drawing lives.
And she discovered it by making the canvas disappear.
Learning
Programming knowledge becomes powerful when it can travel.
A syntax learned in one context is only the beginning. The deeper learning happens when a student recognizes:
“I've seen this idea before. Maybe it works here too.”
Tianjing had learned translate() and rotate() through 3D programming. Now she was applying the same tools to a 2D Chinese chess board.
Then came the second layer of learning: debugging through observation.
The screen gave her information.
90° → the board is out.
So she changed the angle and watched what happened.
That is already a very different relationship with code.
Instead of asking only:
“What is the correct syntax?”
she was beginning to ask:
“What is my program actually doing?”
Theme
Knowledge becomes transferable when students understand ideas, not just instructions.
A disappearing board can be more educational than a perfectly working one.
What Is Possible
A student can take an idea learned in 3D and use it in an entirely different 2D problem.
How Does It Happen
By experimenting, observing the result, and adjusting the model of what the code is doing.
Why Does It Matter
Because real programming is rarely a sequence of known answers. Sometimes the most useful information is the moment when the screen says:
“Something happened. Now figure out why.”