Hexagons, or a Boa Constrictor Digesting an Elephant

My initial self-challenge seemed simple enough: draw some hexagons.  Have you ever read the book "The Little Prince" by Antoine de Saint-Exupery, where the pilot draws a boa constrictor digesting an elephant, and everyone tells him he's drawn a hat?  That's how my it felt to draw hexagons in React Native.  All I had to do was keep re-imagining what a hexagon WAS, and drawing it became simple.

I decided that I didn't want to import a hexagon library to draw my hexagons - instead I wanted more opportunity to play with React Native styling, and draw them that way.  I found a couple of articles online that represent a hexagon as 3 pieces: a rectangle with 2 triangles.  Here's one example.  "Cool," I thought.  "I can do that."  So I drew a hexagon.

My First Hexagon

However, I wanted to be able to dynamically change the hexagon's shape, which lead me to discover this website of geometry equations to calculate side measurements for the rectangle and triangles.   A little math and some square-roots of 3 later, I had a hexagon that was mathematically correct and easy to re-size.

Then I realized that my game would require each edge of the hexagon to be a different color.  Instead of visualizing a hexagon as 3 pieces, I reimagined it as 6 "slices" each of a different color.  I figured I could put a smaller hexagon in front, so it looked like a green center with 6 differently colored sides. My first "slice" went smoothly (I had my equations from before, so I calculated the length of each edge) but then I decided I wanted to rotate each slice around a point.  Rotating went easily enough, using the React Native transform property, until I tried to put all of my rotated slices into a single hexagon shape.  Since I was drawing each triangle as borders on a transparent square, the rotational point didn't match up with any specific triangle point, which lead me down a math rabbit-hole trying to determine rotational positioning.

At this point my husband calmly listened to my complaining, and asked why I had to rotate the triangles at all.  He suggested that the hexagon doesn't have to be 6 slices rotated round center point, but it could instead be visualized as 2 equilateral triangles (one pointing up and one pointing down) that are drawn multiple times, shifted into the correct position.  This sounded reasonable, so I reorganized my slices to be like points on a compass: North, South, NE, SE, etc.  I plopped an all-green hexagon in the middle, and had my first tile.

Tile of Hexagon Slices

Then I created a new git commit, walked away from my personal computer, and got sucked into work without revisiting the land of hexagons.

Next: A Game Board with Rotations & Gestures

As it stands, I can now draw my tiles with their differently colored sides, and I have a Tile object which will store the order of its sides as well as a function to let you "rotate" the hexagon by changing the colors of the sides.  I decided to visualize the game board (which will eventually be a larger hexagon made up of these smaller ones) as columns of hexes, and can offset the placement of each column's top and side properties to draw them next to one another.

Just like before, rotated to the left

Now I need to add in native gestures, so that the board can be enlarged/shrunk.  Then clicking on a single hex will need to remove it from its placement and allow the hex to be rotated.  Once rotated however the user would like, the hexagon needs to go back to the board in its new configuration.