Creating a Pattern (Tiling with Hexagons)

In Islamic art, patterns are often used to decorate the surface of objects. In this tutorial, we will learn how to create a pattern using hexagons.

Today, decaorative tile patterns are used in many places. They are used in the interior and exterior of buildings, on the floor and walls, and even on the ceilings. They are also used in the decoration of furniture, such as tables, chairs, and cabinets. In Islamic art, patterns are often used to decorate the surface of objects. In this tutorial, we will learn how to create a pattern using hexagons.

Best way to create a pattern is to use a tiling system. A tiling system is a set of shapes that can be repeated to fill a plane without any gaps or overlaps. In this tutorial, we will use hexagons as our tiling system. We will use hexagons because they are easy to create and they are also easy to repeat. We will also use hexagons because they are the most common shape in Islamic art.

Creating a hexagon

Let’s start with creating an hexagon. This is a basic step for creating a more complex pattern. We put the hexagon centered at (200,160) with the radius of 120 pixels.

Code preview-0: Draw a basic hexagon

Starting from the middle of the top edge (shown in red), we draw two lines from the red point to as we have an equal angle according to the normal of the edge.

Code preview-1: Connect two mid-edge points

We repeat this process for other edges. While we are drawing the lines, we will stop drawing when lines are intersecting the lines drawn before. We stop when we hit the edge we ended that blue points. We repeat this process for all the edges. We will end up with a star shape with 6 folds.

Code preview-2: Showing intersections when lines are drawn

When we repeat above process for other edges, we will end up with a clear star shape with 6 points placed in hexagon.

Code preview-3: Creating the star with 6 points

When we remove the circles, we will end up with a star shape with 6 points placed in hexagon. This time, we will also change the angle in which we draw the lines. We will determine the angle 30, 15 and 45 respectively.

Code preview-4: Stars with various angles: 30, 15, and 45

Creating a pattern with hexagons

Now that we have learned how to create a star using the hexagon, we can create tiling with hexagons. We will start with creating a hexagon with the radius of 120 pixels.

Step1-Creating a pair of hexagons

We will place the hexagon in the leftmost part of the canvas. We will place second hexagon top right of the first hexagon. We will repeat this process until we reach the rightmost part of the canvas. We will repeat this process for the bottom part of the canvas. We will end up with a pattern with hexagons.

Code preview-5: Create a pair of starts

Step2-Repeating the pattern towards the right of the canvas

We will repeat this pair of hexagons towards the rightmost part of the canvas. We will repeat this process for the bottom part of the canvas. We will end up with a pattern with hexagons.

Code preview-6: Create a pattern towards the right of the canvas

Step3-Repeating the pattern towards the bottom of the canvas

This time we will repeat the pattern towards the bottom of the canvas. We will repeat this process for the right part of the canvas. We will end up with a nice pattern that fills the whole canvas without any spaces and collapses.

Such a beautiful star pattern!

Code preview-7: Create a pattern towards the bottom of the canvas

We make the radius of the hexagons a little bit smaller, so that we can have more stars to understand the pattern. We will end up with a pattern with hexagons.