Images Digital Images Rectangular arrays of pixel data

Images

Digital Images • Rectangular arrays of pixel data • Pixel - picture element, smallest addressable part of the frame buffer. • Color depth - the depth of each pixel in the frame buffer in terms of bits. – 8 bits : 256 unique colors – 24 bits : 2563 unique colors, typically used for RGB where each primary color (red, green and blue) has 256 possible values. – 32 bits : 2564 used for RGBA where there are 8 bits for each red, green, blue and alpha.

Image Size • A raw image or an uncompressed image can be huge. Why? • Let’s do the math! – An image that is 1280 x 1024 pixels -- not big -contains 1, 310, 720 pixels. – Let’s assume each pixel has a color depth of 32 bits or 4 bytes. 1280 pixels wide x 1024 pixels high = 1, 310, 702 pixels/image * 4 bytes/pixel = 5, 242, 808 bytes/image

Once More • To print well, a image’s resolution (the number of pixels) should be at least 300 pixels per inch. • Let’s say we want a 10 x 12 in print. What should our resolution be? 3000 pixels wide x 3600 pixels high

And What Size Would the Image Be? • Assume that our image is 3000 pixels wide x 3600 pixels high • And it has color depth of 32. If the image is uncompressed what size in bytes will it be? 43, 200, 000 bytes / image

Compression • Images are compressed to reduce their file sizes. – Compression schemes which lose image data are classified as “Lossy” • GIF when more than 256 colors • JPEG in all cases – Compression schemes which preserve all image data are classified as “Lossless” • GIF when fewer than 256 colors • PNG in all cases

File Formats • Processing supports – JPEG – PNG – GIF

JPEG File Format • • Joint Photographic Expert Group Lossy 24 bit color depth Excellent Compression - although uneven compression because the image is compressed in small square sub-images.

GIF File Format • • Graphics Interchange Format Lossy if more than 256 colors 1 bit transparency Palette based – a palette contains 256 or fewer colors – Color depth of 8 – one (and only one) color in the palette may be designated as transparent

PNG File Format • • • Portable Network Graphics Informally PNG is Not GIF Lossless 64 bit (or fewer) color depth 3 Possible Structures – True color (RGBA) – Grayscale – Palette Based (like GIF)

Using Images in Processing • In processing, add the image (with the extension set correctly) by selecting – SKETCH > ADD FILE • Or you can create a folder named data and place it inside of the current sketch folder.

Images in Processing PImage img; size(400, 400); background(255); img = load. Image(“cartoon. Face. gif"); image(img, 0, 0);

Scaling the Image PImage img; size(400, 400); background(255); img = load. Image("cartoon. Face. gif"); image(img, width/3, height/3, 100);

Tinting • • • tint (gray) tint(gray, alpha) tint(value 1, value 2, value 3, alpha) tint(color)

Images in Processing PImage img; size(400, 400); background(255); img = load. Image("cartoon. Face. gif"); tint(255, 0, 0); image(img, width/3, height/3, 100);

Something More Exciting PImage img; void setup() { size(400, 400); background(255); img = load. Image("cartoon. Face. gif"); } void draw() { tint(random(255), 50); image(img, random(350), 100); }

In-class Lab • Find two or more images on the Internet. • Create a collage of the images. Show me you can use tint().