3. Image Types and Formats

There are two classifications of computer graphics according to how the image is formed. (1) Raster graphics or bitmaps define images pixel-by-pixel, (2) and Vector graphics that store images as paths or mathematical relations of points. Most font formats are stored as vectors to retain optimum resolution at various sizes. These images are then easily converted to bitmaps.

Lately I've been fascinated by these open-source graphics softwares - GIMP, Inkscape and Blender. GIMP is a raster graphics software similar to PhotoShop. Everyone in class is familiar with it when we used it an optics class last year. Inkscape on the other-hand is a vector graphics software. Best used with a tablet, Inkscape creations can be easily resized to whatever resolution (dpi) or dimension (pixel dimensions). Images are stored in Scalable Vector Graphics Format (.svg).

Blender differs from these two as a 3-D graphics and animation software. Objects are created using vectors and can be texturized by raster graphics. Last year's Software Freedom Day boasted a talk on Blender by no one else than the young artist of Pinoy Blender Users' Group (PBUG). They use GIMP to create textures. Blender conforms these flat, two-dimensional images along the contour of 3D objects. A GIMP enthusiast also shared how contributors can custom-code a request for special filters or effects (posted up for the public in .py files).

The prospect of coding my own filter and effects is something I look forward to as the lessons in this course progress. But before we proceed to the meaty codes ahead, here is a review of different image types and formats.According to the color or how color is mapped, digitized images can be categorized into 4 basic categories.

Basic Image Types

Binary Images, each pixel is either a black or a white and is represented by ones and zeros.

Binary Image courtesy of NASA
http://idlastro.gsfc.nasa.gov/idl_html_help/images/imgdisp01.gif

Size: 362x362

File Size: 5135
Format: GIF
Depth: 8
Storage Type: Indexed
Number of Colors: 256
Resolution Unit: centimeter
XResolution: 72
YResolution: 72

Grayscale images, each pixel has a value between white (255) and black (0). Color is limited to graytones. The following image is taken from NASA

Grayscale Image courtesy of NASA
http://idlastro.gsfc.nasa.gov/idl_html_help/images/imgdisp02.gif

Size: 248x248
File Size: 10369
Format: GIFDepth: 8
Storage Type: Indexed
Number of Colors: 8
XResolution: 72.0
YResolution: 72.0

Truecolor images, the image is composed of channels in red, green and blue. The color of each pixel is determined by the superposition of each channel. The following jaguar fur is a sample of a trucolor image. Note on the image information that the number of colors is zero. Given that this is a truecolor image, it does not store an index of colors, hence the zero number of colors indicated.

Truecolor Image of jaguar fur
courtesy of National Geographic

Size: 1280x1024
File Size: 357929
Format: JPEG
Depth: 8
Storage Type: Truecolor
Number of Colors: 0
XResolution: 100.0
YResolution: 100.0

Indexed Images differ from truecolor in that color information is compressed into a single index of colors. This allows compression of an image to a smaller file size.

indexed image

http://upload.wikimedia.org/wikipedia/en/7/7c/Adaptative_8bits_palette_sample_image.png

Size: 150x200

File Size: 25575
Format: PNG
Depth: 8
Storage Type: Indexed
Number of Colors: 256
XResolution: 72
YResolution: 72

Advanced Image Types
With the expansion of imaging to fields like medicine and astronomy, advanced image types have surfaced. Here are some examples of advanced image types.

Multispectral images scan every pixel at different bands. For the Landsat, topographical images are taken up to 7 bands (3 for RGB and 4 for various IR bands). Information can be used for coastal area mapping, differentiating vegetation and snows from clouds among other meteorological applications. Hyperspectral images on the other hand take images from IR to visible and UV. One can imagine having the spectra of each pixel.

Southeastern Indonesia
Taken by Landsat

Hyperspectral cube, plane seen here is the visible spectra information, the sides of the cube are the edges of images taken in UV and IR bands. Photo taken by NASA

Image taken by setting up a virtual camera and lighting to take a picture of a 3D old man
Blender rendered by Kamil Mikawski

File Formats
Various image types differ on the kind of information stored recording images. These information can be stored or compressed in various file formats. Wikipedia gives a rundown of standard file formats. It surprised me that wiki documented 233 different file formats in existence. Formats like EMF (enhanced metafile) and SGB are supported only by Microsoft and Sun Microsystems respectively for their own software. There are also patented formats (HD Photo by Microsoft), and those created for Mars Rovers (ICER).

The most common image formats however, are TIF, BMP, GIF, PNG and JPEG.

BMP (bitmap) - 1 to 32-bit color depth/ supports transparencies and indexed color

GIF (Graphics Interchange Format) - 1 to 8-bit color depth/ support indexed color, transparencies, layers and animation/

JPEG (Joint Photographic Experts Group) - 8, 12, 24-bit color depth

PNG (Portable Network Graphics) - 1, 2, 4, 8, 16, 24, 32, 48, 64-bit color depth/ supports transparencies and indexed color

TIFF (Tagged Image File Format) - 1, 2, 4, 8, 16, 24, 32-bit color depth/ supports indexed color, transparencies and layers

Color depth refers to the representation of each pixel in bits.

Compression of these formats can either be lossy or lossless. In lossless, the original can be reconstructed from the compression. PNG and GIF use lossless compression while TIFF and JPEG can use lossy compression. This is also the same for other file formats.

Grayscale images, treshold and conversion
RGB images are easily converted to grayscale with scilab's SIP toolbox functions im2gray and gray_imread.

Last week, I tried using Inkscape to practice making pixel art, an art form making it's comeback from the 80s. Here is a sample of three spaceship/hearts in different colors. Using the following code, the image was read and converted to grayscale,

Img = gray_imread('5.jpg');
histplot([0:0.05:1.0], Img)
imwrite(Img, 'C:\Users\regaladys\Desktop\5_gray.jpg');

Truecolor and grayscale conversion done with Scilab

A histogram then displays the distribution of the pixels over different graylevels (Probability Distribution Function or PDF). Those at the 0 end are the darker pixels and a level of 1.0 means the pixel is white. Graylevel values are from 0 to 255 and is normalized by the histplot function.

Graytones of the converted pixel art image

The histogram is useful in determining the threshold level for binary conversion. Values over the threshold level are converted to white and lower values are converted to black. Adjusting the treshold level can remove a lighter background or unwanted elements in the image.
The PDF information of the pixelships shows pixel concentrations at 1.0 and three other gray-levels. Binary conversion at different threshold values can remove one of the pixelships. Binary conversion of a grayscale is executed in a line of code.

Img=im2bw('5_gray.jpg', 0.8);
imwrite(Img, 'C:\Users\regaladys\Desktop\5_black1.jpg');

threshold at 0.8

threshold at 0.6



threshold at 0.45

Another example is Nat Geo's jaguar fur wallpaper. With a more diverse range of shades and hues, the PDF of this image is more spread. In binary conversion of the image, I wanted to isolate the jaguar's spots. This requires a threshold of around 0.25.

Jaguar fur in truecolor, grayscale and binary conversions using Scilab

During conversion, image dimensions (matrix size) were not changed. But with lower amounts of color information, file sizes decrease after grayscale and binary conversion (312 KB for the truecolor image, 39.6 KB and 54.3 KB for the grayscale and binary conversions).

Binary conversion is also useful in cleaning up grayscale text scans. Here is Activity 1's plot taken from an old journal and the clean-up by binary conversion.

Scanned scientific plot from an old journal



Binary version of the scanned plot removes the unwanted background color

For this activity I give myself a 9/10. Most of the difficulty in the activity was encountered during the image conversion. Also writing and editing take up more time than the actual research. This blog though is an exercise to write the next blog entries more efficiently. It was fun creating the entries but it can also become a form of distraction from coursework. Making these entries are so addicting. hehehe.

On the more technical side, one must remember to increase stacksize and use images with smaller dimensions.

I would like to thank wifi hotspots, Mushroomburger and McDonalds in Katipunan that housed me for several nights to complete the activities.

References
Scilab 4.1.2 Documentation
M. Soriano. A3 - Image Types and Formats. NIP, University of the Philippines. 2010.
Remote Sensing Tutorial. NASA. http://rst.gsfc.nasa.gov/
Geoscience Australia. http://www.ga.gov.au/
www.blender.org
www.wikipedia.com

2. Scilab Basics

Scilab makes matrix multiplications very simple. The syntax is very much like the math. With matrices, synthetic images can be generated. A matrix of 1's and 0's form a black and white image (any binary set of values would do). Using more than two values will generate gray-scaled images.

In this activity, basic images were generated from Scilab matrices. I started from the code provided in class. This generates a circular aperture. I changed the number of elements (100 to 200) to improve the resolution of the image. The range was also increased to generate a larger image. This can be used as a mask for a matrix simulation of a light source.

All of the images generated are derived from this code.

[1] nx = 200; ny = 200; //defines the number of elements along x and y
[2] x = linspace(-2,2,nx); //defines the range [3] y = linspace(-2,2,ny);
[4] [X,Y] = ndgrid(x,y); //creates two 2-D arrays of x and y coordinates
[5] r= sqrt(X.^2 + Y.^2); //note element-per-element squaring of X and Y
[6] A = zeros (nx,ny);

[7] A (find(r<0.7) =1;

circular aperture

A small modification of the code will generate a square aperture and an annulus. The white areas represented by 1's. Changing lines [5], [6] and [7] to the following will yield the square and annular apertures.

To generate a square aperture
change [5],[6],[7] to A(find(abs(Y)<1>0.5)) = 1;

To generate an annulus
A(find(r<1>0.5)) = 1;

a square apperture and an annulus

One can use the circular aperture with a simulated light source. Assuming that the beam's distribution is Gaussian, we simply multiply the matrix of the aperture and that of the Gaussian source.

we simply add the following lines of code, omitting [8]
G = exp(-2*X.^2 - 2*Y.^2); //gaussian fxnB = G.*A;
imshow(G,[]);
imshow(B,[]);

Gaussian beam and beam with circular apperture

Gratings can also be made by modifying the square aperture. Vertical gratings were made with the following conditions,

n=.20
A(find(abs(Y)>n & abs(Y)n+.80 & abs(Y)n+1.60 & abs(Y)<2))>

vertical gratings generated by imposing conditions on A along the x-axis

Trying out a sinusoid along the x-axis will generate this image.

Image of a sinusoid along the x-axis

This is generated by changing the conditions of the square aperture

A= sin(X*10);// apply sine function
A = A/max(A); //normalization
imshow(abs (A), []); //avoid negative values

For this exercise, I give myself a score of 9/10. The objectives of the activity are all in here. Minus one point for being late.

Thanks to Theiszm for the Scilab tips. Throughout the duration of the past week I have been (1) attempting to link SIP and then SIVP to Scilab 5 and (2) install SIP and SIVP from binary files to on my Linux. The binary installation took me into the trail of OpenCV and Cmake, very foreign installation requirements for me. I then gave up and took on Ma'am Jing's advise to use Scilab 4.1.2 and SIP. The linking trick sure works. For the later versions of Scilab, the problem seems to be that it can't find the file libsip.dll. I hope the SIP and SIVP link will workout in the later versions.

1. digital scanning: of french curves and the non-existence of automated data acquisition

Before the advent of Excel, MATLAB, Python, LabView and the whole arsenal of scientific computing software at our disposal, our predecessors plotted their data manually on paper and smoothing was done with the almighty french curves.

Applied Physics 186 or Instrumentation 2 is a course on Digital Image Processing. For our first activity, we searched for old hand drawn plots of scientific data. The aim of the activity is to reproduce the plot using a spreadsheet software.

Figure 1 is a plot of Butyl rubber's continuous and intermittent stress relaxation at 130 Centigrade and 50% elongation. The y-axis is the ratio of stretched and unstretched length. The x-axis is time in hours. For this activity, the plot of interest is the continuous stress relaxation (Fig. 2).

Figure 1. Hand-drawn plot of Butyl rubber's stress relaxation

Figure 2. Original plot was cleaned using MS Paint to display only the plot of continuous stress relaxation

To reproduce this plot, the numerical values of each data point was determined. As a digital image, the pixel location of each data point can be easily obtained. I used Inkscape, a vector graphics program, to determine each pixel location.

To convert each data point to numerical values, one must determine the conversion factor for the x and y axes.

conversion factor (CF) = (Nmax-Nmin)/(Pmax-Pmin)

For the y-axis,

CF = (10-0)(340.39-109.24)

where 340.39 and 109.24 are the pixel locations corresponding to 10 and 0 along the y-axis. The same procedure is done for the x-axis.

The numerical value for a data point is simply,

N = CF x (P-Pmin)

Armed with the numerical value of each data point, a reproduction of the original plot can be easily generated using the OpenOffice Calc and applying cubic spline smoothing.

Figure 3. Original plot and reproduction. Both axes are retained to ensure that the plots are properly scaled

The superposition of the reproduction and original was easily generated with David's tip from Dr. Soriano's blog. Thanks to Dr. Soriano for the advice and the CS Lib staff for allowing me to use the journals without finishing my registration.

I give myself a 10 in this activity. I finished it on time and I like the final plot. Conversion was successful, with small deviations that can be from the image being skewed when it was photocopied or scanned. Some difficulty was encountered during the superposition of the reconstruction with the original data. One must remember to restart their OpenOffice Calc after uploading the original image as bitmap area fill.

References:

1. M. D. Stern and A. V. Tobolsky. Stress-Time-Temperature Relations in Polysulfide Rubbers. Journal of Chemical Physics. Vol. 14, No. 2. 1946.
2. E. David. Inserting Images as Background for OpenOffice Calc Graphs. 2008.