Living Museum of Learning
The First Line Became an Idea
Tianjing had only taken one P5.js class before this morning.
She had already completed her homework: a Chinese chessboard drawn with lines and loops. The screenshot looked impressive, but when we looked closely, there was a lot of literal coordinate work.
For example, the little decorative star in the palace had originally been written as:
line(55, 85, 55, 95);
line(55, 95, 45, 95);
line(65, 85, 65, 95);
line(65, 95, 75, 95);
...
It worked.
But these numbers didn't tell us why the lines were where they were.
At the beginning of today's class, Tianjing also had something else to conquer: the Grade 2 Khan Academy course challenge.
Two weeks earlier, she had tried a few problems and we stopped because she couldn't understand much of the language on the pages.
Today I told her:
“You can use a dictionary. You can use your iPhone to translate a whole question. If you still don't understand the problem itself, we'll discuss it. Try to get 29 out of 30.”
She went through all 30 problems.
There were careless mistakes.
There was even a mysterious US-coin question that neither of us understood. Tianjing said, “I would pick the smallest coin.” Wrong. I tried another small coin. Wrong again. 😂
Eventually we reasoned our way toward the answer.
Later she made another careless mistake and sighed:
“错得有点多哦.”
("There are too many mistakes.")
I said:
“Not too bad. The second doesn't count.”
She immediately replied:
“But this is very fundamental.”
That was Tianjing.
She knew exactly what bothered her.
Then we returned to the P5.js chessboard.
While reviewing her homework, we discovered something funny.
She had placed the palace X-lines inside a for loop because she was carrying over a Python habit: she thought indentation determined whether code belonged to the loop.
So she had drawn those huge X's eight times. 😂
Once we corrected that mental model, we moved quickly.
I wanted to transform one tiny piece of the old coordinate-based code.
I pointed to the first short line.
“Tell me the length of your short line.”
“10, 10?”
She was completely certain.
Instead of correcting her, I asked her to change the value slightly and use the program to verify her guess.
She tested it.
Then:
“Now give it a name.”
She chose:
d
Later, when another quantity needed a name, she made her own decision:
“I would use d for the length.”
I loved that moment.
She wasn't merely learning what a variable was.
She was beginning to decide what a variable should mean.
Then I asked:
“Tell me the gap between the short line and the long grid line.”
“5, 5?”
😂
Again, we tested, observed, and reasoned.
Little by little, the mysterious numbers became meaningful quantities.
The most exciting part of the entire class was the refactoring of that one short line.
Her old version was:
line(55, 85, 55, 95);
Her new version became part of a geometric description:
let c = 17;
let d = 10;
line(
20 + cellSide - d,
20 + 2 * cellSide - c - d,
20 + cellSide - d,
20 + 2 * cellSide - d
);
This may look like an ordinary programming improvement.
It wasn't.
The numbers 55, 85, 95 had been replaced by relationships involving the chessboard's origin, cell size, gap, and line dimensions.
She was no longer simply saying:
“Put a line here.”
She was beginning to say:
“This line belongs here because of the geometry of the board.”
And she understood the expression well enough to write it herself.
There was no word that could quite capture the excitement around that little piece of code.
It was one of those conversations where the teacher and student keep pulling on an idea:
Why this number?
What does it control?
Can we change it?
What should we call it?
What is this distance relative to?
Can the board itself tell us where the line belongs?
The screen was only showing one short line.
But the conversation around it was enormous.
At the end of the class, after we had moved through several new ideas, I asked:
“You don't need any help for the rest, right?”
She smiled and answered firmly:
“No.”
That “No” was the real ending of the lesson.
She was ready to continue on her own.
The remarkable thing is how quickly she had moved.
She had started with literal coordinates.
Then she learned to use loops and cellSide.
Then she discovered that indentation doesn't control JavaScript blocks the way it does in Python.
Then she began expressing the little star through meaningful quantities.
And finally, she was ready to finish the rest herself.
This wasn't really a lesson about one line.
It was a lesson about a transition:
from drawing something to describing why it is there.
And perhaps that is one of the earliest forms of mathematical thinking in programming.
A student can move from literal coordinates to geometric expressions after only a few encounters with a new programming language.
Don't immediately provide the formula. Let the student test, observe, name, question, and discover what each number means.
Because once a student can describe relationships instead of memorizing coordinates, the code—and the thinking behind it—becomes reusable, explainable, and their own.