aims By the end of the session you will be able to: Explain how images are represented in Processing Manipulate images using the pixels member Use for loops to manipulate images Display video from a webcam Use filters to manipulate the video

images Images are represented as a grid of pixels Called a bit map There is a colour value stored for each pixel

images Internally the image is represented as an array Each element of the array is a pixel access the array through the pixels member have to loadPixels first and updatePixels at the end Though an image is 2D the array is 1D

Images In order to get a particular pixel you need to use the following formula pixels[x + y*width]

Images and the screen The pixels in the processing window are represented in exactly the same way You can use the same functions e.g. image1.loadPixels, image1.pixels loadPixels, pixels for the window

aims By the end of the session you will be able to: Explain how images are represented in Processing Manipulate images using the pixels member Use for loops to manipulate images Display video from a webcam Use filters to manipulate the video

image filtering Filters alter images by changing pixel values one by one Different filters use different mathematical functions e.g. invert sets each pixel to its inverse threshold sets all pixels below a value to 0 all those above to 255

image filtering As the window is represented in exactly the same way as an image you can filter the window - image1.filter - filter Can be useful for filtering thing you have drawn Filter the output of an image without changing it

image blending Image blending takes two images and combines their pixel values The pixel values at a point in image 1 are combined with those at the same place in image 2 Again you can use different mathematical functions e.g. add the pixel values, or select the darkest or lightest of the two values

\\ Create your own filter Wouldnt it be good to create our own filters? All you need to do is go through all the pixels in an image and change the colour values

\\ Create your own filter A lot of pixels: lots of work to do it by hand Need a way of automatically stepping through all the pixels: Loops!

\\ For Loops The basic idea: You have a variable (e.g. x) that counts between a range of numbers e.g. from 0 to the width of the screen For each value of x you Do something (execute some commands)

Create a gradient Extra: Create your own filter, e.g.: invert: converts the colour of a pixel to 256- colour Threshold: sets any pixel above a certain value to 256, and below to 0 Extra: Turn an image upside down using a loop Exercises

You can also use processing to manipulate video Use the video library import processing.video.*; We will use the webcam A capture object Capture video = new Capture(XXX); Video

You can use filters on the captured video to create Magic Mirror effects You can also use video files in processing (look up the video library) Video

Create your own magic mirror effect Extra: modify the final example so that the circles move around Exercises

aims By the end of the session you will be able to: Explain how images are represented in Processing Manipulate images using the pixels member Use for loops to manipulate images Display video from a webcam Use filters to manipulate the video