Living Museum of Learning
Four Fat Guys on a Beautiful Yellow Board
Situation
Enning had already built a beautiful Chinese chess board in p5.js.
The board was not a fixed picture. Its size was controlled by a slider:
side = slider.value();
She had also learned how to load actual Chinese chess piece images:
bxImg = await loadImage("https://muzhi.com/assets/images/games/xiangqi/bx.png");
bmImg = await loadImage("https://muzhi.com/assets/images/games/xiangqi/bm.png");
And now, for the first time, she used image() to put pieces on her board.
When she said, “Done,” I asked:
“Done?”
“Yes,” she said.
“OK, let's share it.”
She shared the screenshot and code in Slack first, then posted them in the family WhatsApp group.
Turning Point
Then I remembered Enning.
“OK, Enning, I remember you. You know how to control the size of each piece. You know where to relocate them. You leave 4 fat guys on the beautiful yellow board, touching, no, overlapping each other.”
😂
She deleted the WhatsApp post at lightning speed.
“Leave it there,” I said.
Too late.
Fortunately, the Slack version was already there—saved and protected.
The four fat guys survived.
Emergence
The funny thing was that nothing was actually wrong with the program.
The program did exactly what she told it to do.
image(bxImg, 300, 430, 70, 60);
image(bxImg, 100, 430, 70, 60);
image(bmImg, 350, 430, 70, 60);
image(bmImg, 50, 430, 70, 60);
The pieces appeared.
They had the right images.
They had controllable sizes.
They could be relocated.
But they were living in a different world from the board.
The board knew about side, gridX, and gridY.
The four fat guys knew only about numbers like 300, 430, 70, and 60.
That difference was about to become the next lesson.
Learning
After the class, the homework was simple:
Let the pieces follow the change of board size.
The challenge was no longer to make a piece appear.
It was to make the piece belong to the board.
Hours later, Enning reported:
“我今天没有做完那个作业……我只做了一半……还没有办法一起移动。我明天早上看看能不能完成。”
She had not finished.
But she had tried.
And the unfinished part was exactly the interesting part: she had discovered that changing the board's size did not automatically change the pieces.
The board and the pieces needed to share the same geometry.
That is a much deeper programming idea than simply learning image().
Theme
A program does exactly what you tell it to do—even when what you told it to do looks ridiculous.
The four fat guys were not a failure.
They were evidence.
Evidence that Enning had moved from drawing a board to programming objects inside a world—and had reached the next question:
How do the objects know where they belong?