Computer Graphics 8

1
Computer Graphics 8

• Lee Byung-Gook

2
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

3
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)

4
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

5
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.

6
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

7
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.

8
Data Type

• OpenGL keyword Description
• GL_BYTE signed 8-bit integer (-128127)
• GL_UNSIGNED_BYTE unsigned 8-bit integer (0255)
• GL_SHORT signed 16-bit integer (-3276832767)
• GL_UNSIGNED_SHORT unsigned 16-bit integer
  (065536)
• GL_INT signed 32-bit integer(-2147483648214748
  3647)
• GL_UNSIGNED_INT unsigned 32-bit integer
  (04294967296)
• GL_FLOAT single precision floating point
• GL_BITMAP single bits packed into unsigned
  8-bit integers (01)
• 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.

9
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

10
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 imageWidth100, imageHeight200
• imageBuffer malloc(imageWidthimageHeight3)
  // C
• imageBuffer new(unsigned charimageWidthimageH
  eight 3) // C

11
Image buffer

• To access a specific pixel's values within the
  array, use the following array mapping formula
• (assuming 8 bits per component)
• index (imageWidthrow column)sizeof(pixel)
  
• red imageBufferindex
• green imageBufferindex1
• blue imageBufferindex2

12
Image commands
13
Image commands

• glReadPixels(GLint x, GLint y, GLsizei width,
  GLsizei height, GLenum format, GLenum type,
  GLvoid pixels)

(0,0) - in window coordinates
14
Image commands

• glDrawPixels(GLsizei width, GLsizei height,
  GLenum format, GLenum type, GLvoid pixels)
• glRasterPos234sifd(x, y, z, w)
• glRasterPos234sifdv(array)
• glCopyPixels(GLint x, GLint y, GLsizei width,
  GLsizei height, GLenum whichBuffer)
• whichBuffer GL_COLOR, GL_DEPTH, GL_STENCIL.

15
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)
• glRasterPos2i(x,windowHeight-y)
• 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)

16
Manipulating images

• Reflect about an axis
• Increase intensity (brighten)
• Decrease intensity (darken)
• Redistribute the color intensities
• Edge detection
• etc., etc.

17
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?

18
(No Transcript)
19

• 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

20

• 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

21
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

22
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.

23
Blending

• glEnable(GL_BLEND)
• // Draw all of the source and zero of the
  destination
• // destination 1.0source 0.0destination
• 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 sourcesourceAlpha
  destination(1.0-sourceAlpha)
• glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA)
  
• glDrawPixels() // draw the second image

24
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.

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).

26
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

27
Lab 16

• downloading
• void myMouse(int button, int state, int x, int y)
  
• if(button GLUT_LEFT_BUTTON state
  GLUT_DOWN)
• if(x lt bufferWidth y gt bufferHeight)
  first0
• else if(x gt bufferWidth y gt bufferHeight)
  first1
• else if(x lt bufferWidth y lt bufferHeight)
  first2
• glEnable(GL_COLOR_LOGIC_OP)
• glLogicOp(GL_COPY)
• glRasterPos2i(bufferWidth,bufferHeight)
• glDrawPixels(myImagefirst.Width,
  myImagefirst.Height,
• GL_RGB, GL_UNSIGNED_BYTE, myImagefirst.Pixels)
  
• glDisable(GL_COLOR_LOGIC_OP)

28
Lab 16

• else if(button GLUT_RIGHT_BUTTON state
  GLUT_DOWN)
• if(x lt bufferWidth y gt bufferHeight)
  second0
• else if(x gt bufferWidth y gt bufferHeight)
  second1
• else if(x lt bufferWidth y lt bufferHeight)
  second2
• if(sign-1) return
• glEnable(GL_COLOR_LOGIC_OP)
• glLogicOp(sign)
• glRasterPos2i(bufferWidth,bufferHeight)
• glDrawPixels(myImagesecond.Width,
  myImagesecond.Height,
• GL_RGB, GL_UNSIGNED_BYTE, myImagesecond.Pixels
  )
• glDisable(GL_COLOR_LOGIC_OP)
• glutPostRedisplay()

29
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).

30
Exercise

• Download GLF (ZIP format) glf-1.4.zip
• Test GLF Library