\\ aims

2. \\ aims • By the end of the session you will be able to: • Explain the difference between various image file formats • Load in and display images in Processing • Translate, rotate and scale images • Create a variety of blends and transitions between images • Use for loops to manipulate images

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

4. \\ image files • Different file formats store this pixel data in different ways

5. \\ image files • Bitmap vs vector • Bitmap files represent images as a grid of pixel values • Vector graphics represent a set of lines and shapes that can be used as a recipe for creating an image

6. \\ image files • Compressed vs Uncompressed • Uncompressed Files just store the data directly • This takes up a lot of storage space • Compressed files reduce the amount of data by using special formats

7. \\ image files • Lossless vs Lossy • Lossy file formats compress the image in a way that means some information is lost • They can compress better than lossless formats (at a cost) • The least visually important information is lost

8. \\ aims • By the end of the session you will be able to: • Explain the difference between various image file formats • Load in and display images in Processing • Translate, rotate and scale images • Create a variety of blends and transitions between images

9. \\ Exercises • Load in and display an image that you have created • Make sure the window is big enough (the exact size of the image?) • Look up translate, rotate and scale, use them to change the position etc. of your image • Extra: Load 2 images side by side using transforms

10. \\ Transforms • Rather than changing the shape or positions of objects directly you can do so with transforms • translate – change position • rotate • scale • Will work on anthing: shapes, images, groups • The command will affect anything that comes after it

11. \\ radians • Angles are always expressed as radians: • 180 degrees = pi radians • Constants HALF_PI, PI and TWO_PI • You can use the radians function to convert to radians

12. \\ radians

13. \\ exercises • Try combining translate, rotate and scale in different orders • Extra: What difference does order make? • Extra: Where does it rotate/scale around? • Extra: Can you make it rotate around the middle of a shape?

14. \\ order of transforms • Order matters when you do transforms • Generally, the best combination is: • Translate • Rotate • Scale

15. \\ aims • By the end of the session you will be able to: • Explain the difference between various image file formats • Load in and display images in Processing • Translate, rotate and scale images • Create a variety of image filters and blends

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

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

18. \\ Exercises • Experiment with filter types: BLUR, THRESHOLD, POSTERIZE, INVERT, GRAY, create a nice effect • Load two images and do the same with blend types: ADD, SUBTRACT, DARKEST, DIFFERENCE, OVERLAY • Extra: Create an animated filter effect that changes over time

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

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

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

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

23. \\ aims • By the end of the session you will be able to: • Explain the difference between various image file formats • Load in and display images in Processing • Translate, rotate and scale images • Create a variety of blends and transitions between images