2D Drawing in OpenGL

From:http://basic4gl.wikispaces.com/2D+Drawing+in+OpenGL

OpenGL was designed primarily as a 3D graphics library, but it can be used for 2D drawing as well. This tutorial will show you the cleanest and easiest way to get started.

Setting up a 2D projection

The best way to draw in 2D is to use a 2D projection matrix.
The Basic4GL default projection matrix is a 3D "perspective transform" matrix, which is good for displaying 3D objects, but awkward for 2D drawing.
We can setup a 2D projection like this:

const XSize = 640, YSize = 480
glMatrixMode (GL_PROJECTION)
glLoadIdentity ()
glOrtho (0, XSize, YSize, 0, 0, 1)
glMatrixMode (GL_MODELVIEW)

This sets up the OpenGL window so that (0,0) corresponds to the top left corner, and (640,480) corresponds to the bottom right hand corner.
Note: If your window is set to 640x480, then one unit will map to one pixel. If not, OpenGL will stretch the image to fit your window size. (You can avoid this in Basic4GL by using WindowWidth() and WindowHeight() instead of XSize and YSize, which will ensure that the projection will match the current window size.)

2D means no depth!

We should also turn off the depth buffer.
The depth buffer is what OpenGL uses to determine which objects are infront or behind each other in 3D space, based on their pixel's Z coordinates.
Because we're not drawing in 3D, and aren't using the Z coordinates, we don't need the depth buffer. Infact it may interfere with our drawing. Therefore we turn it off with:

glDisable(GL_DEPTH_TEST)

2D drawing principles

2D drawing in OpenGL is much like 3D drawing.
We first clear the screen:

glClear(GL_COLOR_BUFFER_BIT)

(Notice we didn't use the GL_DEPTH_BUFFER_BIT, because we're not using the depth buffer.)
We then draw our graphics primatives (GL_QUADS, GL_TRIANGLES, GL_LINES etc), with standard glBegin()..glEnd() blocks.
(We typically use the glVertex 2f instruction to specify the vertices instead of glVertex 3f.)
We can use all the standard OpenGL transformations if we want to (glTranslate, glScale, glRotate etc).
When we've finished rendering the scene, we display it with

SwapBuffers()

To draw a single point

glBegin(GL_POINTS)
glVertex2f(x1, y1)
glEnd()

To draw a line

glBegin(GL_LINES)
glVertex2f(x1, y1): glVertex2f(x2, y2)
glEnd()

To draw a square or rectangle

Filled in:

glBegin(GL_QUADS)
glVertex2f(x1, y1): glVertex2f(x2, y1): glVertex2f(x2, y2): glVertex2f(x1, y2)
glEnd()

Hollow:

glBegin(GL_LINE_LOOP)
glVertex2f(x1, y1): glVertex2f(x2, y1): glVertex2f(x2, y2): glVertex2f(x1, y2)
glEnd()

To draw a circle

OpenGL does not have any primatives for drawing curves or circles.
However we can approximate a circle using a triangle fan like this:

glBegin(GL_TRIANGLE_FAN)
glVertex2f(x1, y1)
for angle# = 0 to 360 step 5
glVertex2f(x1 + sind(angle#) * radius#, y1 + cosd(angle#) * radius#)
next
glEnd()

Or for a hollow circle:

glBegin(GL_LINE_LOOP)
for angle# = 0 to 360 step 5
glVertex2f(x1 + sind(angle#) * radius#, y1 + cosd(angle#) * radius#)
next
glEnd()

To draw in different colours

Simply use:

glColor3f(red, blue, green)

To set the colour first.
Red, blue, and green are colour coordinates, between 0 and 1.

To set the background colour

Set the background colour using:

glClearColor(red, green, blue, 0)

Add this line before the glClear(GL_COLOR_BUFFER_BIT) line.

Putting it all together

Let's finish the tutorial with a working example:

' Setup a 2D projection
const XSize = 640, YSize = 480
glMatrixMode (GL_PROJECTION)
glLoadIdentity ()
glOrtho (0, XSize, YSize, 0, 0, 1)
glMatrixMode (GL_MODELVIEW)
glDisable(GL_DEPTH_TEST)   ' Variables
dim angle#, x1, y1, x2, y2, radius#
dim i   ' Draw a scene
glClearColor(.3, .3, .3, 0)
glClear(GL_COLOR_BUFFER_BIT)   x1 = 20: y1 = 20: x2 = 620: y2 = 460: gosub HollowRectangle
x1 = 20: y1 = 40: x2 = 620: y2 = 40: gosub Line
x1 = 602: y1 = 22: x2 = 618: y2 = 37: gosub Rectangle
x1 = 580: y1 = 460: x2 = 620: y2 = 420: gosub Line   for i = 1 to 5000
x1 = rnd() % 600 + 20
y1 = rnd() % 420 + 40
gosub Point
next   x1 = 320: y1 = 240: radius# = 20: gosub Circle
x1 = 320: y1 = 240: radius# = 40: gosub HollowCircle
x1 = 320: y1 = 240: radius# = 60: gosub HollowCircle
x1 = 320: y1 = 240: radius# = 80: gosub HollowCircle   SwapBuffers()
End   Point:
glBegin(GL_POINTS)
glVertex2f(x1, y1)
glEnd()
return   Line:
glBegin(GL_LINES)
glVertex2f(x1, y1): glVertex2f(x2, y2)
glEnd()
return   Rectangle:
glBegin(GL_QUADS)
glVertex2f(x1, y1): glVertex2f(x2, y1): glVertex2f(x2, y2): glVertex2f(x1, y2)
glEnd()
return   HollowRectangle:
glBegin(GL_LINE_LOOP)
glVertex2f(x1, y1): glVertex2f(x2, y1): glVertex2f(x2, y2): glVertex2f(x1, y2)
glEnd()
return   Circle:
glBegin(GL_TRIANGLE_FAN)
glVertex2f(x1, y1)
for angle# = 0 to 360 step 5
glVertex2f(x1 + sind(angle#) * radius#, y1 + cosd(angle#) * radius#)
next
glEnd()
return   HollowCircle:
glBegin(GL_LINE_LOOP)
for angle# = 0 to 360 step 5
glVertex2f(x1 + sind(angle#) * radius#, y1 + cosd(angle#) * radius#)
next
glEnd()
return