# Interpolation

Document Sample

```					4. Image Operations

1. Images
2. Getting to know the Processing IDE
3. Interpolation
Processing Images
Basic Types
   Commonly used data types
 char k;
 int I;
 float d;
 color c; // actually a vector

   The red(), green(), and blue() functions can be used to extract
individual values from a color object
 e.g. float r = red (c);
   Conversely you can create a color from three scalars using the color
constructor:
 c = color ( 255, 0, 1);
Type casting
   If you declare a variable as one type, you can’t give it a value of
another type
int I;
I = 1.6; //error!

   If for some reason you need to convert from one to the other you do
it with a cast:
I = (int) 1.6; //this converts 1.6 to the nearest integer and
stores it in the variable I
Basic Arrays
   Declaring arrays in processing :
int[] numbers = new int[3];
   Accessing arrays (pretty much like c/c++/java)
numbers[0] = 90;
numbers[1] = 150;
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
Variable-size Arrays
int degrees = 360;
float[] cos_vals = new float[degrees];
for(int i=0; i < degrees; i++)
{
cos_vals[i] = cos(TWO_PI/degrees * i);
}
Setting the colour of pixels
stroke (255, 0, 0);
point (x, y);

   e.g. paint the screen black ….
 for every pixel set the pixel
colour to {0,0,0} (black)

stroke (0,0,0);
for (int i=0; i<width; i++)
for (int j=0; j<height; j++)
{
point (i, j);                width and height are special variables,
that are automatically assigned values
}                                 in the processing environment
Draw a Line (simple DDA)
   E.g. draw a line from { 20, 20 } to { 200, 200}

int x1= 20, y1 = 20; //start point
int x2 = 200, y2 = 200; //end point

y = y1;
m = (y2-y1) / (x2-x1); //gradient
for (int x=x1; x<x2; x=x+1)
{
y = y +2;                             Of course, there are existing operations
point (x, y);                         to do this e.g.
}                                            background (0, 0, 0);
line (20, 20, 200, 200);
Direct vs Event-driven Mode
   If your program isn’t highly interactive e.g. simple image processing,
simply state your instructions step by step

   But processing allows to work in a simple event-driven mode,
similar to most windows programs.

   Event driven programs loop infinitely checking to see if some event
(e.g. user input) has occurred.

   The programmer provides a callback function, for each event
that he wishes to deal with. The system executes the callback
function when the relevant event occurs.
An Event Loop
User                                                redraw

mouseMoved

mousePressed

Windows System                       keyPressed

Event List
Operating System
Application
while (TRUE)
e = get_next_event();
switch (e)
case MOUSEPRESSED:
call registered mousePressed() function
case KEYPRESSED
call registered keyPressed() function
...
Interactive programs
   The setup () function is where you state operations you want
performed once when your program begins

   The draw () function gets called repetitively (unless you stop it)
   noloop() stops redrawing loop() restarts it

   Several mouse callbacks exist including mousePressed() ,
mouseReleased, mouseMoved(), mouseDragged() :
   Mouse positions are returned in mouseX, mouseY

   The keyPressed() function gets called when you press a key. You
can get the key pressed using the global variable keyPressed
   An image is an array of pixels, each of which has an RGB value.
   An Image file usually contains:
 Width and height of image
 An array of rgb values for individual pixels in the image

   In processing, PImage is a predefined data-structure for images
   It has the following attributes
 Pixels[ ] //array of pixels
 width
 height
   And the following functions
 get( x , y )
 set( x, y, color )
   These can also be applied to the window (framebuffer) which
behaves like an image
    Declare a new Image using the following code:
 PImage img;                         Instantiate a PImage object
called img.
    Other image related functions:
 img = LoadImage ( “picture.gif”);
memory.

   image (img, 0, 0);                       This draws the image with top-
left corner starting at {0, 0}.

   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
Iterate through an image

for (int i=0; i<im.width; i++)
for (int j=0; j<im.height; j++)
{
im.set (i,j, C ); // c is a color
}

   N.B. the drawing window itself can be considered an image (remove im in
the above code)
Simple bit-copy functions
   Simply juggling pixels around can achieve some useful effects e.g.
 Rotating an Image by 90 degrees
 set(x, y, img.get(y, x));      (repeat these for all pixels in the image)

 Mirroring an Image
 set(x, y, img.get(width-x, y));

 Flipping an Image
 set(x, y, img.get(x, height-y));

 Drawing an image twice as big
 set(x*2, y*2, img.get(x, y));

 set(x*2+1, y*2, img.get(x, y));

 set(x*2, y*2+1, img.get(x, y));

 set(x*2+1, y*2+1, img.get(x, y));
Processing Images
   We change an image by applying a Procedure to some or all of it’s
pixels.

   Examples:
 Greyscale the Image
 Clear Image
 Threshold Image
 Mirror the image
 Line Drawing
 Anti-aliasing
 Filters
 Colour

 Edge detect

 Blur/Smooth
Operations on pixels: greyscale
   An average or weighted average of
the RGB intensities
   Just make sure the final result has
values in the range from 255 to
255
   Unweighted
 cc = (R+G+B) / 3

   Weighting depends on the sensor
but usually green is given more
importance
 cc = 0.3*R + 0.59*G + 0.11*B

   In processing place the following
in the previous sample code:
 cc = color ( 0.3*red(c) +
0.59*green(c) +
0.11*blue(c) );
Negative image
   If 255 is full intensity then the
negative value of any intensity
c is 255 – c
 e.g. the opposite of “red”
(240, 0, 0) is (255-240,
255-0, 255-0) i.e. (15, 255,
255) cyan

   Code:
 cc = color ( 255-red(c),
255-green(c), 255-
blue(c) );
Thresholding
     Traditionally describes the operation of reducing an image to a 2
colour bitmap;
 All pixels less than a certain threshold level of brightness are
drawn as black. The rest are drawn white
     We can increase/decrease the threshold value to highlight areas of
bright contrast at the expense of variations in dark areas, or vice versa.
Output

Input

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.
Multiple Thresholding
   Alternatively we can set a number
of discrete limits and render with
a number of different shades e.g.
50, 100, 250, 200
   All intensities are rounded down
to the closest of these thresholds
   This has some useful applications
e.g. mosaic effects, colour depth
reduction

output

input
Thresholding code
   Simple thresholding
 float g = 0.3*red(c) + 0.59*green(c) + 0.11*blue(c) ;
 if (g>128)
 cc = color (255)

 Else
 cc = color (0)

   Levels
   float g = 0.3*red(c) + 0.59*green(c) + 0.11*blue(c) ;
   cc = color (0);
   if (g>50)
 cc = color (50);

   if (g>100)
 cc = color (100);

   if (g >150)
 cc = color (150);

   //etc. ..
Simple Gamma Correction
output

Linear
   Thresholding is similar to
gamma correction.                                                          Originally, input and
output values are the
same

   Gamma correction
increases/decreases the                                           input

intensities of colours smoothly
(no discrete threshold levels).
output

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

input
1. Original
brightness of a
sample pixel
Halftoning
   A method for simulating a
greater range of colours using
patterns of ink spots of varying
concentration.
   Originally used in print media.
   This works because our visual
system picks up localised
averaged intensities of colour.
Digital Halftones
   Simple half tone patterns replace
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/
   We can also apply a 3x3 pattern to support 9 different threshold values
Error Diffusion
   As we saw before, a pixel is
thresholded (by rounding
down its intensity to the
nearest threshold level)

   The difference in actual
intensity and threshold
intensity is the error in the
pixel.
 i.e. it is actually rendered
less bright than the original
 some brightness is lost in
the overall image

   To compensate for this error
we can distribute it over it’s
neighbouring pixels.
Error Diffusion
   Error = current pixel value
minus nearest threshold value

   Change the pixel values of
neighbouring pixels in the
original image before they are
processed.

   a = a + ( 7/16 ) x Error
   b = b + ( 3/16 ) x Error
   c = c + ( 5/16 ) x Error
   d = d + ( 1/16 ) x Error                        The image is drawn from left to
right so a common method is to
diffuse the error to the right and
below the current pixel.
Full code provided at: http://isg.cs.tcd.ie/dingliaj/Processing/errordiffuse/
Comparision with halftoning: http://isg.cs.tcd.ie/dingliaj/Processing/diffusion/
Dithering Patterns
   A more elegant way of
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.
Mosaics         Threshold values can be used to select patterns,
or even other images to replace small areas of
the original image.

http://isg.cs.tcd.ie/dingliaj/Processing/mosaic/
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

-1
-1   -1   -1
-1   4    -1
-1   8    -1
-1
-1   -1   -1

http://isg.cs.tcd.ie/dingliaj/Processing/laplac/
Original image
showing threshold
levels

Filtered image, note
the high numbers in
the strong edge pixels
Linear Smoothing
   Uniform Filter For each pixel {x, y}, look at
“nearby” pixels in a certain radius and average the
values.

Rectangular           Circular

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

Pyramidal                Cone

http://isg.cs.tcd.ie/dingliaj/Processing/smooth/
Kuwuhara
   The Kuwuhara filter performs an edge preserving smooth
   For each pixel {x,y}, look at immediate adjacent regions
 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}

http://isg.cs.tcd.ie/dingliaj/Processing/Kuwuhara/
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)*a + a*b
 Different values of the variable a will increase the emphasis on
imageA or imageB

   We can do a smooth fade from imageA to imageB by gradually
increasing a

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

```
DOCUMENT INFO
Shared By:
Categories:
Stats:
 views: 8 posted: 1/26/2011 language: English pages: 36
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/