Draw Circle Using Triangles Opengl

Knowing that OpenGL merely comes with commands that describe simple geometric primitives such every bit points, lines and polygons (see OpenGL Geometric Shapes), it would be overnice to extend over these and describe more complex structures, such equally those supported by the Java AWT library. In this postal service, I'll show the OpenGL implementation of the drawOval, fillOval, drawArc, fillArc methods of the Java Graphics class.

Before nosotros get to cartoon an oval or an arc, allow's commencement meet how to draw a circle. We can apply points, lines or polygons. To draw the outline of the circle, we can identify points around the circle, then connect the consecutive points using lines. The more points we have, the more lines we would draw and the more realistic the circumvolve would look like. Below are samples of a circumvolve drawn using 3, 4, 5, 10 and l segments.

circle

So if nosotros figure out how to draw the points on the circle's perimeter, we'll be able to connect those points with lines and thus have a circle. To describe a indicate, all we need to know is its x and y coördinates (assuming z = 0). Relative to the center of the circle , the coördinates of a point at the circle's perimeter are calculated as follows (rule in trigonometry):

ten = r * cos θ y = r * sin θ

where r is the radius and θ (theta) is the angle between the x-axis and the radius that connects the bespeak to the center. And then to draw a point, we need to know its bending θ. The angle θ of each signal volition depend on how many points we'll use to draw the circle. As we know, the bending all around the circle is 360 degrees, which is equivalent to 2Π radians. If we are to use 10 points to draw the circumvolve, the angle increment between each point and the next volition be 2Π / 10. Thus, θ of point 1 is 0, θ of indicate ii is 2Π / 10, θ of betoken 3 is 4Π / 10, …, and θ of bespeak x is 18Π / 10. So here is how nosotros can get the coördinates of all the points of a circumvolve with radius r and segments n.

δ = 2Π / n; for (θ = 0; θ< 2Π; θ+= δ) {     x = r * cos (θ);     y = r * sin (θ); }

To depict the circle from those points, nosotros should use the GL_LINE_LOOP OpenGL fashion, which will draw a connected group of line segments from the beginning vertex to the last, then dorsum to the offset. That's how nosotros draw the circle. To implement the more generic example of drawing an oval, all we take to do is make the trigonometric rule for the coordinates of a point more generic. In social club to be able to derive such a rule, we should imagine a bounding rectangle around the oval. In the example of a circle, that bounding rectangle is a square with side s equal to the bore of the circle, which is two * r. So r is equal to s / 2.

x = s/2 * cos θ y = s/two * sin θ

The bounding rectangle has a width due west and height h. A flake of intuition leads us to the rule that defines the coordinates of a betoken on an oval:

ten = due west/2 * cos θ y = h/2 * sin θ

The total source lawmaking of the drawOval function is shown beneath:

                            void          drawOval (float          x_center,          float          y_center,          bladder          due west,          bladder          h,          int          n) {          float          theta, angle_increment;          bladder          ten, y;          if          (n <=          0)         due north =          1;     angle_increment = PI_2 / north;     glPushMatrix ();            glTranslatef (x_center, y_center,          0);          glBegin (GL_LINE_LOOP);          for          (theta =          0.0f; theta < PI_2; theta += angle_increment)     {         10 = west/2 * cos (theta);         y = h/2 * sin (theta);                      if          (color[currentShape])             glColor3f (x, y, x*y);         glVertex2f (x, y);     }     glEnd ();     glPopMatrix (); }

To fill the circle, instead of using lines, we need to use polygons. The best style to use here is the GL_TRIANGLE_FAN, which draws a connected group of triangles. One triangle is defined for each vertex presented subsequently the first ii vertices.

To draw or make full an arc, we use the aforementioned rules for drawing an oval, except that we command the angles θ of the points based on the start bending and the arc bending.

δ = 2Π / n; for (θ = startAngle; θ< startAngle + arcAngle; θ+= δ) {     x = w/2 * cos (θ);     y = h/2 * sin (θ); }

Yous tin can observe the source code on my GitHub folio .

If yous take any bug compiling or running the app, check out this section for details about compiling and running an OpenGL app that uses the Overabundance library. Below is a screenshot from the demo app showing a circle with every vertex colored based on its coordinates. When you run the app, press the 'h' key for help on how to use it.

ccircle