Now we're going to draw the grid. We set the variable filled to TRUE. This tells our program that the grid has been completely filled in (you'll see why we do this in a second).
Right after that we set the line width to 2.0f. This makes the lines thicker, making the grid look more defined.
Then we disable anti-aliasing. The reason we disable anti-aliasing is because although it's a great feature, it eats CPU's for breakfast. Unless you have a killer graphics card, you'll notice a huge slow down if you leave anti-aliasing on. Go ahead and try if you want :)
The view is reset, and we start two loops. loop1 will travel from left to right. loop2 will travel from top to bottom.
We set the line color to blue, then we check to see if the horizontal line that we are about to draw has been traced over. If it has we set the color to white. The value of hline[loop1][loop2] will be TRUE if the line has been traced over, and FALSE if it hasn't.
After we have set the color to blue or white, we draw the line. The first thing to do is make sure we haven't gone to far to the right. We don't want to draw any lines or check to see if the line has been filled in when loop1 is greater than 9.
Once we are sure loop1 is in the valid range we check to see if the horizontal line hasn't been filled in. If it hasn't, filled is set to FALSE, letting our OpenGL program know that there is at least one line that hasn't been filled in.
The line is then drawn. We draw our first horizontal (left to right) line starting at 20+(0*60) (= 20). This line is drawn all the way to 80+(0*60) (= 80). Notice the line is drawn to the right. That is why we don't want to draw 11 (0-10) lines. because the last line would start at the far right of the screen and end 80 pixels off the screen.
filled=TRUE; // Set Filled To True Before Testing
glLineWidth(2.0f); // Set Line Width For Cells To 2.0f
glDisable(GL_LINE_SMOOTH); // Disable Antialiasing
glLoadIdentity(); // Reset The Current Modelview Matrix
for (loop1=0; loop1<11; loop1++) // Loop From Left To Right
{
for (loop2=0; loop2<11; loop2++) // Loop From Top To Bottom
{
glColor3f(0.0f,0.5f,1.0f); // Set Line Color To Blue
if (hline[loop1][loop2]) // Has The Horizontal Line Been Traced
{
glColor3f(1.0f,1.0f,1.0f); // If So, Set Line Color To White
}
if (loop1<10) // Dont Draw To Far Right
{
if (!hline[loop1][loop2]) // If A Horizontal Line Isn't Filled
{
filled=FALSE; // filled Becomes False
}
glBegin(GL_LINES); // Start Drawing Horizontal Cell Borders
glVertex2d(20+(loop1*60), 70+(loop2*40)); // Left Side Of Horizontal Line
glVertex2d(80+(loop1*60), 70+(loop2*40)); // Right Side Of Horizontal Line
glEnd(); // Done Drawing Horizontal Cell Borders
}
The code below does the same thing, but it checks to make sure the line isn't being drawn too far down the screen instead of too far right. This code is responsible for drawing vertical lines.
glColor3f(0.0f,0.5f,1.0f); // Set Line Color To Blue
if (vline[loop1][loop2]) // Has The Horizontal Line Been Traced
{
glColor3f(1.0f,1.0f,1.0f); // If So, Set Line Color To White
}
if (loop2<10) // Dont Draw To Far Down
{
if (!vline[loop1][loop2]) // If A Verticle Line Isn't Filled
{
filled=FALSE; // filled Becomes False
}
glBegin(GL_LINES); // Start Drawing Verticle Cell Borders
glVertex2d(20+(loop1*60),70+(loop2*40)); // Left Side Of Horizontal Line
glVertex2d(20+(loop1*60),110+(loop2*40)); // Right Side Of Horizontal Line
glEnd(); // Done Drawing Verticle Cell Borders
}
Now we check to see if 4 sides of a box are traced. Each box on the screen is 1/10th of a full screen picture. Because each box is piece of a larger texture, the first thing we need to do is enable texture mapping. We don't want the texture to be tinted red, green or blue so we set the color to bright white. After the color is set to white we select our grid texture (texture[1]).
The next thing we do is check to see if we are checking a box that exists on the screen. Remember that our loop draws the 11 lines right and left and 11 lines up and down. But we dont have 11 boxes. We have 10 boxes. So we have to make sure we don't check the 11th position. We do this by making sure both loop1 and loop2 is less than 10. That's 10 boxes from 0 – 9.
After we have made sure that we are in bounds we can start checking the borders. hline[loop1][loop2] is the top of a box. hline[loop1][loop2+1] is the bottom of a box. vline[loop1][loop2] is the left side of a box and vline[loop1+1][loop2] is the right side of a box. Hopefully I can clear things up with a diagram:
All horizontal lines are assumed to run from loop1 to loop1+1. As you can see, the first horizontal line runs along loop2. The second horizontal line runs along loop2+1. Vertical lines are assumed to run from loop2 to loop2+1. The first vertical line runs along loop1 and the second vertical line runs along loop1+1
When loop1 is increased, the right side of our old box becomes the left side of the new box. When loop2 is increased, the bottom of the old box becomes the top of the new box.
If all 4 borders are TRUE (meaning we've passed over them all) we can texture map the box. We do this the same way we broke the font texture into seperate letters. We divide both loop1 and loop2 by 10 because we want to map the texture across 10 boxes from left to right and 10 boxes up and down. Texture coordinates run from 0.0f to 1.0f and 1/10th of 1.0f is 0.1f.
So to get the top right side of our box we divide the loop values by 10 and add 0.1f to the x texture coordinate. To get the top left side of the box we divide our loop values by 10. To get the bottom left side of the box we divide our loop values by 10 and add 0.1f to the y texture coordinate. Finally to get the bottom right texture coordinate we divide the loop values by 10 and add 0.1f to both the x and y texture coordinates.
Quick examples: loop1=0 and loop2=0
• Right X Texture Coordinate = loop1/10+0.1f = 0/10+0.1f = 0+0.1f = 0.1f
• Left X Texture Coordinate = loop1/10 = 0/10 = 0.0f
• Top Y Texture Coordinate = loop2/10 = 0/10 = 0.0f;
• Bottom Y Texture Coordinate = loop2/10+0.1f = 0/10+0.1f = 0+0.1f = 0.1f;
loop1=1 and loop2=1
• Right X Texture Coordinate = loop1/10+0.1f = 1/10+0.1f = 0.1f+0.1f = 0.2f
• Left X Texture Coordinate = loop1/10 = 1/10 = 0.1f
• Top Y Texture Coordinate = loop2/10 = 1/10 = 0.1f;
• Bottom Y Texture Coordinate = loop2/10+0.1f = 1/10+0.1f = 0.1f+0.1f = 0.2f;
Hopefully that all makes sense. If loop1 and loop2 were equal to 9 we would end up with the values 0.9f and 1.0f. So as you can see our texture coordinates mapped across the 10 boxes run from 0.0f at the lowest and 1.0f at the highest. Mapping the entire texture to the screen. After we've mapped a section of the texture to the screen, we disable texture mapping. Once we've drawn all the lines and filled in all the boxes, we set the line width to 1.0f.
glEnable(GL_TEXTURE_2D); // Enable Texture Mapping