aims

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

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

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

5. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 1 2 3 4 5 6 7 8 9 10 11 12 10

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

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

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

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

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

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

12. \\ Create your own filter Wouldn’t 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

13. \\ 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!

14. \\ 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)

15. Exercises 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

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

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

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

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