OpenGL Color By Face - c++

Question

I'm new to OpenGL and theres a small project I'm working on. A part of this project is create a grid which allows for some sections of the grid to have different colors.
E.g. The entire grid is green but a block on the grid is lit red and maybe another one yellow.
What I have done to draw this grid is with GL_TRIANGLE_STRIP while using indicies. After that stage, I have also included colors in the same vertex data array. But the output isn't how i want it to be.
Firstly there was an interpolation which i tried to remove by adding the 'flat' flag for the color. But there seem to be a overlapping problem. Which resulted this picture.
Is there anyway to create a grid. Where a block of the grid can be of a different color than the grid.
Update
Here is my code for GL_TRIANGLES
short* Grid::Indicies()
{
const int X_GRID_SIZE = X_GRID_SIZE_;
const int Y_GRID_SIZE = Y_GRID_SIZE_;
const int INDICIES_SIZE = (((X_GRID_SIZE * 4) + ((X_GRID_SIZE_ - 3) * 2)) * Y_GRID_SIZE);
short* indicies = new short[INDICIES_SIZE];
int index = 0;
for (size_t y = 0; y < Y_GRID_SIZE_; y++)
{
// Current, Down, Right, Down
indicies[index++] = (short)(y * X_GRID_SIZE_);
indicies[index++] = (short)((y + 1) * X_GRID_SIZE_);
indicies[index++] = (short)((y * X_GRID_SIZE_) + 1);
indicies[index++] = (short)((y + 1) * X_GRID_SIZE_);
for (size_t x = 1; x < X_GRID_SIZE_ - 1; x++)
{
// Current, Down, Current, Down, Right, Down
for (size_t i = 0; i < 2; i++)
{
indicies[index++] = (short)((y * X_GRID_SIZE_) + x);
indicies[index++] = (short)(((y + 1) * X_GRID_SIZE_) + x);
}
indicies[index++] = (short)((y * X_GRID_SIZE_) + x + 1);
indicies[index++] = (short)(((y + 1) * X_GRID_SIZE_) + x);
}
// Current, Down
indicies[index++] = (short)(((y + 1) * X_GRID_SIZE_) - 1);
indicies[index++] = (short)(((y + 2) * X_GRID_SIZE_) - 1);
}
indicies_size_ = index;
return (indicies);
}
GLfloat vertices[] = {
// Position // Color
-1.0f, 1.0f, 0.0f, 1.0f, 0.0f, 0.0f,
-0.5f, 1.0f, 0.0f, 1.0f, 0.0f, 0.0f,
0.0f, 1.0f, 0.0f, 1.0f, 0.0f, 0.0f,
0.5f, 1.0f, 0.0f, 1.0f, 0.0f, 0.0f,
1.0f, 1.0f, 0.0f, 1.0f, 0.0f, 0.0f,
-1.0f, 0.5f, 0.0f, 1.0f, 0.0f, 0.0f,
-0.5f, 0.5f, 0.0f, 1.0f, 0.0f, 0.0f,
0.0f, 0.5f, 0.0f, 1.0f, 0.0f, 0.0f,
0.5f, 0.5f, 0.0f, 1.0f, 0.0f, 0.0f,
1.0f, 0.5f, 0.0f, 1.0f, 0.0f, 0.0f,
-1.0f, 0.0f, 0.0f, 1.0f, 0.0f, 0.0f,
-0.5f, 0.0f, 0.0f, 0.0f, 1.0f, 0.0f,
0.0f, 0.0f, 0.0f, 0.0f, 1.0f, 0.0f,
0.5f, 0.0f, 0.0f, 0.0f, 1.0f, 0.0f,
1.0f, 0.0f, 0.0f, 0.0f, 1.0f, 0.0f,
-1.0f, -0.5f, 0.0f, 0.0f, 1.0f, 0.0f,
-0.5f, -0.5f, 0.0f, 0.0f, 1.0f, 0.0f,
0.0f, -0.5f, 0.0f, 0.0f, 1.0f, 0.0f,
0.5f, -0.5f, 0.0f, 0.0f, 1.0f, 0.0f,
1.0f, -0.5f, 0.0f, 0.0f, 1.0f, 0.0f,
-1.0f, -1.0f, 0.0f, 0.0f, 1.0f, 0.0f,
-0.5f, -1.0f, 0.0f, 0.0f, 1.0f, 0.0f,
0.0f, -1.0f, 0.0f, 0.0f, 1.0f, 0.0f,
0.5f, -1.0f, 0.0f, 0.0f, 1.0f, 0.0f,
1.0f, -1.0f, 0.0f, 0.0f, 1.0f, 0.0f,
};
GLuint v_buffer_object, v_array_object, e_buffer_object;
glGenVertexArrays(1, &v_array_object);
glGenBuffers(1, &v_buffer_object);
glGenBuffers(1, &e_buffer_object);
glBindVertexArray(v_array_object);
glBindBuffer(GL_ARRAY_BUFFER, v_buffer_object);
glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_STATIC_DRAW);
glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, e_buffer_object);
glBufferData(GL_ELEMENT_ARRAY_BUFFER, sizeof(grid.Indicies()) * grid.IndiciesSize(), grid.Indicies(), GL_STATIC_DRAW);
glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 6 * sizeof(GLfloat), (GLvoid*)0);
glEnableVertexAttribArray(0);
glVertexAttribPointer(1, 3, GL_FLOAT, GL_FALSE, 6 * sizeof(GLfloat), (GLvoid*)(3 * sizeof(GLfloat)));
glEnableVertexAttribArray(1);
glBindBuffer(GL_ARRAY_BUFFER, 0);
glBindVertexArray(0);
glPolygonMode(GL_FRONT_AND_BACK, GL_LINE);

Answer 1

Don't use GL_TRIANGLE_STRIP. Use GL_TRIANGLES and draw each block with 2 triangles and 4 vertices. Each vertex belongs to only 1 block. Thanks to that you don't have to use 'flat' flag, just change color for 4 vertices at once. You can try to draw each block separate, with space between each other. Then you can connect them by translating vertices and create the grid.

Answer 2

With GL_TRIANGLE_STRIP, flat shading will use the color from vertex i+2 to color traingle i (this is called the provoking vertex). This doesn't get you what you want. An easy option is to switch to GL_TRIANGLES, and make sure to specify your element indexes so that the same vertex is chosen third for both triangles in each quad (because the third vertex is the provoking vertex for triangles, by default). For example, suppose these are the vertexes:
0 1 2 3
4 5 6 7
8 9 10 11
12 13 14 15
Let's look at one of the quads:
0---1
| |
4---5
Let's choose vertex 0 to hold the color for the entire quad. What we then do is make sure that both triangles include vertex 0, and that vertex 0 is last in both triangles.
0---1
| \ |
4---5
So our index array will be:
5 1 0 4 5 0 ...
This uses positive (anticlockwise) winding order.