aditya wikan mahastama [email protected]
TRANSCRIPT
GRAFIKA KOMPUTERAditya Wikan Mahastama
UNIV KRISTEN DUTA WACANA | TEKNIK INFORMATIKA – GENAP 0910
5Colouring Techniques
Colouring Techniques• There are a few ways to display colours• Why? Aren’t human eyes are able to
percept millions of colours?• The problem was not in the eye, but in
the limitations of displayable colours• Such limitations occur in a limited-
memory system (computer), or limited-colour system (printing machines)
Halftones• Supposed that we have only a number of
colours, say for example 16 (Windows 3.1 VGA system), how do we render and represent all those colours?
• Halftone is a method of representing colours by arranging a few number of colours (maximum 3) into a pattern matrix to represent an intended colour
• The amount of each colour is in percent
Halftones• Supposed that we have only 16 colours
like these to display
• How to render, for example, the colour orange?
Halftones• The first (25 % red) would render like
this:
Halftones• The second (37.5 % red) would render
like this:
Halftones• The third (50 % red) would render like
this:
Halftones• And this is what happened when it
comes to greenish orange:
Halftones• Does halftone applies only to colours?• No, it has been applied since the black-
and-white age in printing industries• Example: old Xerox photocopy machine
Indexed• Supposed that we have a monitor that
can display millions of colours already (VGA), but we only have limited amount of memory to display it (640K system memory in DOS + 2,048K extended memory), how do we render colours?
• Select only a particular colours and put in on a table. Refer to the table when displaying
• The amount of colours stored in table depends to the memory size
Indexed• Colour information is stored in RGB, but
retrieved using the index number
Colour 0
Colour 127
Indexed• Colour information is stored in RGB, but
retrieved using the index number
Indexed• This type of colouring technique is still
preserved by a number of image formats such as GIF and PNG
• This technique saving not only spaces in memory, but also in file size
• Used to render web images, which need to be transmitted in smaller size
Solid Colour• Represents true colour• Representation of a pixel depends to the
colour system used. For example if we use R, G, B, the colour result will be an additive mixing of R, G and B values as is
• Today’s monitor screen is capable of showing true colour
• Today’s LCD screen is capable of emulating true colour to the nearest approximate
Solid Colour• No further explanation needed
Mixing Colours• What if two colours are mixed one
another?
Additive Mixing• This is what happened to the true light
when we add them• Just add the number of corresponding
components, hence the results
Red (255, 0, 0)+Green (0,255,0)=Yellow (255,255,0)
Additive Mixing• Another example
Red (255, 0, 0)+Blue (0,0,255)=Magenta (0,255,255)
Additive Mixing• Another example
(255, 128, 64)+(100, 100, 0)=(255, 228, 64)
Additive Mixing• Wait!• It’s so strange!• I can’t accept it!
• That’s because our eyes aren’t familiar of seeing things that way
Additive Mixing
Distance Mixing• Measure the distance between colour
components’ intensity, then• For the easiest way, halve the distance
Red (255, 0, 0)+Green (0,255,0)=?
Distance MixingHalf the Manhattan DistanceI = ( 0.5×|R1- R2|, 0.5×|G1- G2|, 0.5×|B1- B2| )
Red (255, 0, 0)+Green (0, 255, 0)=(127, 127, 0)
Distance MixingHalf the Manhattan DistanceI = ( 0.5×|R1- R2|, 0.5×|G1- G2|, 0.5×|B1- B2| )
Red (255, 0, 0)+Blue (0, 0, 255)= (127, 0, 127)
Distance MixingHalf the Manhattan DistanceI = ( 0.5×|R1- R2|, 0.5×|G1- G2|, 0.5×|B1- B2| )
Red (255, 0, 0)+Yellow (255 ,255,0)= (0, 127, 0)
Distance Mixing• Still unsatisfactory?
Average Mixing• Add both colour components’ intensity,
then halve it
Red (255, 0, 0)+Green (0, 255, 0)=?
Average MixingHalf the additional productI = ( 0.5×|R1+ R2|, 0.5×|G1+ G2|, 0.5×|B1+ B2| )
Red (255, 0, 0)+Green (0, 255, 0)=(127, 127, 0)
Average MixingHalf the additional productI = ( 0.5×|R1+ R2|, 0.5×|G1+ G2|, 0.5×|B1+ B2| )
Red (255, 0, 0)+Blue (0, 0, 255)= (127, 0, 127)
Average MixingHalf the additional productI = ( 0.5×|R1+ R2|, 0.5×|G1+ G2|, 0.5×|B1+ B2| )
Red (255, 0, 0)+Yellow (255 ,255,0)= (255, 127, 0)
Average MixingTo make it more redI = ( 0.25×|3×R1+ R2|, 0.25×|3×G1+ G2|, 0.25×|
3×B1+ B2| )
Red (255, 0, 0)+Yellow (255, 255,0)= (1020, 255, 0) / 4=(255, 64, 0)
Average MixingTo make it more yellowI = ( 0.25×|R1+ 3×R2|, 0.25×|G1+ 3×G2|, 0.25×|B1+
3×B2| )
Red (255, 0, 0)+Yellow (255, 255,0)= (1020, 765, 0) / 4=(255, 191, 0)
Average Transparency Between Two ColoursI = ( |T1×R1+ T2×R2|, |T1×G1+ T2×G2|, |T1×B1+
T2×B2| )
Where T1 and T2 = [0 : 1]and T1 + T2 = 1
Consider that the colour I2 is overlapping colour I1, then if I2 = 0 it will become fully transparent, and if I2 = 1 it will be totally opaque.
Average Transparency Between Two ColoursExamples between Yellow (255, 255, 0) and Cyan
(0, 255, 255)T1 = 0, T2 = 1 I = ( 0×255 + 1×0, 0×255 + 1×255, 0×0 + 1×255)I = (0, 255, 255)
Average Transparency Between Two ColoursExamples between Yellow (255, 255, 0) and Cyan
(0, 255, 255)T1 = 0.25, T2 = 0.75 I = ( 0.25×255 + 0.75×0, 0.25×255 + 0.75×255,
0.25×0 + 0.75×255)I = (64, 255, 191)
Average Transparency Between Two ColoursExamples between Yellow (255, 255, 0) and Cyan
(0, 255, 255)T1 = 0.5, T2 = 0.5 I = ( 0.5×255 + 0.5×0, 0.5×255 + 0.5×255, 0.5×0 +
0.5×255)I = (128, 255, 128)
Average Transparency Between Two ColoursExamples between Yellow (255, 255, 0) and Cyan
(0, 255, 255)T1 = 0.75, T2 = 0.25 I = ( 0.75×255 + 0.25×0, 0.75×255 + 0.25×255,
0.75×0 + 0.25×255)I = (191, 255, 64)
Average Transparency Between Two ColoursExamples between Yellow (255, 255, 0) and Cyan
(0, 255, 255)T1 = 1, T2 = 0 I = ( 1×255 + 0×0, 1×255 + 0×255, 1×0 + 0×255)I = (255, 255,0)