school of engineering and computer science victoria university of wellington copyright: peter...

School of Engineering and Computer Science

Victoria University of Wellington

Copyright: Peter Andreae & david streader, VUW

Images and 2D Graphics

COMP 112 2015

COMP112 16: 2

Menu

• Graphics• Understanding and Representing Colours • Images and image manipulation

• Using the Java API• Arrays• Reference type• Immuteable Objects

• Admin• Test Wednesday 22nd April 18:00 -> 19:00: MCLT103

COMP112 16: 3

Immutable Objects

• An object is immutable if it can not be changed• How do you make immutable objects

• All instance variables are private final• Only constructors write to instance variables

• What common Java objects are immutable• String• Color• …..

• Why make an object immutable?• Why make an object mutable?

COMP112 16: 4

Images

• Images can be built from objects using: • Color,• transparancy, • reflexivity, • texture,….

• But an image is no more than a 2D array of colored pixels

• How do you represent the colour of a pixel?

• Lots of things you want to do to images• crop, rotate, zoom, change resolution,• change the brightness or colour• blur, sharpen, refocus, join up, morphing,….• compress, decompress,…• image recognition,……………………………

COMP112 16: 5

Pixels and Colours

• Pixels:• sample of the image, typically representing the colour at or

over a small region

• Colours: Stored in• Black and white: 1 Bit• Grey scale: 1 integer, 8 bit, 16, 32 bit,….• Colour Palette: eg, 1 byte (8 bits) specifying a

colour from apalette of 256 colours

• Color: 3 numbers: RGB, HSL, HSV, CMY,…18 bits, 24 bits, 30 bits, 48 bit”

• Color + transparency: 4 numbers

• Why three numbers? What is a colour?

COMP112 16: 6

Color

• Light is made of waves of many different frequencies• spectrum.

• Single frequency light: “pure” color.

• Different combinations of frequencies are different colors.

red violet

red violet

red violet

COMP112 16: 7Why only three color components?• Human eye has only three different color detectors:

• Lots of different combinations of pure colors give rise to the same perceived color

• We can’t distinguish all different colors.

• Screens are designed for the human eye hence only need three numbers each recording the intensity of one of the colors we can detect.

red violet

COMP112 16: 8Side track: Displays and Printing• Different display technologies will generate different

combinations of “pure” colors, and will look different.

⇒ reproducing true colors on digital displays is very hard.

⇒ calibrating displays is challenging

• Printing uses subtractive colors:• adding colors makes it darker• colors behave differently, and are very well specified• may not match what’s on the screen.

• If building software, hardware, or websites where color matters, you need to learn more about it!

COMP112 16: 9

Colors: Which three numbers?

• RGB:• red green blue - additive model• 0,0,0 = black, 1.0, 1.0, 1.0 = white• typically 24 bits per pixel, 8 bits per component• simple, but poor correspondence to how we describe color• mechanical specification related to how devices generate it

color

• HSV, HSL• hue, saturation, value/lightness• a way to define color based on how we describe color• can translate to/from RGB• Try ColorPickerSample.java On comp112 www.

Run ColourPicker

COMP112 16: 10

Transparency (“alpha”)

• Can use a 4th number to represent transparency: ( : [0,1])

• Pixels on a screen only have color RGB

• Transparency defines how to compute a color from two layers that may have different color.

result = color + (1 - ) old-color• Transparency is useful for Layers and for Paints.

• Colour choosers:• Java: javax.swing.JColorChooser• Powerpoint

COMP112 16: 11

Color in Java

• Color is represented by 32 bit color = 4 bytes = 4 8 bits, 1 byte each for red, green, blue, alpha

• Has constructors that take • 3 or 4 integers (0-255)

new Color(20, 172, 230); new Color(20, 172, 230, 128);

• a single integer:new Color(1354982) ; new Color(0x14ACE6);new Color(2148838630, true); new Color(0x8014ACE6, true);

• 3 or 4 floats (0.0 … 1.0) new Color (0.0781f, 0.6718f, 0.8984f);new Color (0.0781f, 0.6718f, 0.8984f, 0.5f);

• Note: the different range of int and float parameters can result in out of range errors

hexadecimalliterals (ints)

float .

literals

COMP112 16: 12

Java Application

• Java program from ColorPickerSample.java code on course home pages.

final ColorPicker colorPicker = new ColorPicker(); colorPicker.setValue(Color.CORAL); final Text text = new Text("Try the color picker!"); text.setFont(Font.font ("Verdana", 20)); text.setFill(colorPicker.getValue()); colorPicker.setOnAction(new EventHandler() { public void handle(Event t) { text.setFill(colorPicker.getValue()); } });

Build object

Return chosen color

COMP112 16: 13

Images: file formats

• Why so many image formats? (raster based formats)• JPEG, (lossy compression)• TIFF, (allows high quality 48 bit colour) • GIF, (palette of 256 24-bit colour, lossless compression)• PNG, (palette and 24-bit, lossless compression)• BMP, (range of formats, usually large)• PNM, (very simple, no compression, large)• WebP, (recent replacement for PNG)• …..

• What is in an image file?• header: information about the image (format, size, ….)• pixel values (compressed and encoded)

• Use Libraries to read and write standard file formats

COMP112 16: 14Images: internal data structuresGood data structure for Java programs working with images?

• 2D array of Color

• 2D array of int: alpha red green blue

• 2D array of int [3], float [3], int [4], float [4]: {red,green,blue,}

• All that you need in this course is the 2D array of Color

COMP112 16: 15Use libraries when programming!

Use library to read standard file formats

Read Color apiRead BufferedImage api

Google java read image from file

How do I build Colors from image?

COMP112 16: 16

Save Color [ ] [ ] to image file

Look up BufferedImage api and Color api

How do I build an image from Colors

COMP112 16: 17

Pot Holes to fall into:

• When you are in a Pot Hole ask yourself if you need to:• look up an object api• Google for a java fragment

• An image is a 2D array of pixels• Array variables are reference• Color is an Object hence reference type but is

immutable • Color can be built by three variables red, green and

blue they can either be three ints or three floats. But the range of the int and float is different. + java can convert an int to a float when used in a computation.

COMP112 16: 18

• An image is a 2D array of pixels• Image A point to an array of rows.

• A row points to an array of pixels• A pixel points to a Color object

Pothole

A

Rows 0,1,.. i

i

Cols 0,1,.. j

Color

COMP112 16: 19

Pothole

• An image is a 2D array of pixels• Will changing A change B?

• B = A;

• B = for(int i = 0; i< A.length; i++) { B[i] = A[i] }

B

Color

Rows 0,1,.. i

A i

Cols 0,1,.. j

B i

COMP112 16: 20

Pothole

• An image is a 2 D array of pixels• Will changing A change B?

• B = for(int i = 0; i< A.length; i++) { for(int j = 0; j< A[0].length; j++) { B[i][j] = A[i][j] }} Is this a problem?

Color

Rows 0,1,.. i

A i

Cols 0,1,.. j

B i

COMP112 16: 21Immutable & repeated images

• If Color was mutable changing A[i][j] would change B[i][j].

• Color is an immutable object. Hence it is safe for A and B to share pixel Color objects.

• Indexed color extends this idea to pixels of the same color in a single image.

Color

Rows 0,1,.. i

A i

Cols 0,1,.. j

B i

A[i][j]

COMP112 16: 22

Immutable & indexed color

• Color is an immutable object hence multile pixels that have the same color can share the same Color object.

• Store an image with a color palette. Each pixel contains the index into the palette and not the color itself.

• Indexed color is used to save memory and file storage while speeding up display refresh and file transfer rates

Color

Rows 0,1,.. i

A i

Cols 0,1,.. j