Tutorial 1d : Polygons
 
Introduction

There's nothing complicated about using Glide to render polygons, but it's a little different from the other drawing functions so we're going to cover it in a separate tutorial.

So far, we've seen how to draw three different shapes - dots, lines and triangles. Glide uses a different function for each of those shapes because they always have the same number of vertices - a dot always has one, a line always has two and a triangle always has three.

Of course, a non-triangular polygon can have any number of vertices greater than three. For example, a square has four vertices; an octagon has eight. It would be impractical and impossible for Glide to offer a different function for every conceivable polygon.


Figure 7 : A convex polygon (left) and a concave polygon (right).
Instead, we can use either the grDrawPolygon or grDrawPolygonVertexList functions, which both behave in the same way for every possible polygon, no matter how many vertices it has.

Note: when you tell Glide to render a polygon, it first converts it to a series of triangles which are then rendered individually. Because of this, Glide can only work with convex polygons - that is, a polygon with all internal angles less than 180 degrees.

Using grDrawPolygonVertexList

We'll look first at how to draw a polygon using the grDrawPolygonVertexList function, which is the simpler of the two. To use it, we must:

  • Create an array of vertices.
  • Tell Glide how many vertices there are.
  • Draw the polygon.
Create an array of vertices

As with all other rendering functions, Glide uses the GrVertex structure to hold information about each vertex of a polygon. In the previous tutorials, we've been creating and working with several individual vertices, such as with the grDrawTriangle function:

  GrVertex v1, v2, v3;
  grDrawTriangle( &v1, &v2, &v3 );
When rendering a polygon, we create an array of vertices instead. For instance, we would need an array of five vertices if we were going to render a pentagon:
  GrVertex vertices[ 5 ];
We then specify the vertex positions as we did for the other drawing functions, except we'll be working with elements of an array rather than individually named vertices, ie:
  vertices [ 0 ].x = 100.0f;
  vertices [ 0 ].y = 100.0f;

  vertices [ 1 ].x = 200.0f;
  vertices [ 1 ].y = 150.0f;

  [ ... etc ... ]
Note: when using the grDrawPolygonVertexList function, Glide will connect the vertices linearly in array order, so we must make sure they are arranged either clockwise or anti-clockwise. If we give them out of order, the polygon will not appear how we intend it to.

Tell Glide how many vertices there are and draw the polygon

When we call the grDrawPolygonVertexList function to draw the polygon, we use two parameters. The first parameter tells Glide how many vertices the polygon has and the second is the array of vertices that should be used.

For example, to render a pentagon, the code would be:

  GrVertex vertices[ 5 ];

  [ ... define vertices ... ]

  grDrawPolygonVertexList( 5, vertices );
It can be worth remembering that the first parameter, the number of vertices, can be different from the number of vertices in our array. For instance, we could define an array of ten vertices and have Glide render a polygon using only the first six of them. However, the number we specify must not be more than the number of vertices in our array.

Using grDrawPolygon

The grDrawPolygon function is a little more complicated, but it is also much more powerful. To use it, one more step is necessary, thus:

  • Create an array of vertices.
  • Tell Glide how many vertices we want to use.
  • Tell Glide the indices of the vertices that should be used.
  • Draw the polygon.
Create an array of vertices

We create an array of vertices in the same way as we did for the grDrawPolygonVertexList function, although we don't have to create them in any particular order:

  GrVertex vertices[ 5 ];

  vertices [ 0 ].x = 150.0f;
  vertices [ 0 ].y = 100.0f;

  vertices [ 1 ].x = 100.0f;
  vertices [ 1 ].y = 200.0f;

  [ ... etc ... ]
Tell Glide the indices of the vertices that should be used

The grDrawPolygonVertexList function will use any number of vertices, which will be specified in an array of indices. For instance, we could define ten vertices, and then give Glide an array of five indices specifying that the 1st, 2nd, 4th, 7th and 9th vertices should be used.

Remembering that our array of vertices is zero-based, the code to do this would be:

  int indices[ 5 ];

  indices[ 0 ] = 0;
  indices[ 1 ] = 1;
  indices[ 2 ] = 3;
  indices[ 3 ] = 6;
  indices[ 4 ] = 8;
However, if we know in advance what vertices we we'll want to use, we would probably want to do it more compactly:
  int indices[] = { 0, 1, 3, 6, 8 };
Tell Glide how many vertices we want to use and draw the polygon

When we call the grDrawPolygon function to draw the polygon, we use three parameters. The first parameter tells Glide how many vertices the polygon has, the second is the array of indices and the third is the array of vertices.

For example, to render a pentagon using the 1st, 2nd, 4th, 7th and 9th vertices from an array of ten, the code would be:

  GrVertex vertices[ 10 ];
  int indices[] = { 0, 1, 3, 6, 8 };

  [ ... define vertices ... ]

  grDrawPolygon( 5, indices, vertices );
Working example


Figure 8 : The grDrawPolygon and grDrawPolygonVertexList functions drawing two sets of similar shapes.
Download the tutor_1d example code to see a working example that draws the shapes shown in Figure 8.

The red pentagon and green triangle are drawn using the grDrawPolygon function, with all eight vertices declared in the same array and indexed using two separate arrays.

The blue pentagon and magenta triangle are drawn using the grDrawPolygonVertexList function, with both sets of vertices being declared in two separate arrays.

Next Tutorial | Main Page

 


This tutorial is ©1998 by Andrew Smith. No part of this tutorial may be reproduced without permission. If you want to reproduce any of this tutorial for non-commercial purposes then I'm not likely to try and stop you, but please ask me first.