Computer Graphics, Lee Byung-Gook, Dongseo Univ. 8 December 2018 Computer Graphics, Lee Byung-Gook, Dongseo Univ.

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 8 December 2018 Computer Graphics, Lee Byung-Gook, Dongseo Univ.

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) 8 December 2018 Computer Graphics, Lee Byung-Gook, Dongseo Univ.

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 8 December 2018 Computer Graphics, Lee Byung-Gook, Dongseo Univ.

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. 8 December 2018 Computer Graphics, Lee Byung-Gook, Dongseo Univ.

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 01101011 red 1 11101111 01100011 10101011 01111001 green 1 blue 1 red 2 green 2 blue 2 … pixel 1 pixel 2 01101011 red 1 10101011 11101111 01100011 01111001 red 2 green 1 green 2 blue 1 blue 2 … 8 December 2018 Computer Graphics, Lee Byung-Gook, Dongseo Univ.

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 8 December 2018 Computer Graphics, Lee Byung-Gook, Dongseo Univ.

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(-2147483648…2147483647) GL_UNSIGNED_INT unsigned 32-bit integer (0…4294967296) 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 8 December 2018 Computer Graphics, Lee Byung-Gook, Dongseo Univ.

Computer Graphics, Lee Byung-Gook, Dongseo Univ. Data Format OpenGL keyword Description 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_COLOR_INDEX a single color index 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 8 December 2018 Computer Graphics, Lee Byung-Gook, Dongseo Univ.

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. 8 December 2018 Computer Graphics, Lee Byung-Gook, Dongseo Univ.

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]; 8 December 2018 Computer Graphics, Lee Byung-Gook, Dongseo Univ.

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). 8 December 2018 Computer Graphics, Lee Byung-Gook, Dongseo Univ.

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 8 December 2018 Computer Graphics, Lee Byung-Gook, Dongseo Univ.

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.   8 December 2018 Computer Graphics, Lee Byung-Gook, Dongseo Univ.

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); 8 December 2018 Computer Graphics, Lee Byung-Gook, Dongseo Univ.

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. 8 December 2018 Computer Graphics, Lee Byung-Gook, Dongseo Univ.

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? 8 December 2018 Computer Graphics, Lee Byung-Gook, Dongseo Univ.

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 8 December 2018 Computer Graphics, Lee Byung-Gook, Dongseo Univ.

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 8 December 2018 Computer Graphics, Lee Byung-Gook, Dongseo Univ.

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) (5.714 + 0.5) = 6 yMap = (int) (4.286 + 0.5) = 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. 8 December 2018 Computer Graphics, Lee Byung-Gook, Dongseo Univ.

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 8 December 2018 Computer Graphics, Lee Byung-Gook, Dongseo Univ.

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. 8 December 2018 Computer Graphics, Lee Byung-Gook, Dongseo Univ.

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. 8 December 2018 Computer Graphics, Lee Byung-Gook, Dongseo Univ.

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. 8 December 2018 Computer Graphics, Lee Byung-Gook, Dongseo Univ.

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). 8 December 2018 Computer Graphics, Lee Byung-Gook, Dongseo Univ.

Bitwise logic operations OpenGL logic keyword Description GL_CLEAR 0 GL_COPY source GL_NOOP destination GL_SET 1 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 8 December 2018 Computer Graphics, Lee Byung-Gook, Dongseo Univ.

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. 8 December 2018 Computer Graphics, Lee Byung-Gook, Dongseo Univ.

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(); 8 December 2018 Computer Graphics, Lee Byung-Gook, Dongseo Univ.

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). 8 December 2018 Computer Graphics, Lee Byung-Gook, Dongseo Univ.

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