Lab 11: Processing Images 1

1. Lab 11: Processing Images 1 02/02/2007 Image Transitions

2. Note on Continuous Assessment • The following short disclaimer applies to forthcoming processing labs until further notice (this is not intended to constrain anyone unnecessarily but instead it is in order to avoid people spending too much external time on the course materials whilst the thesis deadline approaches) : • The task should be attempted at the lab and shown to the demonstrator (or myself) – who will tick you off for completion. • In addition you should submit via the upload page (http://isg.cs.tcd.ie/John.Dingliana/upload/) once completed • If you miss the lab or can’t finish on time, upload your final solution (as much as you’ve completed) by 5pm Friday*. • Contact me (preferably beforehand) if you are unable to do this for any reason. • Failing all of the above will lead to a miss for the lab – that’s okay, just try not to miss all of them. * For this weeks lab we’ll make it the following Monday.

3. Goals • Write a program in processing to take two images and blend them together (average image). • Modify your program so that you can transition between the two images in one* of the following ways: • Blend smoothly from one to the other • Wipe: Pixels in Image1 get replaced by pixels in Image 2 More difficult options (no hints provided): • Fade through black: Blend from Image 1 to black and then from Black to Image2 • Threshold Wipe: Decrease/Increase the threshold on Image1 gradually until the image becomes white/black then reverse the process to bring up Image2 • Blur and refocus: Image1 gets increasingly blurry and then refocuses to Image2 * Choose ONE of these, you don’t have to do all of them for this lab.

4. PImage im1, im2; im1 = loadImage (“pic1.gif”); im2 = loadImage (“pic2.gif”); color c, d; c = im1.get ( 100, 100); float r, g, b; r = red (c); g = green (c); b = blue (c); d = color (g, g, g); set (25, 25, d); im2.set (35, 35, d); Image creation and load A color object is a vector for storing RGB values get retrieves the pixel at location x, y from the image (im1) float data are numbers with decimal places The red function returns just the red component of a color ( similarly for green and blue) color here creates a color object with the rgb values provided (here they are all the same i.e. grey scale) set assigns the value d to the pixel at location x, y set Can be applied to the program window or to a specific image. Useful functions

5. PSEUDOCODE For each position x, y Get pixel1(x, y) from image1 Get pixel2(x, y) from image2 Result(x,y) = (pixel1 + pixel2) /2 N.B. Since each pixel has three components (RGB) - You have to do the averaging for red green and blue 1. Averaging Images

6. Linear interpolation between two values a and b is achieved by the following formula v = a*(1-t) + b*t; t is a (float) value between 0.0 and 1.o Note that; when t = 0, v = a; when t = 1, v = b; when t = 0.5, v is 0.5*(a+b) i.e. the average of a and b Note this has to be repeated for Red, Green and Blue PSEUDOCODE float t = 0; void draw() { For each position x, y Get pixel1(x, y) from image1 Get pixel2(x, y) from image2 Result(x,y) = pixel1 * (1-t) + pixel2 * t t = t + 0.05; } 2(a). Blend

7. 2(b). Wipe • PSEUDOCODE int w = 0; void draw() { For every pixel from 1 to b Get pixel1 (x,y) from image1 Result(x,y) = pixels (x,y) For every remaining pixel Get pixel2 (x,y) from image2 Result(x,y) = pixels (x,y) }