Making Math with Art
What I think of when I hear “Math” is what most people think of when they hear “Art.” It’s creative and beautiful and fun and challenging and all that good stuff. (School math, like school food, bears little resemblance to the real thing.)
I did well in my math classes when I was younger only because I could solve equations and factor polynomials. College math was just another step in that boring direction: using more complicated tools to solve uglier and uglier equations. It was only when I began teaching that I wanted to show my students the more fun and beautiful side of math.
I won’t say “Art is all math and perspective” but when you try to create cool art using a computer, you’re no longer schmearing paint here and there. You need to be specific about where a shape or line is rendered, and that requires a coordinate system. I shouldn’t say it “requires” it. Even as a good math student I hated hearing “You need math to do that.” Maybe you don’t. Try doing it without math and see how it works out. Maybe it will: some tasks can be eyeballed or ballparked. But more likely there are tools (computer or math-related) that will make a task a lot easier. I like to give my students a few minutes to try something before giving them such a tool. Best case scenario, they’ll make it work for a specific case. Worst case scenario, the task will seem so impossible that they’ll be relieved to know there’s a tool that will make easy work of it!
At one of my local libraries I found Lauwerier’s Fractals, with some beautiful images of “Endlessly Repeated Geometrical Figures.” Some programming students of mine were inspired to draw the figures using Python and the Processing graphics library. Like this one:
The trick to this design is to go from a square to a “tree” by adding two squares on top in a right triangle. Their areas are related by the Pythagorean theorem, hence its name “Pythagorean Tree.” Using programming, we’ll make “trees” out of each of those smaller squares, too, like this:
We need (x,y) coordinates to place the bottom square in the right place. Then we need to do some translating and rotating to place the other two squares. Students are drilled on translating and rotating in geometry class but they never get to make anything cool with it. “Translate the point (2,3) two units down and 5 units to the left” is nobody’s idea of an engaging math task.
Back to our work of art. The rotation angle can be any angle, but then there’s the matter of how big the next two squares have to be. Sure, we could eyeball how big to make the squares relative to the bottom square, but there’s a handy math tool that helps us get exact results and will continue to help all the way up the tree.
The ancient Greeks knew the ratios between the sides in a right triangle followed a pattern, and they even gave names to those patterns. The names have come down to us as “sine,” “cosine” and “tangent” and two of them will come in handy for this problem. If we call the length of the side of the bottom square “sz” (because it’s more descriptive than “x” but the descriptive variable name “size” is already a keyword in Processing) then the other sides in the central triangle are:
Now we can measure the length of any of the smaller squares with respect to the size of bottom square. Not only that, if we change the “lean” angle, the same formula still applies! Here’s how that looks in Python:
Every self-respecting graphics library works in radians, not degrees. It’s not a hard task to convert them (multiply by pi and divide by 180), but Processing has a handy “radians” function to automatically convert the degree value.
We chose 30 for the angle of lean and 80 for the size of the bottom square and (after adding some recursion!) we got the Pythagorean Tree you see above. But here’s where a good computer graphics program can take Art to a new level: We can link the value of a variable (like A, the lean angle) to the position of your mouse so when you move the mouse, the value of A changes accordingly. Math teachers: shouldn’t variables be able to change?
Now, numerous times a second, the program will get the position of the mouse, map that value to the angle variable and use the trig functions to draw the tree. Add some color and even the most jaded math student will say, “Cool!”
The code for this project (all 35 lines of it!) is on my github repo: https://github.com/hackingmath/sketches/blob/master/Pythagorean_Tree.pyde
If you’d like to contact me, I’m peter@techymath.com.
