Creating a basic Islamic ornament (star shape)

Islamic ornaments are characterized by their intricate geometric patterns and abstract designs.

In this tutorial, we will learn how to create a basic Islamic ornament using Paper.js. Paper.js is a JavaScript library that allows us to create vector graphics in the browser. It is based on the HTML5 Canvas element and provides a clean and simple API for drawing and manipulating graphics.

Let’s start creating a star shape. This is a basic step for creating a more complex ornament.

Creating a star shape with 6 folds

To get started, we need to create a hexagon. We use hexagon as a guide while we are building our 6-fold star shape. 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 each edge (shown in red), we draw a line to the center of the edge that are 2 next of the edge we are on (shown in blue). We then draw a line from the center of the hexagon to the opposite edge.

Code preview-1: Connect two mid-edge points

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: Repeat the process with other edges

This is the basic shape we will use to create our ornament. Here actually we are creating a 6-fold star shape. In this star the angle between each fold is 60 degrees. We can prove that by drawing a line from the center of the hexagon to the center of the star, but it might a topic of another tutorial or you can do it yourself.

The point here is that we can create little bit of different 6-fold star shape by only changing the angle between each fold. We will use the same process to create more complex shapes. But I will leave that for another tutorial. The image below might give you an idea of what I am talking about.

Code preview-3: Repeat the same process with smaller angle than 60 degrees