Learning Center
Plans & pricing Sign in
Sign Out
Your Federal Quarterly Tax Payments are due April 15th Get Help Now >>



computer graphics and its applicationa

More Info
									                    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
    c = color ( 255, 0, 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;                                                             }

    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);

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

 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

Interactive programs                                                      Advanced Data: Images
                                                                           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

Loading and drawing images                                                                           Iterate through an image
   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:                                                                      {
      img = LoadImage ( “picture.gif”);                 Load the file picture.gif into
                                                        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
  For more info:

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));
 provide additional code that
 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

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
    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
    Line Drawing                                                                    cc = 0.3*R + 0.59*G + 0.11*B
    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) );

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

    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.

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)
 All intensities are rounded down
                                                                                                             cc = color (0)
 to the closest of these thresholds
 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. ..


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.

 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.

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

                                                   1. Original
                                                 brightness of a
                                                  sample pixel

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:

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:
                                                                                      Comparision with halftoning:

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.
                                             On the left the dither
                                             pattern is twice the width
                                             and height of the original
                                             Each original pixel is
                                             compared to a 2x2 block of
                                             pixels with the following

                                             If the original value is
                                             higher than the value in the
                                             dither pixel, then it is

                                                                        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

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

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


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

                           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
       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));
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;


To top