The Power of Hexagons: Starting from scratch with 3D drawing in Swift (CAShapeLayer, CGPath)

This post is the first in a series of posts about drawing (and later animating) in 3D using hexagons. I don't spend time here discussing the code in detail, and instead present it as a series of Gists that can be downloaded and experimented with. Here the focus is mainly on the basic theory of drawing and positioning of 3D objects using hexagons.

The reason for writing this post is in part to demonstrate how code can be a more efficient way of drawing than a reliance on creating visual assets to add to an Xcode project – something that is true now more than ever with the increasing number of screen sizes and resolutions – but mainly it's about extending drawing skills through mathematics.

For the maths side of things, I've found mathopenref.com particularly helpful.

Cube theory

It all begins with a hexagon.

If you can draw a hexagon in code (by determining its vertices from its origin and radius) then you can also draw a cube.

A cube (in the orientation shown above) is simply a hexagon that has lines drawn from every other vertex) to its origin. These lines complete the visible faces of the cube.

The hidden faces are completed by adding lines from the other vertices to the origin. It doesn't matter which vertices are used to draw the visible faces and which are used to draw the hidden faces, but the choice will determine whether the cube has the appearance of being looked at from above or below.

Cube code

The following code produces a coloured cube that is shaded to assist in the illusion of the cube. (Note: There are areas where I already know the code could be optimised, but I'm writing down the theory first and will improve the code over time.)

In the code, I simple drawing the visible sides, but there is nothing stopping us from adding the hidden sides should we wish to manipulate the object in 3D space.

Prism theory

Hexagons can be used for more than creating cubes. By determining the midpoint between the uppermost vertices that are opposite one another it is possible to draw a prism.

A much flatter prism could be drawn by using the origin of the hexagon as the point at which the tips meet.

Prism code

The code for adding the prism can be found here.

The positioning of the prism is straightforward, because the distance between the origins of touching cubes (or prisms) will always been the same as the radius if the object stretches to the extremity of the hexagon and those objects are set in vertical alignment with one another.

In this example the base stretches to the extremity but the tip does not. If we wish to know the co-ordinates of the tip we need to store that information or calculate anew when required.

Spacing and positioning cubes

A second hexagon centred on a vertex of a first hexagon will provide a position next to, behind, above and so on, depending on which vertex is chosen. For example:

This information cannot only be used to place blocks but to also leave block-sized spaces.

Spacing and positioning code

Spacing and positioning code can be located here.

And that concludes this first post on the power of hexagons. (I'll leave you to add the flags you see in the image at the top of the page.)

Follow @sketchytech