School of Engineering and Computer Science Victoria University of Wellington Copyright: Peter Andreae, VUW Images and 2D Graphics COMP # 16

COMP112 16: 2 Menu Graphics Understanding and Representing Colours Images and image manipulation Admin Test: 15 th April, 4-5pm, HMLT104, HULT323

COMP112 16: 3 Images An image is a 2D array of pixels Colors how do you represent the colour of a pixel? How do you represent images size, resolution, many different formats Lots of things you want to do to images crop, rotate, zoom, change resolution, change the brightness or colour blur, sharpen, refocus,…. compress, decompress,… join up, morphing,…. photoshop effects,………………………………………………….. image recognition,……………………………

COMP112 16: 4 Pixels and Colours Pixels: sample of the image, typically representing the colour at or over a small region Colours: 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 a palette of 256 colours Colour: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: 5 Colour 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: 6 Why only three color components? Human eye has only three different color detectors: Lots of different combinations of pure colours give rise to the same perceived color We can’t distinguish as many different colours as an eye with (say) five different color detectors. Three degrees of freedom ⇒ three numbers are sufficient. red violet

COMP112 16: 7 Side track: Displays and Printing Different display technologies will generate different combinations of “pure” colours, and will look different. ⇒ reproducing true colours on digital displays is very hard. ⇒ calibrating displays is challenging Printing uses subtractive colours: adding colours 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 colour matters, you need to learn more about it!

COMP112 16: 8 Colours: 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 non-linear correspondence to our perception HSV, HSL hue, saturation, value/lightness can translate to/from RGB better correspondence to perception CMY Cyan, magenta, yellow subtractive for printing. Run ColourPicker

COMP112 16: 9 Transparency (“alpha”) Can use a 4 th number to represent transparency: (  ) Governs how this color combines with another color. result =   colour + (1 -  )  old-color Colour choosers: Java: javax.swing.JColorChooser Powerpoint Inkscape multiple visualisations of a 3D space. challenging HCI design issue.

COMP112 16: 10 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( ) ; new Color(0x14ACE6); new Color( , true);new Color(0x8014ACE6, true); 3 or 4 floats (0.0 … 1.0) new Color (0.0781f, f, f); new Color (0.0781f, f, f, 0.5f); Static “factory” method: Color.getHSBColor(0.7656f, f, f) hexadecimal literals (ints) float. literals

COMP112 16: 11 Java Program import ecs100.*; import java.awt.Color; import javax.swing.JColorChooser; public class ColourPicker{ private Color color = new Color(20, 172, 230, 128); private int radius = 20; public ColourPicker(){ UI.setColor(color); UI.setMouseListener(new UIMouseListener(){ public void mousePerformed(String action, double x, double y){ if (action.equals("released")){ UI.fillOval(x-radius, y-radius, radius*2, radius*2); } }}); UI.addButton("Colour", new UIButtonListener(){ public void buttonPerformed(String b){ color = JColorChooser.showDialog(null, "pick a color", color); UI.setColor(color); }}); UI.addSlider("Size", 0, 100, radius, new UISliderListener(){ public void sliderPerformed(String s, double value){ radius = (int)value; }}); } public static void main(String[] arguments){ new ColourPicker(); } } Anonymous inner classes

COMP112 16: 12 Images what do I want to say? images vs compressed images image files: header information vs pixel values talk about compression? image arrays: 2D array of Color, easy, but problem: Color is immutable 2D array of int (rgb) easier, problem: harder to manipulate components 2D array of array of int[3] mutable, so easy to access and change components separately reading files in Java

COMP112 16: 13 Images: file formats Files: Why so many image formats? (raster based formats) JPEG, (lossy compression) TIFF, (allows high quality 48 bit colour) GIF, (palette of 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, 45% better on av ….. What is in an image file? header: information about the image (format, size, ….) pixel values (compressed and encoded)

COMP112 16: 14 Images: internal data structures Good 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,  } + -

COMP112 16: 15 Load image file to int [ ][ ][ ] import javax.imageio.ImageIO; import java.awt.image.BufferedImage; private int [ ][ ][ ] image; public void loadImage() { String imageName = UIFileChooser.open(); if (imageName==null) return; try { BufferedImage img = ImageIO.read(new File(imageName)); UI.printMessage("loaded image " + imageName); image = new int [img.getHeight()] [img.getWidth()] [3]; for (int row = 0; row < img.getHeight(); row++){ for (int col = 0; col < img.getWidth(); col++){ int rgb = img.getRGB(col, row); image[row] [col] [0] = (rgb>>16) & 255; image[row] [col] [1] = (rgb>>8) & 255; image[row] [col] [2] = rgb & 255; } } catch(IOException e){UI.println("Image reading failed: "+e);} } Use a library!! Don’t parse the formats yourself! Bitwise shift operators

COMP112 16: 16 Save int [ ] [ ] [ ] to image file public void saveImage() { if (image==null) { return; } int height = this.image.length; int width = this.image[0].length; BufferedImage img = new BufferedImage(width, height, BufferedImage.TYPE_INT_ARGB); for (int row = 0; row < height; row++) { for (int col = 0; col < width; col++) { int rgb = (((image[row][col][0] << 8) + image[row][col][1]) << 8) + image[row][col][2]; img.setRGB(col, row, rgb); } try { String fname = UIFileChooser.save("save to png image file"); if (fname==null) { return; } ImageIO.write(img, "png", new File(fname)); } catch(IOException e){UI.println("Image reading failed: "+e);} }