Separating Triangle Strips in Circular Annulus

Given the problem description:

More specifically, the problem involves specifically the decorated annulus. The problem I am having is to separate the lightly shaded triangle from the dark shaded triangles.

I have produced code (based on a previous example) that produces a circular annulus. However, the triangles are together rather than separate, and produce the same color.

Here is the code that I have produced so far:

///////////////////////////////////////////////////////////////////////////////////////////        
// circularAnnuluses.cpp
//
// This program draws three identical-looking circular annuluses in three different ways - 
// see comments below.
//
// Interaction:
// Press the space bar to toggle between wirefrime and filled for the lower annulus.
// 
// Sumanta Guha.
/////////////////////////////////////////////////////////////////////////////////////////// 

#include <cstdlib>
#include <cmath>
#include <iostream>

#ifdef __APPLE__ 
#  include <GL/glew.h> 
#  include <GL/freeglut.h> 
#  include <OpenGL/glext.h> 
#else 
#  include <GL/glew.h> 
#  include <GL/freeglut.h> 
//#  include <GL/glext.h> 
#pragma comment(lib, "glew32.lib") 
#endif 

#define PI 3.14159265
#define N 6.0 // Number of vertices on the boundary of the disc.

using namespace std;

// Globals.
static int isWire = 0; // Is wireframe?


// Drawing routine.
void drawScene(void)
{
    float angle;
    int i;

    glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT); // Clear the buffers including 
                                                        // the depth buffer.

    glPolygonMode(GL_FRONT, GL_FILL);

    // Lower circular annulus: with a true hole.
    if (isWire) glPolygonMode(GL_FRONT, GL_LINE); else glPolygonMode(GL_FRONT, GL_FILL);
    glBegin(GL_TRIANGLE_STRIP);
    for (i = 0; i <= N; ++i)
    {
        angle = 2 * PI * i / N;
        glColor3f(1.0, 0.0, 0.0);
        glVertex3f(50 + cos(angle) * 10.0, 50 + sin(angle) * 10.0, 0.0);
        glColor3f(0, 1, 0);
        glVertex3f(50 + cos(angle) * 20.0, 50 + sin(angle) * 20.0, 0.0);
    }
    glEnd();

    // Write labels.
    glColor3f(0.0, 0.0, 0.0);

    glFlush();
}

// Initialization routine.
void setup(void)
{
    glClearColor(1.0, 1.0, 1.0, 0.0);
}

// OpenGL window reshape routine.
void resize(int w, int h)
{
    glViewport(0, 0, w, h);
    glMatrixMode(GL_PROJECTION);
    glLoadIdentity();
    glOrtho(0.0, 100.0, 0.0, 100.0, -1.0, 1.0);
    glMatrixMode(GL_MODELVIEW);
    glLoadIdentity();
}

// Keyboard input processing routine.
void keyInput(unsigned char key, int x, int y)
{
    switch (key)
    {
    case ' ':
        if (isWire == 0) isWire = 1;
        else isWire = 0;
        glutPostRedisplay();
        break;
    case 27:
        exit(0);
        break;
    default:
        break;
    }
}

// Routine to output interaction instructions to the C++ window.
void printInteraction(void)
{
    cout << "Interaction:" << endl;
    cout << "Press the space bar to toggle between wirefrime and filled for the lower annulus." << endl;
}

// Main routine.
int main(int argc, char** argv)
{
    printInteraction();
    glutInit(&argc, argv);

    glutInitContextVersion(4, 3);
    glutInitContextProfile(GLUT_COMPATIBILITY_PROFILE);

    glutInitDisplayMode(GLUT_SINGLE | GLUT_RGBA | GLUT_DEPTH);
    glutInitWindowSize(500, 500);
    glutInitWindowPosition(100, 100);
    glutCreateWindow("DecoratedAnnulus.cpp");
    glutDisplayFunc(drawScene);
    glutReshapeFunc(resize);
    glutKeyboardFunc(keyInput);

    glewExperimental = GL_TRUE;
    glewInit();

    setup();

    glutMainLoop();
}

The section of code where the problem lies is in the 'drawscene' function. I believe there should be two different for loops to separate the triangles from one another, but whenever I try to split the for loop it produces a monster of a shape.

I'm not exactly sure where to begin to complete this last problem.

Solution

As mentioned in the other answer, a possibility is to switch to flat shading mode by glShadeModel.
But note, you've also to offset the vertex coordinates of the outer circle:

glShadeModel( GL_FLAT );
glBegin(GL_TRIANGLE_STRIP);
for (i = 0; i <= N; ++i)
{
    angle1 = 2 * PI * i / N;
    angle2 = 2 * PI * (i+0.5) / N;

    glColor3f(1.0, 0.0, 0.0);
    glVertex3f(50 + cos(angle1) * 10.0, 50 + sin(angle1) * 10.0, 0.0);
    glColor3f(0, 1, 0);
    glVertex3f(50 + cos(angle2) * 20.0, 50 + sin(angle2) * 20.0, 0.0);
}
glEnd();

The other possibility is to draw the inner and outer triangles with the primitive type GL_TRIANGLES in 2 separate loops:

glShadeModel( GL_SMOOTH );

glBegin(GL_TRIANGLES);
glColor3f(1.0, 0.0, 0.0);
for (i = 0; i <= N; ++i)
{
    angle1 = 2 * PI * i / N;
    angle2 = 2 * PI * (i+0.5) / N;
    angle3 = 2 * PI * (i+1) / N;

    glVertex3f(50 + cos(angle1) * 10.0, 50 + sin(angle1) * 10.0, 0.0);
    glVertex3f(50 + cos(angle2) * 20.0, 50 + sin(angle2) * 20.0, 0.0);
    glVertex3f(50 + cos(angle3) * 10.0, 50 + sin(angle3) * 10.0, 0.0);
}
glEnd();

glBegin(GL_TRIANGLES);
glColor3f(0, 1, 0);
for (i = 0; i <= N; ++i)
{
    angle1 = 2 * PI * (i-0.5) / N;
    angle2 = 2 * PI * i / N;
    angle3 = 2 * PI * (i+0.5) / N;

    glVertex3f(50 + cos(angle1) * 20.0, 50 + sin(angle1) * 20.0, 0.0);
    glVertex3f(50 + cos(angle2) * 10.0, 50 + sin(angle2) * 10.0, 0.0);
    glVertex3f(50 + cos(angle3) * 20.0, 50 + sin(angle3) * 20.0, 0.0);
}
glEnd();

Both methods generate the following image:

If you want a more "circular" look, then you've to tessellate the segments along the inner or outer circle. Use the primitive type GL_TRIANGLE_FAN (see Triangle primitives) to draw a single segment:

int N2 = 10;
glShadeModel( GL_SMOOTH );

# draw the red segments
glColor3f(1.0, 0.0, 0.0);
for (int i = 0; i <= N; ++i)
{
    float angle1 = 2 * PI * i / N;
    float angle2 = 2 * PI * (i+0.5) / N;
    float angle3 = 2 * PI * (i+1) / N;

    # draw a single red segment
    glBegin(GL_TRIANGLE_FAN);
    glVertex3f(50 + cos(angle2) * 20.0, 50 + sin(angle2) * 20.0, 0.0);
    for (int j = 0; j <= N2; ++j)
    {
        float a = angle1 + (angle3 - angle1) * (float)j / (float)N2;
        glVertex3f(50 + cos(a) * 10.0, 50 + sin(a) * 10.0, 0.0);
    }
    glEnd();
}

# draw the green sgements
glColor3f(0, 1, 0);
for (int i = 0; i <= N; ++i)
{
    float angle1 = 2 * PI * (i-0.5) / N;
    float angle2 = 2 * PI * i / N;
    float angle3 = 2 * PI * (i+0.5) / N;

    # draw a single green segment
    glBegin(GL_TRIANGLE_FAN);
    glVertex3f(50 + cos(angle2) * 10.0, 50 + sin(angle2) * 10.0, 0.0);
    for (int j = 0; j <= N2; ++j)
    {
        float a = angle1 + (angle3 - angle1) * (float)j / (float)N2;
        glVertex3f(50 + cos(a) * 20.0, 50 + sin(a) * 20.0, 0.0);
    }
    glEnd();
}