Living Museum of Learning
The Cell Side Was Born
Ethan was building the net of a soccer goal in p5.js.
He had already built his soccer ball model the week before. Now he was trying to unfold another familiar object into geometry: the goal and its net.
He began by separating the easy, repetitive construction from the parts that required real thought.
“En, I think I have some rough idea. Let me draw 10 lines first...”
Then he corrected himself:
“Let me draw those no brainer lines first.”
The lines themselves were not the interesting part. Ethan knew they were repetitive and could be handled mechanically.
The interesting part was figuring out the geometry underneath them.
As the net took shape, Ethan discovered that the different groups of lines could not simply be chosen independently. If the net cells were to have a consistent side length, the horizontal and vertical divisions had to obey the same constraint.
Donald asked:
“What’s the constraint between those vertical lines and horizontal lines?”
It took Ethan a few minutes.
Then Donald asked:
“In that case, we should define something else above the two values, right?”
Ethan immediately saw it.
let cellSide = 7;
That little variable changed the construction.
Instead of manually deciding how many divisions each direction should have, Ethan could make the cell side the source of truth and derive the corresponding counts.
And then the geometry started giving something back.
When a new pair of trapezoids appeared, Ethan exclaimed:
“Wow, so good.”
Then, looking at what his construction had produced:
“Very perfect!”
A little later, after expecting that much more work would be necessary:
“Wow, I thought I had to do more. But it just came.”
The computer was no longer merely executing lines of code. It had become a laboratory where Ethan could formulate a geometric idea, encode it, and see the consequences immediately.
At another point, he ran the program:
“Let me run it. OK, NO PROBLEM!”
And after wrestling with the construction:
“Now it appears. Just now my brain was burned.”
That last sentence may be the most revealing.
The difficult geometry had not disappeared. Ethan had moved part of it outside his head—onto the canvas, into the code, and into a structure he could inspect.
The important breakthrough was not n.
It was cellSide.
Ethan already had the idea that different groups of lines required different counts. He even recognized:
“I need 2 loops for the vertical lines, right?”
The deeper question was: what determines those counts?
Once cellSide became the common constraint, n, m, and p became consequences rather than arbitrary knobs.
That is a small piece of mathematical modeling:
define the underlying quantity → derive the dependent quantities → let the construction follow the rule.
And Ethan's own behavior showed something else.
He didn't stop when the class ended.
Later he sent Donald:
“uncle，花了点时间吧网补全了[Grin]”
He had spent some time completing the net himself.
The exhibit therefore isn't really about whether Ethan could draw a soccer-goal net.
It is about a much more interesting transition:
He was beginning to encode the structure that generates the picture, rather than merely encoding the picture itself.
A complicated geometric object can emerge from a small set of relationships.
Find the common constraint, make it the source of truth, and let the rest follow.
Mathematical structure can become a computational tool for thinking, not just a formula to remember.