Scribd
Upload
12 views33 pages

L5

Bb

Uploaded by

نواف الشهراني
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
12 views33 pages

L5

Bb

Uploaded by

نواف الشهراني
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 33

Color representation in

computer
Learning Objectives

• Explain how RGB color is represented in bytes


• Explain the difference between “bits” and “binary numbers”
• Change an RGB color by binary addition
• Discuss concepts related to digitizing sound waves
• Explain data compression and its lossless and lossy variants
• Explain the meaning of the Bias-Free Universal Medium
Principle
Digitizing Data

• Digitizing is more than letters, numbers, and metadata


• It is also photos, audio, and video
• What are the bits doing?
• Digitizing includes other forms of digitized information, known
as multimedia
• Same principles are used as with letters and numbers to
encode information into bits
Color and the Mystery of Light

• Color on a Computer Display:


• Pixels are small points of colored light arranged in a grid
• Each pixel is formed from three colored lights: red, green,
and blue.
• known as RGB (always in that order)
Showing Colors

• Turning on one light at a time, the display turns red, green, or


blue
• Turning off all of them makes black
• Turning on all of them makes white
• All other colors are made by using different amounts or
intensities of the three lights
Yellow = R + G?

• Combining red and green


makes yellow
• I thought that red and
yellow make orange?
– There is a difference
between colored light and
colored paint
Yellow = R + G?

• Paint reflects some colors


and absorbs others
• When white light strikes
paint, some light is
absorbed (we can’t see it)
and some light is reflected
(we see it)
Yellow = R + G?

• In the case of a pixel, the


light shines directly at our
eyes
• Nothing is absorbed
• Nothing is reflected
• Just see pure colored light
LCD Display Technology

• At left in the close-up of an


LCD is an arrow pointer with
two enlargements of it
• From a distance, the pixels
appear white
• Close up, the pixels are red,
green, and blue colored
lights
Black and White Colors

• The intensity of RGB light is usually given by a binary number


stored in a byte
• Representing the color of a single pixel requires 3 bytes (1 for
each color)
- Smallest intensity for a color is 0000 0000
- Largest intensity for a color is 1111 1111
• Doing the math from, says the range of values is 0 through
255 for each color
Black and White Colors

• Black is the absence of light:


- 0000 0000 0000 0000 0000 0000
- RGB bit assignment for black

• White is the full intensity of each color:


- 1111 1111 1111 1111 1111 1111
- RGB bit assignment for white
Color Intensities
• Consider blue (0000 0000 0000 0000 1111 1111)
• The 8 bits specifying its intensity have position values:
128 64 32 16 8 4 2 1
1 1 1 1 1 1 1 1

• If we want the sub pixel to be at half intensity : each bit


contributes half as much
power as the bit to its left
128 64 32 16 8 4 2 1
1 0 0 0 0 0 0 0
Color Intensities
Decimal to Binary

• Which powers of 2 combine to make the decimal number?


Lighten Up

• Changing Colors by Addition


• To make a lighter color of gray, we change the common
value to be closer to white.
Lighter Still…
• Imagine that the color lighter still by another 16 units of
intensity for each RGB byte
• The 16’s position is already filled with a 1:
1101 1110
• “Carry” to the next higher place
Binary Addition

• Same as decimal addition but with only two digits


• Work from right to left, adding digits in each place position,
writing the sum below
• Like decimal addition, there are two cases:
- Add the two numbers in a place and the result is
expressed as a single digit
- Add two numbers in a place and the result requires
carrying to the next higher place
Computing on Representations
• When digital information is changed through computation,
it is known as computing on representations
• For example: changing
the brightness and
contrast of a photo
Brightness and Contrast

• Brightness refers to how close to white the pixels are


• Contrast is the size of difference between the darkest and
lightest portions of the image
• Photo manipulation software often gives the values of the
pixels in a Levels graph
Levels Graph

• 0 percent is called the


black point, or 000000
• 100 percent is the white
point, or ffffff
• The midpoint is called the
gamma point and it is the
midpoint in the pixel range
Brightness

• We want all the pixels to be


closer to intense white, but to
keep their relative
relationships
• Add 16 to each pixel
• A pixel which is
197, 197, 197 becomes 213,
213, 213
Contrast

• Goal is not to shift the Levels


diagram right, but rather to
“stretch it out” toward the
right
• Add an amount to each pixel
as before
- add a smaller amount for dark
pixels
– Add a larger amount for light
pixels
New Levels Graph
New Levels Math

• For every original pixel Po, subtract the amount of the lower
end of the range:
Po – 38
• That tells how much to increase each pixel position; smaller
(darker) numbers get lightened less than larger (lighter)
numbers
New Levels Math

• Then we multiply by the size of the new interval divided by


the size of the old interval

• Add the low end of the original range back in again to


return each pixel to its new position along the second line
New Levels Math

• The equation for the value in each pixel position of the new
image:
Pn = (Po – 38)*1.08 + 38
• Round the answer to a whole number

• Try it yourself!
For original pixel 239, did you get 255?
For original pixel 157, did you get 167?
Adding Color

• Whenever the 3 bytes differ in value there is color


• “highlights” are the lightest 25 percent of the pixels, and
“shadows” are the darkest 25 percent of the pixels
• Must count the pixels to know those values:
– There are 600 × 800 = 480,000 pixels
in the image
Adding Color

• Pick the lowest pixel value and go up to the next level and
keep adding until you have approximately ¼ of the total
pixels (in this case 120,000)
• Pick the highest pixel value and go down to the next level,
adding until you have the top ¼ of the total pixels
Adding Color
Adding Color

Pixel Type R Chg G Chg B Chg

Highlights +8 0 -4

Midrange +9 +6 -4

Shadows +15 0 -6

Changes we want to make


Adding Color

• Simple algorithm to colorize


an image:
- For each pixel, get the red sub
pixel and check its range
- Using the color modifications
given above for that portion of
the image adjust the color of
each sub pixel
THANK YOU

You might also like