Transcript Lecture Notes II

CS320n –Visual Programming
Image Manipulation
What We Will Do Today
• Look at how to alter images using
LabVIEW
Visual Programming
Image Manipulation
2
Loading Images VI
• Block Diagram of VI that allows user to
load jpg images from a file and displays
the image
Visual Programming
Image Manipulation
3
Image Data
• The image cluster contains a
lot of data
• The heart of the image is an
array of ints
– each int only uses 1 byte or 8
bits
– represents a number from 0 –
255
• three ints in a row represent
the red, green, and blue
intensity for 1 pixel
– elements 0, 1, 2 are for the pixel
at row 0, column 0, the upper left
corner
Visual Programming
Image Manipulation
4
Image Data
Visual Programming
Image Manipulation
5
Image Data
Visual Programming
Image Manipulation
6
RGB Colors
• What color is that pixel at the top left
corner? Looks very black
• Unbundle image to get at image array
Visual Programming
Image Manipulation
7
RGB Colors
• First three elements of
image array are 27, 26,
and 5
• Intensity of red from 0 to
255
– 0 is none, 255 is maximum
• a little red, a little green,
almost no blue
• very close to black, all
three 0
Visual Programming
Image Manipulation
8
Viewing a Single Color
• Developed a VI to do this in an early lab
• a single function exists
Controls and indicator
added.
Visual Programming
Image Manipulation
9
Sample Single Colors
Black.
Moss?
Visual Programming
Image Manipulation
10
How Many Colors
• If the encoding of an image allows red,
green, and intensity values of 0 – 255
there are
• 256 * 256 * 256 = 16,777,216 possible
colors
• 1 byte per color per pixel
• 3 bytes total per pixel, 24 bits
• a.k.a. 24 bit image
Visual Programming
Image Manipulation
11
Altering Images
• Some programming tools allow individual pixels
or areas to be affected, recolored.
• We will look at altering image by affecting all
pixels in the image
• need to work with the color data
• can work with the array of colors from image
• OR “unflatten” the image data to a 2d array
– go from an array of 1 dimension (like a list) to an
array with 2 dimensions, like a table
Visual Programming
Image Manipulation
12
Unflatten Image Function
• Most interested in the 24-bit pixmap
Visual Programming
Image Manipulation
13
Unflattening the Image
Image Wire
Displaying value in element 0,0
Shown as a hexadecimal number,
base 16.
1B = red component, 1 * 16 + 11 * 1 = 27
1A = green component, 1 * 16 + 10 * 1 = 26
05 = blue component, 0 * 16 + 5 * 1 = 5
Visual Programming
Image Manipulation
14
One filter – Invert image
• Invert the image
– set each pixel = 16,777,215 – original value
• auto indexing really shines
2d array
1d array
single element
flatten back to image
Visual Programming
Image Manipulation
15
Original
Visual Programming
Image Manipulation
16
Result
Visual Programming
Image Manipulation
17