Living Museum of Learning
From 70 to Perfectly Centered
Enning was back from a one-day vacation.
We started with typing practice. She had been working through TypingClub and was around Lesson 40. I then introduced her to Keybr, a typing site I had learned about from William Lin, an international CS competition champion who later studied at MIT.
The first Keybr session gave Enning a baseline: 13.6 WPM.
Keybr introduced Enning to the key n—a key she had already been using three times every time she typed her own name. 😂
Then we returned to our main project: drawing a Chinese chessboard in p5.js.
On the whiteboard, I drew a line segment of length 100 and another of length 80.
“Put the short one on the long one, centered.”
She did.
“What is the numerical relationship here?”
“10.”
“How did you get 10?”
She wrote:
100 - 80 = 20
I stopped her.
“Hey, put them in one expression.”
I had taught her this style before: don't just calculate a number—express the relationship.
Then I changed 80 to 81.
“Give it a name.”
She wrote:
t = (100 - 81) / 2 = 9.5
“Good. Give the other two numbers names too.”
She arrived at:
t = (a - b) / 2
We weren't finished. We still needed the endpoint.
She wrote:
n = t + b
Then stopped.
“Go ahead, Enning. You knew t, right?”
And she continued:
n = t + b
= (a - b) / 2 + b
= a/2 - b/2 + b
= a/2 + b/2
= (a + b) / 2
Then I asked the question that mattered:
“Why do we need this? Why do we bother working on these?”
“Eh... clear? Clean?”
Not yet.
So I sent her back to the project.
“Center the Chinese chessboard.”
And suddenly the reason became visible.
The Chinese chessboard was drawn on a 400×400 canvas.
Enning had originally estimated:
gridX = 70
gridY = 60
We kept her original estimates in the code instead of simply replacing them.
Then we calculated the exact values.
For the horizontal direction, the board occupies 8 × side:
t = (400 - 8 × side) / 2
With side = 38, this gives:
gridX = 48
But as we adjusted the board and settled on the actual geometry, the important comparison remained: her original estimate versus the calculated position. She could see what “approximately centered” meant versus what perfectly centered meant.
For the vertical direction, the board occupies 9 × side, giving a calculated value of 60.5.
We deliberately kept her 60 beside the accurate 60.5.
She saw the same mathematical idea twice:
one formula, two directions, one perfectly centered board.
The algebra from the whiteboard had stopped being an abstract exercise. It had become the thing that positioned her Chinese chessboard exactly where it belonged.
We then took another step.
Instead of leaving the calculations inside setup(), we created our own function:
calculateGridXGridY();
and separated the board drawing into:
drawBoard();
The program began to acquire structure:
calculateGridXGridY();
drawBoard();
Then came the missing stars.
Enning had played Chinese chess before, but she hadn't noticed what was missing from our board. I let her search and check rather than simply telling her.
We decided to draw the first star together.
Not the whole star.
Just the first 1/8.
And we spent a surprisingly long time on these three lines:
let gap = 5;
let s = 14;
line(gridX + side + gap, gridY + side * 2 - gap,
gridX + side + gap + s, gridY + side * 2 - gap);
Three tiny lines.
But hidden inside them were enormous numbers of ideas.
What does a variable represent?
Why give gap a name?
Why give s a name?
Why is the starting point expressed relative to gridX and gridY instead of using a mysterious absolute number?
Why is side multiplied by 2?
Why is gap added in one direction and subtracted in the other?
What does + s mean?
Why is the line horizontal?
Why should this little piece of the star move automatically when the board moves?
At some point, I felt that she had absorbed most of what I wanted her to see.
The code wasn't merely making a line appear anymore.
It was describing a geometric relationship.
And that is the beginning of professional programming.
This class connected several things that are usually taught separately.
Enning started with a physical picture: one segment centered on another.
She turned the picture into numbers.
The numbers became variables.
The variables became an algebraic expression:
t = (a - b) / 2
The expression became a coordinate calculation.
The coordinate calculation became a function.
The function became part of a reusable drawing system.
And finally, the same way of thinking appeared inside three tiny lines drawing part of a star.
She experienced something much more important than learning a formula:
a mathematical relationship can become executable.
She also experienced why we bother making expressions general.
If the board changes size, the formula still works.
If side changes, the board remains centered.
If the position changes, the star can follow it.
Instead of telling the computer where something happens to be, we describe why it is there.
That is a very different level of thinking.
And the homework came immediately:
Draw your first star on the Chinese chessboard.
Not copy the star.
Not finish my code.
Draw your first star.
A simple Chinese chessboard can become a laboratory for geometry, algebra, coordinate systems, abstraction, and professional programming.
Start with something visible. Ask for a relationship. Name the quantities. Generalize. Then put the mathematics back into a real project.
Because the goal isn't to make Enning memorize t = (a-b)/2. The goal is for her to recognize the relationship herself—and eventually make the computer express it.