Images

1. Images

2. 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.

3. 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. 1280 pixels wide x 1024 pixels high = 1,310,702 pixels/image * 4 bytes/pixel = 5,242,808 bytes/image

4. 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

5. 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

6. 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

7. File Formats • Processing supports • JPEG • PNG • GIF

8. 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.

9. 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

10. 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)

11. 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.

12. Images in Processing PImage img; size(400,400); background(255); img = loadImage(“cartoonFace.gif"); image(img,0,0);

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

14. Tinting • tint (gray) • tint(gray, alpha) • tint(value1, value2, value3) • tint(value1, value2, value3, alpha) • tint(color)

15. 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);

16. 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); }

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