## The Center of a Triangle

Category : Uncategorized

Last night I was working with a student at The Coder School and we found a Processing sketch on Twitter that we wanted to challenge ourselves to create:

The great thing about doing this kind of visual program is a student has to break it down into its simplest parts. In this case the simplest part is a rotating equilateral triangle. In the Processing graphics package, triangles are made by giving the program three points, for the vertices. However, the triangles are all rotating around their center! The first thing we had to do was to write a function that would create a triangle at a certain location, and generate the vertices based on the size of the triangle we wanted.

But how do you find the center of a triangle? It’s called a centroid, and the x-coordinate is clearly halfway along the base, but it’s not really halfway up the triangle at all. See?

The good news is the ratios between the sides of a 30-60-90 triangle are well known, and they expect you to know these ratios on the SATs. The sidelength of the equilateral triangle is represented by the hypotenuse of the figure on the right (2x), and the shorter leg is half the sidelength (x). The longer leg is the shorter leg times the square root of 3 (around 1.7). As you can see in the figure on the left, the equilateral triangle can be divided into 6 congruent 30-60-90 triangles where the height of the original triangle (the green dotted line) is the sum of a hypotenuse and a smaller leg. But if you remember the ratios, the hypotenuse (2x) is twice the length of the smaller leg (x). Therefore, the centroid is a third of the way up the equilateral triangle.

That means the vertices of the triangle are:

You might notice in Processing the y-coordinates get larger as you go *down* the screen. So the centroid is at (0,0) and the top vertex has a negative y-coordinate. And by rotating in Processing before executing the triangle function, it’ll look like the triangle is rotating around its centroid. Try it out below: move the sliders for more triangles and a bigger offset.

See the Pen Rotating Colorful Triangles by Peter Farrell (@peterfarrell66) on CodePen.