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 : unique colors, typically used for RGB where each primary color (red, green and blue) has 256 possible values. – 32 bits : 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 1280x1024 pixels -- not big -- contains 1,310,720 pixels. – Let’s assume each pixel has a color depth of 32 bits or 4 bytes 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 10x12in 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 P NG is Not G IF 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 = loadImage(“cartoonFace.gif"); image(img,0,0);

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

Tinting tint (gray) tint(gray, alpha) tint(value1, value2, value3) tint(value1, value2, value3, alpha) tint(color)

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

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

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