Chris Jordan G. Aliac M.C.S.

Research Coordinator
Intelligent Systems Lab.
Cebu Institute of Technology
 Topics
 Image Properties
Pixels/Color Property
Image Size
Loading an image
Saving an Image
 Topics
 Basic Image Manipulations
Basic Pixel Copy
GreyScaling
Color Inversion
 Analysis of Images
Histograms
 Image Contrasting
Equalization vs Brightness
 Topics
 Image POSE/SIZE
Flipping (horizontal/Vertical)
Rotation
Scaling
 Binary Operations on images
Thresholding
Image Subtraction
 Topic
 Dynamic Frames
WebCam Input
Application of Static Image process techniques
 Pointer Based Systems
Method vs Pointers
 Convolution Matrix
Definition
Calculation
 Topic
 Convolution Matrix Samples
Smooth
Gaussian Blur
Mean Removal
Sharpen
Emboss
 Edge Detection
Sobel
Prewitt
Kirsh
 What is Image Processing?

 Manipulation of the properties of images for the

following uses:
Analysis
Enhancement
Systems Application
Data Acquisition
 IMAGE
 “A picture Paints a Thousand words” (wrong)
 A picture is a million bytes…
 Collection of Colors arranged on vector locations
 A color in an image is a PIXEL (picture element)

COLOR = ALPHA + RED + GREEN + BLUE

Where: RED, GREEN, BLUE is a value between 0 – 255

A mixture of there components yield to a pixel color
Sample

0,0,0

255,255,255
MSPAINT
 RGB color space interior
planes

1,1,1 0,1,1 0,0,1 1,1,1

1,0,0 0,0,0 0,0,0 1,1,0

 Color Spaces
 RGB (Red, Green, Blue)
- used for screen displays (e.g. monitor)
 CMYK (Cyan, Magenta, Yellow, Black)
- used for printing
 HSI (Hue, Saturation, Intensity)
- used for manipulation of color components
 L*a*b*, L*u*v* (“perceptual” color spaces)
- distances in color space correspond
to distances in human color perception
Colored Light vs. Color Pigment

RGB color space

light

pigment

CMYK color space

Image Size
Image Width = Number of Columns = X
data on 2D space

Image Height =
Number of Rows =
Y data on 2D
space
Images Processing in C#
 C# is a programming language that is the main
flagship tool for .NET tech. (Microsoft)
 Environment feels like JAVA but looks like Visual
Basic.
 Contains Easy Managed Codes from the .NET
Framework
 Images on C#
 An image is represented as a Bitmap in C#
 Images are loaded as Bitmaps and placed to view
on a PictureBox
 Loading/Saving
 Loading images can be done by using the
instruction:

○ Image.FromImage(“filename);

 For Ease of File selection, use a Dialogs to get the

filename string.

(demo)
 Basic Image Manipulations
 Basic Copy
This is done by scanning all the pixels and copy each
pixel into another empty bitmap.
Taking color samples is done via “GetPixel()”
Placing colors to a specified vector location is done via
“SetPixel()”
Colors can also be manufactured by a Color class
method “Color.FromARGB(byte,byte,byte)”
 GrayScaling
 The Term GrayScaling is the convertion of colors
to different shades of gray.

 Misconception: GrayScaling is not called “BLACK

AND WHITE”
RGB Space Map
 GrayScale
 To obtain different shades of grey, the average of
the color properties must be done.

pixel = R = G = B =(R+G+B)/3

This must be done for all pixels in the image.

 Grayscale
 Converting an image to Grayscale form is
essential to faster analysis and computation
because the image data has been reduced in its
one dimensional form (1 byte)
 Color Inversion
 Our eyes accept light from dark spaces
 We see better colors with more light gathered by
our eyes
 Inversion is the opposite of this concept as light is
taken away by the color values.

pixel = 255-R , 255 - G, 255 – B

this is done for all pixels

 Analysis of Images
 An image must be converted into data that is easy
to analyze on the mathematical scale.
 Image must analyzed for further application of for
estimation for the correct enhancement of images
 The easiest way of doing this is by representing
an image into a 2D space where x is the degree of
image intensity and y as the magnitude of the
intensity
 This is called a HISTORGRAM
HISTOGRAM
HISTOGRAM
 HISTOGRAM
 Higher Magnitudes toward 255 level for light
colored images
 Higher Magnitudes toward 0 level for dark colored
images
 This is done scanning all pixels and counting all
the color of different levels
 Example
 Step 1 Convert the image to grayscale.
 Step 2 Use an array to count up pixels of same levels
 Step 3 Plot the values of the array on a bitmap graph

0 0 0 0 1 ….. 50 …. ….. ….. ….. …. 255

50 50 255
3 0 0 2 0 0 0 0 0 4

255 255 255

 Image Intensity
 Brightness
This Process is done by adding the magnitude for all
pixels by the same factor.
 Contrast
This is done by evenly distributing magnitude data over
the histogram (HISTOGRAM EQUALIZATION)
Brightness
Contrast
 See The Difference
 You Judge for Yourself
 What is the Difference between Brightness and
Contrast?
 Flipping
 Flipping: An image translation tool for creating
mirror images from the original image
This can be done in 2 ways:
○ Horizontal:
- taking pixels from original image at 0 to width-1 columns
- Placing each pixel taken to empty bitmap at width-1 to 0 columns
○ Vertical
- taking pixels from original image at 0 to height-1 rows
- Placing each pixel taken to empty bitmap at height-1 to 0 rows
 Rotation
 Using a rotation matrix will make the image rotate
at positive degrees (clockwise) or negative
degrees (counter-clockwise)

x` cos θ - sin θ x
y` sin θ cos θ y
0 0 1
x`= xcos θ + y(-sin θ )
y`=xsin θ +ysin θ
 Scaling
 An image of any size can be resized to any
desired width and height
Large to Small size: samples from original image will be
taken an placed on a smaller, empty bitmap.
Small to Large: samples from original image will be
taken an placed numerous times on a larger empty
bitmap.
xSource = xTarget * origwidth / targetWidth
ySource = yTarget * origheight / targetHeight
 example
 Large to small
1 2 3 4 1 3

5 6 7 8

9 10 11 12 9 11

13 14 15 16
 Example
 Small to large

1 2 1 1 2 2

1 1 2 2

3 4 3 3 4 4

3 3 4 4
 Binary Operations
 Thresholding: A method used to convert images to
extreme values 0 (black) 1 (white)
Useful for converting images from colored to this format
for old dot matrix printers
Good tool for determining objects of study without the
image noise
 Thresholding
 Step1 : convert the image to grayscale
 Step2 : compare the image grayscale data with a
limit value
If data is less than the limit = convert the pixel to black
Else , convert pixel to white
 Subtraction
 Image tool for comparing 2 images and detect
differences on them
For all pixels
○ result = |A(x,y)-B(x,y)|
where A and B are images taken with colors of the same location.
If result is > than limit sensitivity value then a pixel has
changed from its original image A
 Dynamic Processing
 You need to have a real time image acquisition
device
Camera
Video Stream
Video Clip
 Simple requirements
 In this case, we will be using a simple WEBCAM.
The camera must be properly installed with the
right manufactured drivers
 DLL
 A DLL or Direct Link Library is a system file that
references your newly installed hardware to the
operating system
 DLL’s communicate between the main application
program interface (device) and to the operating system
 The concept of communication is to send “message” to
system files DLL to and fro the application
 C# DLL
 C# can easily create DLL’s and can also easily
manipulate predefined and user defined DLL’s
using the dllimport instruction
 This makes C# the ideal tool for creating user
friendly applications that are powerful enough to
handle devices
 How to?
 I have already made two C# classes
Device.cs = a class that sends Messages to the DLL
DeviceManager.cs = functions/methods that manipulate
the Device.cs class
 Both these classes are of the same namespace
(WebCamLib)
 How to
 Device.cs class manipulates a certain DLL called
AVICAP.DLL
 The AVICAP.DLL is a system file that generically
manipulates any webcam devices installed onto
the computer.
 How to class functions
 Public void showWindow (object) = shows the
preview of the images on the camera
 Public void stop() = stops camera preview
 Public void sendMessage() = sends refresh data
instructions to the camera (devicehandle)
 How to class functions
 Public static Device[] getAllDevices() = gets all
available camera devices
 public static Device GetDevice(int deviceIndex) =
gets the current available device
 How to steps
 Upon loading, get all devices by calling the
getAllDevice() function
 Select the certain device and use the
showWindow() function
 Place the preview onto a picture box object in c#
 How to process images
 Images are processed via bitmap casting of the
image
 Once a bitmap is made out of an image, pixels are
analyzed for further enhancement and or
alteration
 How to
 IDataObject data;
 Image bmap;
 Device d = DeviceManager.GetDevice(listBox1.SelectedIndex);
 d.Sendmessage();
 data=Clipboard.GetDataObject();
 bmap = (Image)(data.GetData("System.Drawing.Bitmap",true));
 Bitmap b=new Bitmap(bmap);
 Pointer Based DIP
 A pointer is used to access address location of the
actual image and manipulate its RGB pixels
 This process is faster than the managed code
method
 Convolution Matrix
 Convolution matrix is used to manipulate pixels
and its neighboring pixels to a desired effect
 Normal convolution image is an 3x3 pixel matrix
compared to each 3x3 grid pixel
topleft topmid Topright
left pixel right
bottomleft bottommid bottomright

 COMPUTATION
∑[3x3][3x3matrix]/factor + offset value
 Convolution Matrix
Samples
 Smooth 1 1 1
1 Weight 1

1 1 1

 Gaussian Blur
1 1 1
2 Weight 2

1 2 1
 Mean Removal
-1 -1 -1
-1 Weight -1

-1 -1 -1

 Sharpen

0 0 0
-2 Weight -2

0 -2 0
 Emboss
-1 -1 -1
0 4 0

-1 0 -1
 Edge Detection
 Sobel
1 0 -1
2 0 -2

1 0 -1

 Prewitt
-1 0 1
-1 0 1

-1 0 1
 Edge Detection
 Kirsh
5 -3 -3
5 0 -3

5 -3 -3
 Others
 Explore other color Space Maps like HSL
 Avid C# programmers can use the color Matrix to
do color manipulations
 THANK YOU

chris.jordan.aliac@cit.edu