A digital image is a 2 dimensional array of pixel colors
Pixel = "picture element"
Each pixel is a sample of a continuous, analog image
Pointillism can be considered to take a similar approach -
breaking an image down into discrete samples
Basic digital image data is a stream of numbers, representing pixel colors
1 239 120 1 1 37 94 8 92 31 80 92 134 89 2 3 50 9 3 10 93 109 134 ...
Important additional information is:
Total memory needed for a simple image:
width * height * components * bytes_per_component
e.g. a 1024x768, RGB, 8-bit image requires 2.25 megabytes
The frame buffer is a chunk of graphics card memory that contains what is displayed on the screen.
Like an image, but for each pixel there can be additional data besides color - depth, masking, etc.
OpenGL renders shapes, images, etc. into pixels of the frame buffer.
rasterizing it - converting it into
raster form in the frame buffer.
A coordinate system is needed for measuring objects' positions
It allows us to describe any location by a set of numbers - 2 numbers when working in 2 dimensions, 3 numbers for 3 dimensions.
A coordinate system has an origin (a reference point) and coordinate axes
In 2D we have an X axis and a Y axis. In 3D, we add a Z axis.
The axes are perpendicular - they are independent
Some coordinate systems used:
For older, fixed-function pipeline
The default drawing coordinate system can be changed with the function gluOrtho2D
e.g.:
glMatrixMode(GL_PROJECTION) glLoadIdentity() gluOrtho2D(0.0, 10.0, 0.0, 5.0) glMatrixMode(GL_MODELVIEW)
gluOrtho2D is typically used either in the drawing function, or in GLUT's reshape callback.
The reshape callback is called whenever the window changes size.
e.g., to make the window always span -10 to +10 in X, while keeping the aspect ratio 1:1, the coordinate range in Y will depend on the window size:
def reshape(w, h): glViewport(0, 0, w, h) glMatrixMode(GL_PROJECTION) glLoadIdentity() gluOrtho2D(-10.0, 10.0, -10.0*h/w, 10.0*h/w) glMatrixMode(GL_MODELVIEW) glutReshapeFunc(reshape)
OpenGL includes functions to draw points, lines, and triangles.
All other shapes are made up of these elements.
A basic shape is entirely described by its vertices, which are connected by straight edges.
The graphics hardware fills in all the necessary pixels.
For older, fixed-function pipeline
The basic method for drawing a shape is:
glBegin(...) glVertex(...) glVertex(...) glVertex(...) ... glEnd()
Always be sure to have a matching glEnd() for each glBegin()
GL_POINTS | GL_LINES | GL_LINE_STRIP | GL_LINE_LOOP |
---|---|---|---|
GL_TRIANGLES | GL_TRIANGLE_STRIP | GL_TRIANGLE_FAN | |
glColor3f(1, 0.5, 0) glBegin(GL_TRIANGLES) glVertex2f(0, 0) glVertex2f(1, 0) glVertex2f(0.5, 0.5) glEnd()
The previously completed image is displayed while the new one is drawn.
The frame buffer is split into two buffers - front buffer (displayed) and back buffer (drawn into).
Useful for smooth animation.
Pyglet enables and uses double-buffering by default.
The important steps are