aditya wikan mahastama [email protected]

38
GRAFIKA KOMPUTER Aditya Wikan Mahastama [email protected] UNIV KRISTEN DUTA WACANA | TEKNIK INFORMATIKA – GENAP 0910 5 Colouring Techniques

Upload: others

Post on 16-Oct-2021

5 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Aditya Wikan Mahastama mahas@ukdw.ac

GRAFIKA KOMPUTERAditya Wikan Mahastama

[email protected]

UNIV KRISTEN DUTA WACANA | TEKNIK INFORMATIKA – GENAP 0910

5Colouring Techniques

Page 2: Aditya Wikan Mahastama mahas@ukdw.ac

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)

Page 3: Aditya Wikan Mahastama mahas@ukdw.ac

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

Page 4: Aditya Wikan Mahastama mahas@ukdw.ac

Halftones• Supposed that we have only 16 colours

like these to display

• How to render, for example, the colour orange?

Page 5: Aditya Wikan Mahastama mahas@ukdw.ac

Halftones• The first (25 % red) would render like

this:

Page 6: Aditya Wikan Mahastama mahas@ukdw.ac

Halftones• The second (37.5 % red) would render

like this:

Page 7: Aditya Wikan Mahastama mahas@ukdw.ac

Halftones• The third (50 % red) would render like

this:

Page 8: Aditya Wikan Mahastama mahas@ukdw.ac

Halftones• And this is what happened when it

comes to greenish orange:

Page 9: Aditya Wikan Mahastama mahas@ukdw.ac

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

Page 10: Aditya Wikan Mahastama mahas@ukdw.ac

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

Page 11: Aditya Wikan Mahastama mahas@ukdw.ac

Indexed• Colour information is stored in RGB, but

retrieved using the index number

Colour 0

Colour 127

Page 12: Aditya Wikan Mahastama mahas@ukdw.ac

Indexed• Colour information is stored in RGB, but

retrieved using the index number

Page 13: Aditya Wikan Mahastama mahas@ukdw.ac

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

Page 14: Aditya Wikan Mahastama mahas@ukdw.ac

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

Page 15: Aditya Wikan Mahastama mahas@ukdw.ac

Solid Colour• No further explanation needed

Page 16: Aditya Wikan Mahastama mahas@ukdw.ac

Mixing Colours• What if two colours are mixed one

another?

Page 17: Aditya Wikan Mahastama mahas@ukdw.ac

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)

Page 18: Aditya Wikan Mahastama mahas@ukdw.ac

Additive Mixing• Another example

Red (255, 0, 0)+Blue (0,0,255)=Magenta (0,255,255)

Page 19: Aditya Wikan Mahastama mahas@ukdw.ac

Additive Mixing• Another example

(255, 128, 64)+(100, 100, 0)=(255, 228, 64)

Page 20: Aditya Wikan Mahastama mahas@ukdw.ac

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

Page 21: Aditya Wikan Mahastama mahas@ukdw.ac

Additive Mixing

Page 22: Aditya Wikan Mahastama mahas@ukdw.ac

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)=?

Page 23: Aditya Wikan Mahastama mahas@ukdw.ac

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)

Page 24: Aditya Wikan Mahastama mahas@ukdw.ac

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)

Page 25: Aditya Wikan Mahastama mahas@ukdw.ac

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)

Page 26: Aditya Wikan Mahastama mahas@ukdw.ac

Distance Mixing• Still unsatisfactory?

Page 27: Aditya Wikan Mahastama mahas@ukdw.ac

Average Mixing• Add both colour components’ intensity,

then halve it

Red (255, 0, 0)+Green (0, 255, 0)=?

Page 28: Aditya Wikan Mahastama mahas@ukdw.ac

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)

Page 29: Aditya Wikan Mahastama mahas@ukdw.ac

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)

Page 30: Aditya Wikan Mahastama mahas@ukdw.ac

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)

Page 31: Aditya Wikan Mahastama mahas@ukdw.ac

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)

Page 32: Aditya Wikan Mahastama mahas@ukdw.ac

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)

Page 33: Aditya Wikan Mahastama mahas@ukdw.ac

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.

Page 34: Aditya Wikan Mahastama mahas@ukdw.ac

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)

Page 35: Aditya Wikan Mahastama mahas@ukdw.ac

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)

Page 36: Aditya Wikan Mahastama mahas@ukdw.ac

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)

Page 37: Aditya Wikan Mahastama mahas@ukdw.ac

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)

Page 38: Aditya Wikan Mahastama mahas@ukdw.ac

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)