Creative Computing

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 mapThere 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 vectorBitmap 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 UncompressedUncompressed 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 LossyLossy 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 transformstranslate – change positionrotate 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 radiansConstants HALF_PI, PI and TWO_PIYou 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 transformsOrder matters when you do transforms

Generally, the best combination is:TranslateRotateScale

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 filterWouldn’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

Creative Computing \\ Create your own filterA 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 gradientExtra: Create your own filter, e.g.:invert: converts the colour of a pixel to 256-colourThreshold: 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