GRAFIKA KOMPUTERAditya Wikan Mahastama

mahas@ukdw.ac.id

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)