Creative Computing

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

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

Creative Computing \\ image files Different file formats store this pixel data in different ways

Creative Computing \\ 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

Creative Computing \\ 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

Creative Computing \\ 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

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

Creative Computing \\ 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

Creative Computing \\ 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

Creative Computing \\ 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

Creative Computing \\ radians

Creative Computing \\ 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?

Creative Computing \\ order of transforms Order matters when you do transforms Generally, the best combination is: Translate Rotate Scale

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

Creative Computing \\ 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

Creative Computing \\ 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

Creative Computing 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 \\ Exercises

Creative Computing \\ 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

Creative Computing \\ 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!

Creative Computing \\ 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)

Creative Computing 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

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