1. Computer Graphics, Lee Byung-Gook, Dongseo Univ.
28 November 2018
Computer Graphics, Lee Byung-Gook, Dongseo Univ.

2. Computer Graphics, Lee Byung-Gook, Dongseo Univ.
Image Definition
An image is a 2 dimensional array of color intensity values
Each color value of the 2 dimensional array is called a pixel (short for pixel element)
The number of bits used to store each pixel determines the image's color depth
A 10 pixel by 10
pixel image
28 November 2018
Computer Graphics, Lee Byung-Gook, Dongseo Univ.

3. Computer Graphics, Lee Byung-Gook, Dongseo Univ.
Image Storage
bitmap : an image with one bit per pixel (0: background color, 1: foreground color; monochrome (one color) image)
gray-scale : an image with multiple bits per pixel representing various intensities of the same color (e.g., using 8 bits, 256 shades can be represented.)
pixmap : an image with multiple bits per pixel broken into more than one component representing various intensities of more than one color. (pixmap is short for pixel map)
28 November 2018
Computer Graphics, Lee Byung-Gook, Dongseo Univ.

4. Computer Graphics, Lee Byung-Gook, Dongseo Univ.
Image Storage
RGB pixmap : a pixmap that has three values per pixel representing the percentage of red, green and blue color for that pixel.
RGBA pixmap : a pixmap that has four values per pixel representing the percentage of red, green, blue, and alpha color for that pixel. (The alpha value typically represents transparency)
color index image : each pixel value is an index into a table (an array) of color values
28 November 2018
Computer Graphics, Lee Byung-Gook, Dongseo Univ.

5. Computer Graphics, Lee Byung-Gook, Dongseo Univ.
Pixel ordering
Each pixel value can be treated as a single unit or broken into its components. There are three basic options:
Keep all of the bits for a single pixel together
Keep all of the bits for a single component of a single pixel together
Separate all bits of a pixel into bitplanes.
28 November 2018
Computer Graphics, Lee Byung-Gook, Dongseo Univ.

6. Computer Graphics, Lee Byung-Gook, Dongseo Univ.
Example
Given an RGB pixmap using 24 bits per pixel (8 bits for each color component), the options would look something like:
Keep all bits together
Keep all component bits together
red 1
green 1
blue 1
red 2
green 2
blue 2 …
pixel 1
pixel 2
red 1
red 2
green 1
green 2
blue 1
blue 2 …
28 November 2018
Computer Graphics, Lee Byung-Gook, Dongseo Univ.

7. Computer Graphics, Lee Byung-Gook, Dongseo Univ.
Example
Store bit 1 of pixel 1, bit 1 of pixel 2, bit 1 of pixel 3, etc.. Then store bit 2 of pixel 1, bit 2 of pixel 2, bit 2 of pixel 3, etc.
bit 1 of every pixel
10… …
11…
01…
bit 2 of every pixel
bit 3 of every pixel
bit 24 of every pixel
bitplane 1
bitplane 2
bitplane 3
bitplane 24
28 November 2018
Computer Graphics, Lee Byung-Gook, Dongseo Univ.

8. Computer Graphics, Lee Byung-Gook, Dongseo Univ.
Data Type
OpenGL keyword Description
GL_BYTE signed 8-bit integer (-128…127)
GL_UNSIGNED_BYTE unsigned 8-bit integer (0…255)
GL_SHORT signed 16-bit integer (-32768…32767)
GL_UNSIGNED_SHORT unsigned 16-bit integer (0…65536)
GL_INT signed 32-bit integer( … )
GL_UNSIGNED_INT unsigned 32-bit integer (0… )
GL_FLOAT single precision floating point
GL_BITMAP single bits packed into unsigned 8-bit integers (0…1)
GL_UNSIGNED_BYTE_3_3_2 three values packed into a single byte;
3 bits for the 1st value, 3 bits for the 2nd value,
and 2 bits for the 3rd value.
GL_UNSIGNED_SHORT_5_6_5 three values packed into two bytes;
5 bits for the 1st value, 6 bits for the 2nd value,
and 5 bits for the 3rd value.
The values for each component of a pixel do not have to be represented by 8 bits. Their representation can vary from 1 bit to many bits. It can also vary from unsigned integer to signed integer to floating point
28 November 2018
Computer Graphics, Lee Byung-Gook, Dongseo Univ.

9. Computer Graphics, Lee Byung-Gook, Dongseo Univ.
Data Format
OpenGL keyword Description
GL_COLOR_INDEX a single color index
GL_RGB a red component, followed by a green and blue component
GL_RGBA a red component, followed by a green, blue,
and alpha component
GL_RED a single red color component
GL_GREEN a single green color component
GL_BLUE a single blue color component
GL_ALPHA a single alpha color component
GL_LUMINACE a single luminance component
GL_LUMINACE_ALPHA a luminance component followed by an alpha color component
GL_STENCIL_INDEX a single stencil index
GL_DEPTH_COMPONENT a single depth component
28 November 2018
Computer Graphics, Lee Byung-Gook, Dongseo Univ.

10. Computer Graphics, Lee Byung-Gook, Dongseo Univ.
Image buffer
In C/C++, the address of a block of memory with no data type associated with it is stored in a "pointer to void" variable.
For example, to allocate a buffer for an image with 100 rows and 200 columns, where each pixel uses 24 bits (3 bytes):
void *imageBuffer;
int imageWidth=100, imageHeight=200;
imageBuffer = malloc(imageWidth*imageHeight*3); // C
imageBuffer = new(unsigned char[imageWidth*imageHeight *3]); // C++
An image buffer is a block of contiguous memory large enough to hold all of its pixel values While an image is conceptually a 2D array, we typically do not know the exact dimensions of the image until run-time. To create a 2D array in a programming language requires that the dimensions of the array be known. Therefore, image buffers are typically created as a single block of memory and it is the programmer's job to access appropriate values within this block of memory.
28 November 2018
Computer Graphics, Lee Byung-Gook, Dongseo Univ.

11. Computer Graphics, Lee Byung-Gook, Dongseo Univ.
Image buffer
To access a specific pixel's values within the array, use the following array mapping formula
(assuming 8 bits per component):
index = (imageWidth*row + column)*sizeof(pixel);
red = imageBuffer[index];
green = imageBuffer[index+1];
blue = imageBuffer[index+2];
28 November 2018
Computer Graphics, Lee Byung-Gook, Dongseo Univ.

12. Computer Graphics, Lee Byung-Gook, Dongseo Univ.
Image commands
Screen
(Frame Buffer)
My Program
Image buffer within my program
glReadPixels()
(from frame buffer
to my program)
glDrawPixels()
(from my program to the frame buffer)
glCopyPixels()
(from the frame buffer to the frame buffer)
There are 3 basic OpenGL commands for moving images between the frame buffer (screen) and your program (processor memory).
28 November 2018
Computer Graphics, Lee Byung-Gook, Dongseo Univ.

13. Image commands
glReadPixels(GLint x, GLint y, GLsizei width, GLsizei height, GLenum format, GLenum type, GLvoid *pixels);
Screen (Frame Buffer)
Desired area to read image from.
(x,y) - in window coordinates
width
height
(0,0) - in window coordinates
28 November 2018
Computer Graphics, Lee Byung-Gook, Dongseo Univ.

14. Computer Graphics, Lee Byung-Gook, Dongseo Univ.
Image commands
glDrawPixels(GLsizei width, GLsizei height, GLenum format, GLenum type, GLvoid *pixels);
glRasterPos{234}{sifd}(x, y, z, w);
glRasterPos{234}{sifd}v(array);
glCopyPixels(GLint x, GLint y, GLsizei width, GLsizei height, GLenum whichBuffer);
whichBuffer : GL_COLOR, GL_DEPTH, GL_STENCIL.
This draws the image defined in the buffer called pixels, starring at the current raster position.
The current raster position is defined by a call to:
This copies the image defined by the (x,y) location and the width and height parameters.
The image is copied to a new location defined by the current location of the current raster position.
The whichBuffer parameter can be GL_COLOR, GL_STENCIL, or GL_DEPTH.
28 November 2018
Computer Graphics, Lee Byung-Gook, Dongseo Univ.

15. Computer Graphics, Lee Byung-Gook, Dongseo Univ.
Lab 15
Downloading
void myMouse(int button, int state, int x, int y) {
if(button == GLUT_LEFT_BUTTON && state == GLUT_DOWN) {
glRasterPos2i(x,windowHeight-y);
glDrawPixels(myImage.Width, myImage.Height, GL_RGB,
GL_UNSIGNED_BYTE, myImage.Pixels); }
else if(button == GLUT_RIGHT_BUTTON && state == GLUT_DOWN) {
glDrawPixels(bufferWidth, bufferHeight, GL_RGB,
GL_UNSIGNED_BYTE,imageBuffer);
else if(button == GLUT_MIDDLE_BUTTON && state == GLUT_DOWN) {
glReadPixels(x, windowHeight-y, bufferWidth, bufferHeight,
GL_RGB, GL_UNSIGNED_BYTE, imageBuffer);
28 November 2018
Computer Graphics, Lee Byung-Gook, Dongseo Univ.

16. Computer Graphics, Lee Byung-Gook, Dongseo Univ.
Manipulating images
Reflect about an axis
Increase intensity (brighten)
Decrease intensity (darken)
Redistribute the color intensities
Edge detection
etc., etc.
28 November 2018
Computer Graphics, Lee Byung-Gook, Dongseo Univ.

17. Computer Graphics, Lee Byung-Gook, Dongseo Univ.
Scaling images
Scaling an image changes its size. There are two problems:
There is usually not a one-to-one mapping from the original image to the new image (e.g., the original image is 10 pixels wide and the new image is 14 pixels wide).
How should the color of each pixel of the new scaled image be calculated?
28 November 2018
Computer Graphics, Lee Byung-Gook, Dongseo Univ.

18. Computer Graphics, Lee Byung-Gook, Dongseo Univ.
The original 10x10
image in black
The new14x14 image
in red.
The two images supper-
imposed on each other
Note the non-alignment
28 November 2018
Computer Graphics, Lee Byung-Gook, Dongseo Univ.

19. Computer Graphics, Lee Byung-Gook, Dongseo Univ.
For example, take the pixel (8,6) in the 14x14 image and map it into the 10x10 image. You get:
xScale = 10 / 14 = 0.71
yScale = 10 / 14 = 0.71
xMap = 8 * 0.71 = 5.714
yMap = 6 * 0.71 = 4.286
What color should be assigned to the pixel location (8,6) in the new image? We have two choices:
For example, take the pixel (8,6) in the 14x14 image and map it into the 10x10 image. You get:
xScale = 10 / 14 = 0.71
yScale = 10 / 14 = 0.71
xMap = 8 * 0.71 = 5.714
yMap = 6 * 0.71 = 4.286
28 November 2018
Computer Graphics, Lee Byung-Gook, Dongseo Univ.

20. Computer Graphics, Lee Byung-Gook, Dongseo Univ.
Select the closest pixel to the mapped location in the original image. (Round the floating point values to their nearest integer values). GL_NEAREST
Calculate an average color value using an appropriate percentage of each of the surrounding pixel values. GL_LINEAR
(6,5)
(5,5)
(5,4)
(6,4)
(5.714, 4.286)
0.286
0.714
(0.714*0.714)
= 0.51
(0.714*0.286)
= 0.2
(0.286*0.286)
= 0.08
Using our example:
xMap = (int) ( ) = 6
yMap = (int) ( ) = 4
Therefore, Pixel (8,6) in the new image gets the color values of pixel (6,4) in the original image.
Note: OpenGL calls this method GL_NEAREST.
It is the fastest calculation possible, but it does not generate pleasing images for large scaling factors.
The location (5.714, 4.286) is surrounded by the pixels (5, 4), (6, 4), (5, 5), and (6,5)
Lets partition this unit square into 4 rectangles using the mapped location point. The figure below shows this particular case:
Therefore, the color of pixel (8,6) in the new image gets 0.08 * the color of pixel (5,5) +
0.20 * the color of pixel (6,5) +
0.20 * the color of pixel (5,4) +
0.51 * the color of pixel (6,4)
Note: The percentages will always add to one.
Each area percentage applies to the pixel diagonally opposite its location.
OpenGL calls this method GL_LINEAR. This is interpolation of the color values at the corners into an interpolated value at the desired location.
It is a slower calculation, but it generates more pleasing images for large scale factors.
28 November 2018
Computer Graphics, Lee Byung-Gook, Dongseo Univ.

21. Computer Graphics, Lee Byung-Gook, Dongseo Univ.
Combining images
Combining one image with another image is often calling compositing
Interesting effects can be obtained by
using different methods of composting
varying the amount of compositing over time
There is two general methods for compositing
use a percentage of each pixel from each image
use bitwise operators on the color values
28 November 2018
Computer Graphics, Lee Byung-Gook, Dongseo Univ.

22. Computer Graphics, Lee Byung-Gook, Dongseo Univ.
Blending
This combines the pixels in one image with the pixels from another image.
Using OpenGL, this is done by drawing the first image into the frame buffer (color buffer) and then blending the second image with the first while drawing it into the frame buffer.
Or, said another way, the blending always works with a source and destination image, where the destination image is already on the screen (in the frame buffer) and the source is being drawn.
28 November 2018
Computer Graphics, Lee Byung-Gook, Dongseo Univ.

23. Computer Graphics, Lee Byung-Gook, Dongseo Univ.
Blending
glEnable(GL_BLEND);
// Draw all of the source and zero of the destination
// destination = 1.0*source + 0.0*destination
glBlendFunc(GL_ONE, GL_ZERO);
glRasterPos*(…); // set the location of the images
glDrawPixels(…); // draw the first image
// Blend the second image using the alpha values
// of the source image as percentages
// destination = source*sourceAlpha+ destination*(1.0-sourceAlpha)
glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);
glDrawPixels(…); // draw the second image
glEnable(GL_BLEND);
// Draw all of the source and zero of the destination
// destination = 1.0*source + 0.0*destination
glBlendFunc(GL_ONE, GL_ZERO);
glRasterPos*(…); // set the location of the images
glDrawPixels(…); // draw the first image
// Blend the second image using the alpha values
// of the source image as percentages
// destination = source*sourceAlpha
// + destination*(1.0-sourceAlpha)
glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);
glDrawPixels(…); // draw the second image
Note: This assumes that the second image is a RGBA image (4 bytes per pixel) with the alpha value containing the percentage of compositing desired.
28 November 2018
Computer Graphics, Lee Byung-Gook, Dongseo Univ.

24. Computer Graphics, Lee Byung-Gook, Dongseo Univ.
glBlendFunc
void glBlendFunc( GLenum sfactor, GLenum dfactor );
determines the scale factors used on the source and destination pixels before they are combined
sfactor : specifies how the red, green, blue, and alpha source-blending factors are computed. Nine symbolic constants are accepted: GL_ZERO, GL_ONE, GL_DST_COLOR, GL_ONE_MINUS_DST_COLOR, GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA, GL_DST_ALPHA, GL_ONE_MINUS_DST_ALPHA, and GL_SRC_ALPHA_SATURATE.
dfactor : specifies how the red, green, blue, and alpha destination-blending factors are computed. Eight symbolic constants are accepted: GL_ZERO, GL_ONE, GL_SRC_COLOR, GL_ONE_MINUS_SRC_COLOR, GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA, GL_DST_ALPHA, and GL_ONE_MINUS_DST_ALPHA.
28 November 2018
Computer Graphics, Lee Byung-Gook, Dongseo Univ.

25. Bitwise logic operations on pixels
OpenGL supports the following bitwise operations while writing fragments to the frame buffer. Again, the source is the pixel to be written to the frame buffer, and the destination is the pixel already in the frame buffer.
The table describes the operations using C/C++ bitwise operators & (and), | (or), ^ (exclusive or), ~ (not).
28 November 2018
Computer Graphics, Lee Byung-Gook, Dongseo Univ.

26. Bitwise logic operations
OpenGL logic keyword Description
GL_CLEAR 0
GL_COPY source
GL_NOOP destination
GL_SET
GL_AND source & destination
GL_OR source | destination
GL_NAND ~(source & destination)
GL_NOR ~(source | destination)
GL_XOR source ^ destination
GL_EQUIV ~(source ^ destination)
GL_INVERT ~destination
GL_COPY_INVERTED ~source
GL_AND_REVERSE source & ~destination
GL_AND_INVERTED ~source & destination
GL_OR_REVERSE source | ~destination
GL_OR_INVERTED ~source | destination
28 November 2018
Computer Graphics, Lee Byung-Gook, Dongseo Univ.

27. Computer Graphics, Lee Byung-Gook, Dongseo Univ.
Lab 16
downloading
void myMouse(int button, int state, int x, int y) {
if(button == GLUT_LEFT_BUTTON && state == GLUT_DOWN) {
if(x < bufferWidth && y > bufferHeight) first=0;
else if(x > bufferWidth && y > bufferHeight) first=1;
else if(x < bufferWidth && y < bufferHeight) first=2;
glEnable(GL_COLOR_LOGIC_OP);
glLogicOp(GL_COPY);
glRasterPos2i(bufferWidth,bufferHeight);
glDrawPixels(myImage[first].Width, myImage[first].Height,
GL_RGB, GL_UNSIGNED_BYTE, myImage[first].Pixels);
glDisable(GL_COLOR_LOGIC_OP); }
glEnable(GL_COLOR_LOGIC_OP);
glLogicOp(GL_COPY);
glRasterPos*(…); // set the location of the images
glDrawPixels(…); // draw the first image
glLogicOp(GL_AND);
glDrawPixels(…); // draw the second image
Note: since this does bitwise operations, the results are not always what you expect.
28 November 2018
Computer Graphics, Lee Byung-Gook, Dongseo Univ.

28. Computer Graphics, Lee Byung-Gook, Dongseo Univ.
Lab 16
else if(button == GLUT_RIGHT_BUTTON && state == GLUT_DOWN) {
if(x < bufferWidth && y > bufferHeight) second=0;
else if(x > bufferWidth && y > bufferHeight) second=1;
else if(x < bufferWidth && y < bufferHeight) second=2;
if(sign==-1) return;
glEnable(GL_COLOR_LOGIC_OP);
glLogicOp(sign);
glRasterPos2i(bufferWidth,bufferHeight);
glDrawPixels(myImage[second].Width, myImage[second].Height,
GL_RGB, GL_UNSIGNED_BYTE, myImage[second].Pixels);
glDisable(GL_COLOR_LOGIC_OP); }
glutPostRedisplay();
28 November 2018
Computer Graphics, Lee Byung-Gook, Dongseo Univ.

29. Computer Graphics, Lee Byung-Gook, Dongseo Univ.
GLF
GLF is multiplatforming library for displaying text in OpenGL. 
This library differs from other libraries by simplicity of use and only by one included file (glf.c and header glf.h).
For working of library it is necessary to have the file with the font, by which you will display symbols. You can to use up to 256 loaded fonts at once (setted by default or more if You want).
28 November 2018
Computer Graphics, Lee Byung-Gook, Dongseo Univ.

30. Computer Graphics, Lee Byung-Gook, Dongseo Univ.
Exercise
Download GLF (ZIP format): glf-1.4.zip
Test GLF Library
28 November 2018
Computer Graphics, Lee Byung-Gook, Dongseo Univ.