Creating Star Shapes with Different Angles

Star shapes constitutes basic elements of geometric patterns and abstract designs. We will create varying star shapes by changing the angle between each fold.

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