# Interpolation

Document Sample

```					                    4. Image Operations                                                      Processing Images

1. Images
2. Getting to know the Processing IDE
3. Interpolation

Basic Types                                                             Type casting
Commonly used data types                                                If you declare a variable as one type, you can’t give it a value of
char k;                                                               another type
int I;                                                                     int I;
float d;                                                                   I = 1.6; //error!
color c; // actually a vector
If for some reason you need to convert from one to the other you do
The red(), green(), and blue() functions can be used to extract         it with a cast:
individual values from a color object                                         I = (int) 1.6; //this converts 1.6 to the nearest integer and
e.g. float r = red (c);                                                      stores it in the variable I
Conversely you can create a color from three scalars using the color
constructor:
c = color ( 255, 0, 1);

1
Basic Arrays                                                                     Variable-size Arrays
Declaring arrays in processing :                                              int degrees = 360;
int[] numbers = new int[3];                                                  float[] cos_vals = new float[degrees];
Accessing arrays (pretty much like c/c++/java)                                for(int i=0; i < degrees; i++)
numbers[0] = 90;                                                             {
numbers[1] = 150;                                                              cos_vals[i] = cos(TWO_PI/degrees * i);
numbers[2] = 30;                                                             }

Alternatively:
int[] numbers = { 90, 150, 30 };
int a = numbers[0] + numbers[1]; // Sets variable a to 240
int b = numbers[1] + numbers[2]; // Sets variable b to 180

Setting the colour of pixels                                                     Draw a Line (simple DDA)
stroke (255, 0, 0);                                                                 E.g. draw a line from { 20, 20 } to { 200, 200}
point (x, y);
int x1= 20, y1 = 20; //start point
e.g. paint the screen black ….                                                int x2 = 200, y2 = 200; //end point
for every pixel set the pixel
colour to {0,0,0} (black)                                                 y = y1;
m = (y2-y1) / (x2-x1); //gradient
stroke (0,0,0);                                                              for (int x=x1; x<x2; x=x+1)
for (int i=0; i<width; i++)                                                  {
for (int j=0; j<height; j++)                                                      y = y +2;
Of course, there are existing operations
{                                                                                 point (x, y);                        to do this e.g.
point (i, j);                 width and height are special variables,   }                                           background (0, 0, 0);
that are automatically assigned values
}                                  in the processing environment                                                         line (20, 20, 200, 200);

2
Direct vs Event-driven Mode                                               An Event Loop
If your program isn’t highly interactive e.g. simple image processing,
User                                                        redraw
simply state your instructions step by step
mouseMoved

mousePressed
But processing allows to work in a simple event-driven mode,
similar to most windows programs.                                                                   Windows System                          keyPressed

Event List
Operating System
Event driven programs loop infinitely checking to see if some event
(e.g. user input) has occurred.                                           Application
while (TRUE)
The programmer provides a callback function, for each event                                          e = get_next_event();
switch (e)
that he wishes to deal with. The system executes the callback                                          case MOUSEPRESSED:
function when the relevant event occurs.                                                                    call registered mousePressed() function
case KEYPRESSED
call registered keyPressed() function
...

An image is an array of pixels, each of which has an RGB value.
The setup () function is where you state operations you want
An Image file usually contains:
performed once when your program begins
Width and height of image
An array of rgb values for individual pixels in the image
The draw () function gets called repetitively (unless you stop it)
noloop() stops redrawing loop() restarts it                               In processing, PImage is a predefined data-structure for images
It has the following attributes
Several mouse callbacks exist including mousePressed() ,                      Pixels[ ] //array of pixels
mouseReleased, mouseMoved(), mouseDragged() :                                 width
Mouse positions are returned in mouseX, mouseY                                height
And the following functions
The keyPressed() function gets called when you press a key. You               get( x , y )
can get the key pressed using the global variable keyPressed                  set( x, y, color )
These can also be applied to the window (framebuffer) which
behaves like an image

3
Declare a new Image using the following code:
PImage img;                         Instantiate a PImage object
for (int i=0; i<im.width; i++)
called img.
for (int j=0; j<im.height; j++)
Other image related functions:                                                                      {
memory.                                            im.set (i,j, C ); // c is a color
}
image (img, 0, 0);                              This draws the image with top-
left corner starting at {0, 0}.               N.B. the drawing window itself can be considered an image (remove im in
the above code)
img.set (10, 10, color ( 255, 0, 0) );          Set pixel {10, 10} to color {255,
0, 0} or “red”
color c = img.get(20, 20);                      Get the color of pixel at {20, 20}
N.B. get and set called without
a PImage object will affect the
drawing window

Sample Code                                 PImage im;                                               Simple bit-copy functions
The following sample code is used        void setup()
Simply juggling pixels around can achieve some useful effects e.g.
for the examples in the rest of the      {
lecture.                                  im=loadImage(“../Image8.jpg”);                              Rotating an Image by 90 degrees
size(im.width, im.height);                                      set(x, y, img.get(y, x));     (repeat these for all pixels in the image)
What we essentially want to do in         noLoop();
image processing is calculate a new      }
Mirroring an Image
colour cc for each pixel.                                                                                 set(x, y, img.get(width-x, y));
void draw()                                                  Flipping an Image
This is based on the original colour c   {
and some pixel operations which we         color c, cc;
set(x, y, img.get(x, height-y));
will define.                                                                                          Drawing an image twice as big
for(int x=0; x<im.width; x++)                           set(x*2, y*2, img.get(x, y));
for(int y=0; y<im.height; y++)
In the following slides, we will
{                                                            set(x*2+1, y*2, img.get(x, y));
you can plug into this sample
c = im.get(x,y);                                         set(x*2, y*2+1, img.get(x, y));
program to get the desired                        //cc = ? Provide operation here                          set(x*2+1, y*2+1, img.get(x, y));
effect.                                set (x, y, cc); //set pixel on the framebuffer
}
}

4
Processing Images                                                         Operations on pixels: greyscale
We change an image by applying a Procedure to some or all of it’s              An average or weighted average of
pixels.                                                                        the RGB intensities
Just make sure the final result has
values in the range from 255 to
Examples:                                                                      255
Unweighted
Greyscale the Image
cc = (R+G+B) / 3
Clear Image
Threshold Image                                                             Weighting depends on the sensor
Mirror the image                                                            but usually green is given more
importance
Line Drawing                                                                    cc = 0.3*R + 0.59*G + 0.11*B
Anti-aliasing
Filters                                                                     In processing place the following
in the previous sample code:
Colour                                                                      cc = color ( 0.3*red(c) +
Edge detect                                                                 0.59*green(c) +
0.11*blue(c) );
Blur/Smooth

Negative image                                                            Thresholding
Traditionally describes the operation of reducing an image to a 2
If 255 is full intensity then the
colour bitmap;
negative value of any intensity
c is 255 – c                                                                      All pixels less than a certain threshold level of brightness are
drawn as black. The rest are drawn white
e.g. the opposite of “red”
(240, 0, 0) is (255-240,                                                 We can increase/decrease the threshold value to highlight areas of
255-0, 255-0) i.e. (15, 255,                                             bright contrast at the expense of variations in dark areas, or vice versa.
255) cyan                                                      Output

Code:
cc = color ( 255-red(c),
255-green(c), 255-                                                               Input

blue(c) );
High threshold: all
but the brightest areas
Low threshold: All                                      are rendered as black
these levels of
brightness are
converted to white.            A “halfway” threshold.

5
Multiple Thresholding                                                                               Thresholding code
Alternatively we can set a number                                                                   Simple thresholding
of discrete limits and render with                                                                     float g = 0.3*red(c) + 0.59*green(c) + 0.11*blue(c) ;
a number of different shades e.g.                                                                      if (g>128)
50, 100, 250, 200                                                                                           cc = color (255)
Else
All intensities are rounded down
cc = color (0)
to the closest of these thresholds
Levels
This has some useful applications                                                                      float g = 0.3*red(c) + 0.59*green(c) + 0.11*blue(c) ;
e.g. mosaic effects, colour depth                                                                      cc = color (0);
reduction                                                                                              if (g>50)
cc = color (50);
if (g>100)
output                                                                                                      cc = color (100);
if (g >150)
cc = color (150);
//etc. ..

input

Simple Gamma Correction                                                                             Halftoning
output                                           A method for simulating a
Linear           greater range of colours using
Thresholding is similar to
gamma correction.                                                          Originally, input and
patterns of ink spots of varying
output values are the    concentration.
same

Gamma correction                                                                                    Originally used in print media.
increases/decreases the                                           input                             This works because our visual
intensities of colours smoothly                                                                     system picks up localised
(no discrete threshold levels).                                                                     averaged intensities of colour.
output

2. Pixel is rendered
this level in final
image.                                Gamma corrected curve:
increasing brightness.

input
1. Original
brightness of a
sample pixel

6
Digital Halftones
Simple half tone patterns replace                                                    We can also apply a 3x3 pattern to support 9 different threshold values
thresholded pixels.

0        1       2       3        4

Code (just level 2) effectively
involves the following:

if ( (g>100) && (g<150) )
{
set(x*2, y*2, color(255));
set(x*2+1, y*2, color(0));
set(x*2, y*2+1, color(0);
set(x*2+1, y*2+1, color(255));
}

Full code provided at: http://isg.cs.tcd.ie/dingliaj/Processing/halftone/

Error Diffusion                                                                      Error Diffusion
As we saw before, a pixel is                                                         Error = current pixel value
thresholded (by rounding                                                             minus nearest threshold value
down its intensity to the
nearest threshold level)                                                             Change the pixel values of
neighbouring pixels in the
The difference in actual                                                             original image before they are
intensity and threshold                                                              processed.
intensity is the error in the
pixel.                                                                               a = a + ( 7/16 ) x Error
i.e. it is actually rendered                                                     b = b + ( 3/16 ) x Error
less bright than the original
c = c + ( 5/16 ) x Error
some brightness is lost in                                                                                                       The image is drawn from left to
the overall image                                                                d = d + ( 1/16 ) x Error
right so a common method is to
diffuse the error to the right and
To compensate for this error                                                                                                         below the current pixel.
we can distribute it over it’s
neighbouring pixels.                                                                   Full code provided at: http://isg.cs.tcd.ie/dingliaj/Processing/errordiffuse/
Comparision with halftoning: http://isg.cs.tcd.ie/dingliaj/Processing/diffusion/

7
Dithering Patterns                                                          Mosaics         Threshold values can be used to select patterns,
or even other images to replace small areas of
A more elegant way of                          the original image.
halftoning
On the left the dither
pattern is twice the width
and height of the original
image
Each original pixel is
compared to a 2x2 block of
pixels with the following
values

If the original value is
higher than the value in the
dither pixel, then it is
enabled.
http://isg.cs.tcd.ie/dingliaj/Processing/mosaic/

http://isg.cs.tcd.ie/dingliaj/Processing/picmosaic.zip

8
Edge detection
How does a pixel compare to it’s neighbours.
5 point laplacian operator

if c (x, y) is the color of pixel at x,y
Then we calculate:
4*c(x,y) – { c(x+1, y) + c(x-1,y) + c(x, y+1) + c(x, y-1)}
i.e. 4 x current colour – sum of neighbours

If the pixel colour is the same as its neighbours the result is low
or close to 0. Otherwise the value indicates the steepness of the
change.

5-point laplacian                              9-point laplacian                                                             Original image
showing threshold
levels
-1
-1   -1   -1
-1   4    -1
-1   8    -1
-1
-1   -1   -1

Filtered image, note
the high numbers in
the strong edge pixels

http://isg.cs.tcd.ie/dingliaj/Processing/laplac/

9
Linear Smoothing                                                                    Kuwuhara
Uniform Filter For each pixel {x, y}, look at                                     The Kuwuhara filter performs an edge preserving smooth
“nearby” pixels in a certain radius and average the                               For each pixel {x,y}, look at immediate adjacent regions
values.                                                                              Find the variance i.e. difference between min and max intensity
For the region with the minimum variance
Get it’s MEAN (average) colour and apply to {x, y}
Rectangular            Circular

Non-uniform filters take what is essentially a
weighted average of nearby pixels

Pyramidal                 Cone

http://isg.cs.tcd.ie/dingliaj/Processing/Kuwuhara/
http://isg.cs.tcd.ie/dingliaj/Processing/smooth/    5x5 Kuwuhara

Blending two images
If a and b are pixels colors in imageA and imageB respectively
And cc is the color of the blended images
then
cc = (1-α)*a + α∗b
Different values of the variable α will increase the emphasis on
imageA or imageB                                                                                 Lab: Processing Intro
We can do a smooth fade from imageA to imageB by gradually
increasing α

float r = (1-α) * red(imageA.get(x,y)) + α * red(imageB.get(x,y));
01/02/2007
float g = (1-α) * green(imageA.get(x,y)) + α * green(imageB.get(x,y));
float b = (1-α) * blue(imageA.get(x,y)) + α * blue(imageB.get(x,y));
cc = color (r, g, b);
α = α+0.01;
http://isg.cs.tcd.ie/dingliaj/Processing/blend/

10

```
DOCUMENT INFO
Shared By:
Categories:
Stats:
 views: 14 posted: 1/26/2011 language: English pages: 10
Description: computer graphics and its applicationa
About if any file u wil find copyright contact me it will be remove in 3 to 4 buisnees days. add me on sanjaydudeja007@gmail.com or visit http://www.ohotech.com/