Living Museum of Learning
Four Fat Guys Learn to Follow the Board
Situation
Enning had already built a beautiful Chinese chess board in p5.js.
Then, for the first time, she learned to use image() to put actual chess pieces onto it.
She proudly declared:
“Done.”
I looked at her beautiful yellow board.
There were four very fat guys sitting at the bottom, touching—no, overlapping—each other.
I reminded her:
“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.”
The WhatsApp post disappeared at lightning speed.
Fortunately, her Slack version had already been saved.
The four fat guys survived.
Turning Point
The next homework was:
Let pieces follow the change of board size.
The problem was simple to see.
The board followed side:
side = slider.value();
But the pieces were originally placed with independent numbers such as:
image(bxImg, 300, 430, 70, 60);
The board could change size.
The pieces couldn't care less.
They stayed where they were.
Enning now had to make the pieces part of the board's coordinate system.
Emergence
In the next class, she did it.
Instead of giving each piece unrelated screen coordinates, she began positioning them with:
gridX + col * side
gridY + row * side
and sizing them with:
side, side
For example:
image(rmImg,
gridX + 1 * side - side/2,
gridY - side/2,
side,
side);
Now the slider changed side.
The board changed.
The pieces changed.
The whole chess position changed together.
The four fat guys had finally learned where they belonged.
A Little Magic
There was another funny discovery along the way.
Enning had noticed the naming pattern of the piece images:
bx — black xiang
rm — red ma
bs — black shi
...
Then came:
bbImg
I asked:
“How did you know the image name like bb.png?”
She explained that she had tried many times. One attempt happened to be correct, and then she discovered the pattern.
I told her:
“Wow, you are so good at guessing! It might mean ‘Black Boss’ but I am not 100% sure.”
😂
Apparently, an otherwise respectable Chinese-chess naming convention had suddenly acquired a Boss.
Enning's latest Chinese Chess:
Learning
The important discovery wasn't image().
It wasn't even the slider.
It was the relationship between them.
A chess piece is no longer just an image sitting somewhere on a canvas.
Its position can be described in terms of the chessboard:
column + row + board size.
That means the same piece can follow the board when the board grows or shrinks.
This is one of those small programming moments where a student quietly moves from:
“Put this thing here.”
to:
“Describe where this thing belongs.”
And that is a much more powerful idea.
Theme
Make things belong to the world you are building.
The four fat guys were the beginning.
The slider was the challenge.
The coordinate system was the discovery.
And now Enning's Chinese chess board has pieces that actually follow its geometry.
The next question is waiting:
What happens when a piece is no longer just drawn, but becomes something the program can move?