Images and Colour

SSC1. V. Sorge 2009 67 Images and colour

Colour - colours - colour spaces - colour models Raster data - image representations - single and multi-band (multi-channel) Images - colour lookup tables - operations on images

SSC1. V. Sorge 2009 68 SSC1. V. Sorge 2009 Colour images

Colour images have two components:
Colour images have two components: • raster data - an array of pixels; • colour model - a description of how pixels are mapped to colours.

A pixel is defined in terms of its components in a
A pixel is defined in terms of its components in a particular colour space particular colour space

SSC1. V. Sorge 2009 69 SSC1. V. Sorge 2009 Java image representation: BufferedImage Java image representation:

BufferedImage

Raster ColorModel

SampleModel ColorSpace DataBuffer

SSC1. V. Sorge 2009 70 SSC1. V. Sorge 2009 Colour spectrum – visible light

Ultraviolet Infrared

400 nm 700 nm

SSC1. V. Sorge 2009 71 Colour spaces

A colour space represents a system for
A colour space represents a system for measuring colours measuring colours

Most colours can be represented using three
Most colours can be represented using three colour components colour components

They are called the primary colours (or the
They are called the primaries) primaries)

SSC1. V. Sorge 2009 72 SSC1. V. Sorge 2009 Colour spaces

There are many colour spaces.
There are many colour spaces.

The choice of a particular space depends on the
The choice of a particular space depends on the context in which we want to describe colours. context in which we want to describe colours. The four most common colour spaces are: The four most common colour spaces are: • RGB: additive colour space • HSV: artistic colour space • CMY: subtractive colour space • XYZ: based on human colour perception
Others include: YIQ, YUV, YdbDr, YcbCr, xvYCC
Others include: YIQ, YUV, YdbDr, YcbCr, xvYCC

SSC1. V. Sorge 2009 73 SSC1. V. Sorge 2009 RGB

Primaries: Red - Green - Blue
Primaries: Red - Green - Blue
Similar to colours detected by colour receptors in
Similar to colours detected by colour receptors in the eye the eye
Also used in TV technology
Also used in TV technology

Blue Cyan

M agent a W hit e

Black Green

Red Yellow

SSC1. V. Sorge 2009 74 SSC1. V. Sorge 2009 RGB

SSC1. V. Sorge 2009 75 SSC1. V. Sorge 2009 RGB – an additive system

SSC1. V. Sorge 2009 76 SSC1. V. Sorge 2009 HSV

Primaries: Hue - Saturation - Value
Primaries: Hue - Saturation - Value
Colour space related to subjective description of
Colour space related to subjective description of colours colours

Green Yellow

Cyan White Red

Blu e M agenta

Black

SSC1. V. Sorge 2009 77 SSC1. V. Sorge 2009 HSV

SSC1. V. Sorge 2009 78 SSC1. V. Sorge 2009 CMY

Primaries: Cyan - Magenta – Yellow
Primaries:

Used in printing technology
Used in printing technology
Mixing is subtractive
Mixing is subtractive

SSC1. V. Sorge 2009 79 SSC1. V. Sorge 2009 CMY – subtractive system

SSC1. V. Sorge 2009 80 CIE XYZ

Primaries: X, Y, Z
Primaries: X, Y, Z
Based on colour perception by humans
Based on colour perception by humans
Device independent
Device independent

The most common representation of the CIE XYZ
The most common representation of the CIE XYZ space is the CIE chromacity diagram space is the CIE chromacity diagram

SSC1. V. Sorge 2009 81 SSC1. V. Sorge 2009 CIE XYZ Chromacity diagram CIE XYZ Chromacity diagram

SSC1. V. Sorge 2009 82 SSC1. V. Sorge 2009 Monochrome images

Images represented by a single primary - a value
Images represented by a single primary - a value

Show only shades of grey
Show only shades of grey

Binary images use only two shades of grey: black
Binary images use only two shades of grey: black and white. and white.

SSC1. V. Sorge 2009 83 SSC1. V. Sorge 2009 Vector notation for colours

[ Primary1 Primary2 Primary 3 ] [ Primary1 Primary2 Primary 3 ]

[ R G B ] yellow = [ 1 1 0 ] [ R G B ] orange = [ 1 0.5 0 ] pink = [ 1 0.7 0.7]

[ H S V ] pink = [ 0 0.3 1 ] [ H S V ]

[ C M Y ] red = [ 0 1 1 ] [ C M Y ]

SSC1. V. Sorge 2009 84 SSC1. V. Sorge 2009 Colour space conversion

Colours can be converted from one space to
Colours can be converted from one space to another another

Conversion from RGB to CMY:
Conversion from RGB to CMY: [ C M Y ] = [ 1 1 1 ] - [ R G B ] [ C M Y ] = [ 1 1 1 ] - [ R G B ]

Example: Convert green from RGB to CMY
Example: Convert green from RGB to CMY [ C M Y ] = [ 1 1 1 ] - [ 0 1 0 ] = [ 1 0 1 ] [ C M Y ] = [ 1 1 1 ] - [ 0 1 0 ] = [ 1 0 1 ]

SSC1. V. Sorge 2009 85 SSC1. V. Sorge 2009 Conversion from RGB to XYZ

Each of the R, G and B primaries is a weighted
Each of the R, G and B primaries is a weighted sum of X, Y and Z primaries sum of X, Y and Z primaries

Weights expressed in matrix notation, e.g.
Weights expressed in matrix notation, e.g.

0.41 0.21 0.02 0.36 0.71 0.12 0.18 0.07 0.95

SSC1. V. Sorge 2009 86 SSC1. V. Sorge 2009 Conversion from RGB to XYZ

Conversion implemented as a matrix
Conversion implemented as a matrix multiplication multiplication

0.584 0.311 0.047 [ X Y Z ] = [ R G B ] · 0.188 0.614 0.103 0.179 0.075 0.939

SSC1. V. Sorge 2009 87 SSC1. V. Sorge 2009 Colour Spaces in Java

Colour Spaces and Colours are implemented in the
Colour Spaces and Colours are implemented in the java.awt.color.* package java.awt.color.*
Abstract class ColorSpaces provides as constants
Abstract class • a number of standard colour spaces: • CS_CIEXYZ, CS_sRGB • some specific colour space types: • TYPE_HSV, TYPE_RGB, TYPE_CMY, TYPE_XYZ • some generic colour space types wrt. different number of • components
One can obtain an instance of a colour space
One can obtain an instance of a colour space using the getInstance(int colorspace) method. using the For example: For example: ColorSpace.getInstance(ColorSpace.CS_sRGB); ColorSpace.getInstance(ColorSpace.CS_sRGB); returns a standard RGB colour space. returns a standard RGB colour space.

SSC1. V. Sorge 2009 88 SSC1. V. Sorge 2009 Colour Space Conversion in Java Colour Space Conversion in Java

It is often necessary to convert between colour
It is often necessary to convert between colour spaces of different images. The ColorSpace class spaces of different images. The provides some simple methods to do this: provides some simple methods to do this: • toRGB(float[ ] colorvalue) : Transform colour value from • the space to standard RGB • fromRGB(float[ ] rgbvalue) : Transform colour value from • RGB to the this space • toCIEXYZ(float[ ] colorvalue) : Transform colour value • from the space to CIEXYZ • fromCIEXYZ(float[ ] colorvalue) : Transform colour value • from CIEXYZ to this space
Conversion between two colour spaces therefore
Conversion between two colour spaces therefore is done via intermediate conversion is done via intermediate conversion

SSC1. V. Sorge 2009 89 SSC1. V. Sorge 2009 Colours in Java

Colours (e.g., for the Paint component) can be
Colours (e.g., for the Paint component) can be defined wrt. any colour space with constructor: defined wrt. any colour space with constructor: Color(ColorSpace cspace, float[] components, float alpha)
More easily the can be defined via RGB values
More easily the can be defined via RGB values Color(float r, float g, float b)
Java also provides some default colours in the
Java also provides some default colours in the RGB model: RGB model: • Color.RED, Color.BLUE, Color.GREEN, Color.YELLOW, • Color.BLACK, Color.WHITE, Color.CYAN, etc.

SSC1. V. Sorge 2009 90 SSC1. V. Sorge 2009 Raster data

• Colour • Colour • - colours • • - colour spaces • • - colour models •
Raster data
Raster data
- image representations

- single and multi-band (multi-channel)
Images Images
- colour lookup tables

- operations on images

SSC1. V. Sorge 2009 91 SSC1. V. Sorge 2009 Raster data - pixel structure

Raster data - an image
Raster data - an image

Pixels arranged as a rectangular array
Pixels arranged as a rectangular array

The structure of a pixel depends on
The structure of a pixel depends on • the colour space: how colours are computed • the colour model: how colours are represented

SSC1. V. Sorge 2009 92 SSC1. V. Sorge 2009 Raster data - pixel structure

Raster array Pixel structure

SSC1. V. Sorge 2009 93 SSC1. V. Sorge 2009 Raster data - pixel structure

Binary images
Binary images • pixel represented by a single bit

Monochrome images
Monochrome images • pixel represented by a single byte (a one-dimensional vector)

Colour images
Colour images • usually represented by a 3-dimensional vector • examples [ R G B], [H S V] or [C M Y]

SSC1. V. Sorge 2009 94 SSC1. V. Sorge 2009 Representations: Java terminology Representations: Java terminology

Normal representation
Normal representation • the amount of each primary defined by a number in the range [0,1] • Example: pink (RGB): [1.0 0.5 0.5]

Logical representation
Logical representation • Pixel representation as a vector

Physical representation
Physical representation • depicted by the Colour Model

SSC1. V. Sorge 2009 95 SSC1. V. Sorge 2009 Colour channel

• Colour channel - a component of a colour vector • Colour channel
RGB: red channel, green channel and blue
RGB: red channel, green channel and blue channel channel

A pixel vector can have more than three channels
A pixel vector can have more than three channels

Examples
Examples • alpha channel (often used to describe transparency of a pixel) • z channel (in 3D graphics, the depth of the pixel, used in hidden surface removal)

SSC1. V. Sorge 2009 96 SSC1. V. Sorge 2009 Colour models

A colour model describes how pixels are A colour model describes how pixels are mapped into colours. mapped into colours.

SSC1. V. Sorge 2009 97 SSC1. V. Sorge 2009 Direct Colour (True Colour)

Image is an array of vectors
Image is an array of

Each vector directly encodes values of the three
Each vector directly encodes values of the three primaries primaries

SSC1. V. Sorge 2009 98 SSC1. V. Sorge 2009 Packed Colour Model (Packed Array) Packed Colour Model (Packed Array)

Image is an array of values , each encoding a
Image is an array of colour colour
Examples:
Examples: • 4-byte integer aaaaaaaa bbbbbbbb gggggggg rrrrrrrr

• 1-byte integer rrrgggbb

SSC1. V. Sorge 2009 99 SSC1. V. Sorge 2009 Indexed Colour Model

The most commonly used representation on
The most commonly used representation on smaller workstations smaller workstations

A pixel value (or a value of a pixel component) is
A pixel value (or a value of a pixel component) is an index (a pointer) to a table containing colour an index (a pointer) to a table containing colour definitions definitions

SSC1. V. Sorge 2009 100 SSC1. V. Sorge 2009 Colour Map

Synonyms:
Synonyms: • Colour Lookup Table • CLUT • LUT

Each location in a LUT stores a colour definition
Each location in a LUT stores a colour definition for a pixel with a given value for a pixel with a given value

SSC1. V. Sorge 2009 101 SSC1. V. Sorge 2009 Colour mapping for 1-byte pixels Colour mapping for 1-byte pixels

128

Pixel value Colour m ap 128 R R G G B B

Cell 0 255 255 SSC1. V. Sorge 2009 102 SSC1. V. Sorge 2009 Colour mapping for 3-dimensional pixel vectors Colour mapping for 3-dimensional pixel vectors

Red

Green

Blue

R R G G B B Colour m ap SSC1. V. Sorge 2009 103 SSC1. V. Sorge 2009 Java image representation: BufferedImage Java image representation:

BufferedImage

Raster ColorModel

SampleModel ColorSpace DataBuffer

SSC1. V. Sorge 2009 104 SSC1. V. Sorge 2009 Java image representation: BufferedImage Java image representation:

ColorSpace (e.g. RGB)

DataBuffer SampleModel

SSC1. V. Sorge 2009 105 SSC1. V. Sorge 2009 Raster Data

The Raster class represents a rectangular array of
The Raster class represents a rectangular array of pixels pixels
Raster consists of
Raster • SampleModel • • DataBuffer •
DataBuffer stores the sample values for each pixel
DataBuffer stores the sample values for each pixel
SampleModel describes how to locate a given
SampleModel describes how to locate a given sample value in a DataBuffer sample value in a DataBuffer
Useful methods:
Useful methods: getWidth(), getHeight(), getMinX(), getMinY(), getWidth(), getHeight(), getMinX(), getMinY(), getSampleModel(), getDataBuffer() getSampleModel(), getDataBuffer()
WritableRaster also allows to set components
WritableRaster

SSC1. V. Sorge 2009 106 SSC1. V. Sorge 2009 Sample Model

Colour models are implemented in
Colour models are implemented in java.awt.image.SampleModel java.awt.image.SampleModel
Particular colour models in subclasses:
Particular colour models in subclasses: • ComponentSampleModel, • MultiPixelPackedSampleModel, • SinglePixelPackedSampleModel

SSC1. V. Sorge 2009 107 SSC1. V. Sorge 2009 Accessing Pixels and their Colours Accessing Pixels and their Colours

Pixels can be accessed as elements of the
Pixels can be accessed as elements of the DataBuffer DataBuffer
getDataElements() and setDataElements() allow to
getDataElements() obtain and set pixels obtain and set pixels
Example: Setting a pixel to colour red
Example: Setting a pixel to colour red

// Get the writable raster from the image // Get the writable raster from the image WritableRaster raster = image.getRaster(); WritableRaster raster = image.getRaster();

// Obtain the color model of red represented in RGB // Obtain the color model of red represented in RGB Color newcolor = Color.red; Color newcolor = Color.red; int argb = newcolor.getRGB(); int argb = newcolor.getRGB(); Object colorData = (image.getColorModel()).getDataElements(argb, null); Object colorData = (image.getColorModel()).getDataElements(argb, null);

// This resets the pixel in the data buffer of the raster // This resets the pixel in the data buffer of the raster raster.setDataElements(x,y,colorData); raster.setDataElements(x,y,colorData);

SSC1. V. Sorge 2009 108 SSC1. V. Sorge 2009 Operations on Images

Handling images in Java
Handling images in Java

Drawing on images
Drawing on images

Transforming images
Transforming images

Changing pixel colours
Changing pixel colours

Changing pixel values
Changing pixel values

SSC1. V. Sorge 2009 109 SSC1. V. Sorge 2009 Image IO

Image IO is easiest achieved using the methods
Image IO is easiest achieved using the methods provided in javax.imageio.ImageIO together with provided in the java.awt.image.BufferedImage class the
Reading images:
Reading images: BufferedImage image = ImageIO.read(file); BufferedImage image = ImageIO.read(file);
Writing images:
Writing images: ImageIO.write(image, format, file); ImageIO.write(image, format, file);
Here the format specifies the image format of the
Here the format specifies the image format of the output file. Examples are: output file. Examples are: JPG, BMP, PNG, GIF, etc. JPG, BMP, PNG, GIF, etc.

SSC1. V. Sorge 2009 110 SSC1. V. Sorge 2009 Drawing on Images

Each image provides a graphics context that can
Each image provides a graphics context that can be used for drawing be used for drawing
For BufferedImage image we can create a graphics
For context with context with Graphics2D g2 = image.createGraphics(); Graphics2D g2 = image.createGraphics();
g2 can now be used as any 2D graphics context we
g2 have seen previously have seen previously
In particular, we can
In particular, we can • draw objects like Line2D, Rectangle2D • • paint areas • • perform transformations •

SSC1. V. Sorge 2009 111 SSC1. V. Sorge 2009 Transforming Images

Standard geometic transformation can be performed on images
Affine Transformations • Rotate • Shear • Translations • Scaling

SSC1. V. Sorge 2009 112 Operations on Images

General operations on buffered images are
General operations on buffered images are performed by the BufferedImageOp class performed by the

Operation op is assembled and then applied with
Operation op is assembled and then applied with op.filter(BufferedImage src, BufferedImage dest); op.filter(BufferedImage src, BufferedImage dest);

Source and destination image should be different
Source and destination image should be different

SSC1. V. Sorge 2009 113 SSC1. V. Sorge 2009 Image Transformations

Affine transformations can be performed with
Affine transformations can be performed with AffineTransformOp(AffineTransform t, interpol); AffineTransformOp(AffineTransform t, interpol);
Interpol specifies the interpolation type, e.g.:
Interpol specifies the interpolation type, e.g.: TYPE_BILINEAR, TYPE_BICUBIC,.... TYPE_BILINEAR, TYPE_BICUBIC,....
Transformation t has to be assembled separately
Transformation t has to be assembled separately
Example: This code shears an image
Example: This code shears an image

AffineTransform t =AffineTransform.getShearInstance(.2f,0.25f); AffineTransform t =AffineTransform.getShearInstance(.2f,0.25f);

AffineTransformOp op = new AffineTransformOp op = new AffineTransformOp(t,AffineTransformOp.TYPE_BILINEAR); AffineTransformOp(t,AffineTransformOp.TYPE_BILINEAR); op.filter(src,dest); op.filter(src,dest);

SSC1. V. Sorge 2009 114 SSC1. V. Sorge 2009 Changing pixel colours

Changing pixel colours is very easy within the
Changing pixel colours is very easy within the Indexed Colour Model Indexed Colour Model

A raster array containing pixel values (or pixel
A raster array containing pixel values (or pixel vectors) stays unchanged. vectors) stays unchanged.

Only colour definitions in the LUT are changing
Only colour definitions in the LUT are changing

SSC1. V. Sorge 2009 115 SSC1. V. Sorge 2009 Colour mapping functions: Grey level mapping

Output R Output G Output B

Input Input Input

SSC1. V. Sorge 2009 116 Inverse mapping

Output R Output G Output B

Input Input Input

SSC1. V. Sorge 2009 117 “Hot colours” mapping

Output R Output G Output B Output

Input Input Input

SSC1. V. Sorge 2009 118 SSC1. V. Sorge 2009 Changing Colour Mappings

We change colours by simply replacing the lookup
We change colours by simply replacing the lookup tables in the colour model. tables in the colour model.
LookupOp replaces the lookup table with
LookupOp preprepared one preprepared one
Example: negating colours
Example: negating colours short negative[] = new short[256]; short negative[] = new short[256]; for (int i = 0; i < 256; i++) negative[i] = (short) (255 - i); for (int i = 0; i < 256; i++) negative[i] = (short) (255 - i); ShortLookupTable table = new ShortLookupTable(0,negative); ShortLookupTable table = new ShortLookupTable(0,negative); // First argument of constructor is an offset value LookupOp op = new LookupOp(table, null); LookupOp op = new LookupOp(table, null); // LookupOp takes a renderinghint as second argument op.filter(src,dest); op.filter(src,dest);

SSC1. V. Sorge 2009 119 SSC1. V. Sorge 2009 Changing pixel values: Convolution Changing pixel values: Convolution

Convolution: a spatial filtering technique
Convolution: a spatial filtering technique
calculates a weighted average of several pixels
calculates a weighted average of several pixels lying within a small neighbourhood, normally 3x3 lying within a small neighbourhood, normally 3x3 square, square,

The 3x3 neighbourhood is called a kernel.
The 3x3 neighbourhood is called a kernel.
The effects depend on the values of weights.
The effects depend on the values of weights.

SSC1. V. Sorge 2009 120 SSC1. V. Sorge 2009 Examples of smoothing kernels Examples of smoothing kernels

1/9 1/9 1/9 1/101/10 1/10 1/161/8 1/16 1/9

1/9 1/9 1/9 1/10 1/5 1/10 1/8 1/4 1/8 1/9

1/9 1/9 1/9 1/10 1/10 1/10 1/16 1/8 1/16 1/9

SSC1. V. Sorge 2009 121 SSC1. V. Sorge 2009 Original image Image after smoothing Original image

SSC1. V. Sorge 2009 122 SSC1. V. Sorge 2009 Examples of sharpening kernels

-1 -1 -1 0 -1 0 1 -2 1 -1

-1 9 -1 -1 5 -1 -2 5 -2 -1

-1 -1 -1 0 -1 0 1 -2 1 -1

SSC1. V. Sorge 2009 123 SSC1. V. Sorge 2009 Original image Image after sharpening

SSC1. V. Sorge 2009 124 SSC1. V. Sorge 2009 Convolution Operations

ConvolveOp carries out convolutions
ConvolveOp
A kernel has to be prepared and passed as
A kernel has to be prepared and passed as argument argument
Example: Edge detection
Example: Edge detection //Create the kernel. //Create the kernel. float[] elements = { 0.0f, -1.0f, 0.0f, float[] elements = { 0.0f, -1.0f, 0.0f, -1.0f, 4.0f, -1.0f, 0.0f, -1.0f, 0.0f}; Kernel kernel = new Kernel(3,3,elements); Kernel kernel = new Kernel(3,3,elements);

ConvolveOp op = new ConvolveOp(kernel); ConvolveOp op = new ConvolveOp(kernel); op.filter(image,filteredImage); op.filter(image,filteredImage);

SSC1. V. Sorge 2009 125 SSC1. V. Sorge 2009