Drawing Regular Polygons in GLSL: Creating Triangles, Hexagons, and More

avatar

If you're new to the series or would like to catch up on the fundamentals, you can find every previous lesson, along with a summary of what each tutorial covers, here:

GLSL Beginner Series: A Journey from Your First Shader to Procedural Animation

In the previous tutorial, we learned how to create rounded rectangles using mathematics instead of textures. By combining simple functions, we built one of the most common shapes used in modern user interfaces.

Today we're going to leave circles and rectangles behind and learn how to create our first regular polygon.

If you look around in games and digital art, you'll notice that not every shape is a circle or a rectangle.

Hexagonal grids.

Triangular patterns.

Octagonal icons.

Stars.

Many of these graphics begin with regular polygons.

A regular polygon is simply a shape where every side has the same length and every corner is evenly spaced.

The exciting part is that we can generate them mathematically.

There is no need to import an image.

What Makes a Polygon?

A circle looks the same no matter which direction you measure it.

A polygon is different.

Instead of having an infinite number of sides, it only has a fixed number.

Three sides create a triangle.

Four create a square.

Five create a pentagon.

Six create a hexagon.

The number of sides completely changes the shape.

Starting from the Centre

First, move the coordinate system so the centre of the screen becomes (0.0, 0.0).

vec2 p = vUv - 0.5;

We'll use this centred position throughout the shader.

Measuring the Angle

Every point has both a distance and a direction.

GLSL provides the atan() function to calculate the direction.

float angle = atan(p.y, p.x);

The angle tells us where the pixel is around the centre.

Imagine drawing lines from the centre like the hands of a clock.

Every pixel belongs to one of those directions.

Measuring the Distance

We also need to know how far the pixel is from the centre.

float radius = length(p);

Together, the angle and the radius describe every pixel around the centre.

Dividing the Circle

Suppose we want a hexagon.

A full circle contains approximately 6.28318 radians.

A hexagon has six sides.

Each side therefore occupies one sixth of the circle.

float sides = 6.0;

Now the shader knows how many edges to create.

A Simple Polygon Function

Here's a compact polygon calculation.

float polygon = cos(

floor(

0.5 +

angle /

(6.28318 / sides)

)

*

(6.28318 / sides)

-

angle

)

*

radius;

Although it looks complicated, the idea is simple.

The angle is snapped into evenly spaced directions.

That creates flat edges instead of a smooth circle.

Turning It into a Shape

Use smoothstep() to create a visible edge.

float shape =

1.0 -

smoothstep(

0.28,

0.29,

polygon

);

You now have a procedural polygon.

Complete Shader

#ifdef GL_ES
precision mediump float;
#endif

varying vec2 vUv;

void main(){

    vec2 p = vUv - 0.5;

    float angle = atan(p.y, p.x);

    float radius = length(p);

    float sides = 6.0;

    float polygon = cos(

        floor(

            0.5 + angle / (6.28318 / sides)

        )

        * (6.28318 / sides)

        - angle

    ) * radius;

    float shape =

        1.0 -

        smoothstep(

            0.28,

            0.29,

            polygon

        );

    gl_FragColor = vec4(vec3(shape),1.0);

}

Even though the formula is longer than previous examples, the only value you usually need to change is the number of sides.

Changing the Number of Sides

Triangle.

sides = 3.0;

Square.

sides = 4.0;

Pentagon.

sides = 5.0;

Hexagon.

sides = 6.0;

Octagon.

sides = 8.0;

One number creates an entirely different shape.

Adding Colour

Colour the polygon just like any other procedural object.

vec3 color = vec3(0.25,0.8,1.0) * shape;

gl_FragColor = vec4(color,1.0);

Try different colours to see how the appearance changes.

Animating the Polygon

Rotate it over time.

angle += uTime;

Now the polygon slowly spins.

This simple animation appears in many loading indicators and interface animations.

Combining Polygons

Remember what we learned earlier.

Shapes are just numbers.

That means we can combine polygons with circles or rectangles.

float finalShape = polygonShape + circle;

Or subtract one.

float finalShape = polygonShape - circle;

The possibilities continue to grow with every new shape we learn.

Where Are Regular Polygons Used?

Regular polygons appear in many places.

  • Hexagonal grids.
  • Game icons.
  • Sci fi interfaces.
  • Loading animations.
  • Abstract artwork.
  • Technical diagrams.
  • Badges.
  • Decorative backgrounds.
  • Motion graphics.
  • Procedural logos.

Learning polygons opens the door to a huge range of procedural designs.

Try These Experiments

Create a triangle.

Create a pentagon.

Create an octagon.

Rotate the shape.

Combine two polygons.

Change the colour.

Observe how changing a single value completely transforms the result.

A Small Challenge

Can you create these effects?

  • A spinning triangle.
  • A glowing hexagon.
  • A rotating octagon.
  • Two overlapping polygons.
  • A colourful procedural badge.

Each challenge builds directly on everything you've learned so far.

What We Learned

Today we learned how to create regular polygons by dividing a circle into evenly spaced sections.

By combining angles, distance, and a few mathematical functions, we generated shapes with any number of sides.

This technique is used throughout procedural art, game development, and motion graphics.

Posted Using INLEO

coding glsl waiv neoxian
0
0
0.000
0 comments