Images - PowerPoint PPT Presentation

Loading...

PPT – Images PowerPoint presentation | free to download - id: 6fa6ad-ODU3M



Loading


The Adobe Flash plugin is needed to view this content

Get the plugin now

View by Category
About This Presentation
Title:

Images

Description:

Title: Image 1 Author: Susan Reiser Last modified by: Rebecca Bruce Created Date: 2/21/2009 1:49:15 PM Document presentation format: On-screen Show (4:3) – PowerPoint PPT presentation

Number of Views:48
Avg rating:3.0/5.0
Slides: 18
Provided by: Susan746
Learn more at: http://www.cs.unca.edu
Category:

less

Write a Comment
User Comments (0)
Transcript and Presenter's Notes

Title: 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?
  • Lets do the math!
  • An image that is 1280x1024 pixels -- not big --
    contains 1,310,720 pixels.
  • Lets 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 images resolution (the number
    of pixels) should be at least 300 pixels per
    inch.
  • Lets 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 gt 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().
About PowerShow.com