The Chinese Chessboard That Wasn’t One Piece
Enning’s p5.js homework was to draw a Chinese chessboard.
She had already done a lot right: the 10 horizontal lines, the 9 vertical lines above the river, the 9 below it, and—very nicely—she used loops and parameters instead of drawing everything by hand.
But several things were missing.
Donald asked:
“Did you miss the 2 big Xs, and the two ends of the river?”
Then Enning submitted a version with two enormous green X’s. 😂
Donald:
“Ha ha. No in green.”
“Not.”
“That’s my highlight.”
“All lines are in black.”
One problem solved.
Then came the next:
“Hey Enning, a board is one piece, not two.”
Instead of telling her exactly which lines to add, Donald let Enning figure out what “one piece” meant.
She marked the missing connections herself in green.
Then she sent:
“Look like this”
Donald:
“Yes. You got it.”
And she went back to the code.
The final program was no longer just a collection of lines.
Enning had created a model of the board:
side described the repeating unit.
gridX and gridY described the board's position.
for loops generated the regular grid.
Additional lines described the river connections.
Four diagonal lines described the two palaces.
Something important had emerged:
the picture was becoming a system.
And the funniest part was that Enning had also learned to use the teacher's green annotations as clues rather than simply as instructions.
Enning learned more than how to draw a Chinese chessboard.
She learned to:
turn a visual object into code;
recognize repeated structure;
use loops instead of repetition by hand;
separate the regular parts from the special parts;
read a visual correction;
communicate visually when words are not enough;
revise her own program;
and, perhaps most importantly, keep going when the first version isn't complete.
The final breakthrough was not a new line of code.
It was:
“Look like this.”
She had learned how to show what she understood.