Living Museum of Learning
From Trapezoid to Code
Nicole and I were building a soccer goal in p5.js. The vertical pole and the two horizontal bars were already standing. Only the slanted support remained.
Instead of guessing the angle or dragging it until it looked right, Nicole drew a clean trapezoid on the whiteboard. Every line was carefully labeled. The horizontal difference became a. The vertical height became o. She even rotated the label on the vertical side by 90°, simply because it looked right.
She wrote:
tan(α) = o / a
Then she naturally continued toward the inverse tangent.
"Great!" I said. "In code, we use atan()."
The whiteboard and the editor suddenly became the same language.
Instead of calculating the angle by hand, Nicole chose to return to her p5.js program and let the code answer the question.
Before running it, I glanced at the diagram.
"It looks like... seventy-ish."
The console printed:
70.xxx
We both laughed.
With the angle solved, the slanted bar rotated perfectly—but it still didn't meet the opening of the trapezoid.
Nicole pushed it too far on her first attempt.
Instead of correcting it, I smiled.
"Wow, we got a great small challenge."
We left the question alone.
Ten minutes later, after quietly thinking about the geometry, Nicole wrote from her own reasoning:
m = (netUpperWidth + netLowerWidth) / 2
She redrew the diagram—just as clean and elegant as the first one—and transferred the mathematics directly into code.
let average = (netUpperWidth + netLowerWidth) / 2
translate(average, -netHeight/2, 0)
let a = netLowerWidth - netUpperWidth
let o = netHeight
let alpha = atan(o/a)
rotateZ(90 + alpha)
let h = o / sin(alpha)
cylinder(poleThickness, h)
The slanted bar fit perfectly.
Beautiful software often begins with a beautiful model.
When a problem is understood mathematically, the code becomes almost inevitable.
Nicole didn't memorize a trigonometric function that day.
She used mathematics to make a virtual object stand exactly where it belonged.
Before class ended, Nicole selected a nicely balanced region of the canvas and prepared to take a screenshot of the finished trapezoid.
"No, no," I stopped her.
"Copy the whole canvas."
She looked puzzled.
"The whole point of today's lesson is that the origin is our anchor. We built everything around (0, 0, 0) so that later we can assemble four bars without any pain."
She smiled, understood immediately, and copied the entire canvas instead.
