CS 320 n Visual Programming Image Manipulation What

CS 320 n –Visual Programming Image Manipulation

What We Will Do Today • Look at how to alter images using Lab. VIEW 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 = 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 2 d 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 Wire Displaying value in element 0, 0 Shown as a hexadecimal number, base 16. 1 B = red component, 1 * 16 + 11 * 1 = 27 1 A = 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 2 d array 1 d array single element flatten back to image Visual Programming Image Manipulation 15

Original Visual Programming Image Manipulation 16

Result Visual Programming Image Manipulation 17