1 / 23

Mastering Image Manipulation in Processing

Learn to differentiate image file formats, load and display images, apply transformations, create blends & transitions, use loops for image manipulation, and understand filtering and blending techniques in Processing coding language.

mmcnaughton
Download Presentation

Mastering Image Manipulation in Processing

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

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

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

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

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

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

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

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

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

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

  11. \\ radians

  12. \\ 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?

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

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

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

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

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

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

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

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

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

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

More Related