Images

Dr Andy Evans

Images

Images are stored in java.awt.Image objects.
Read them from files using a Toolkit
- See "Key Ideas" page.
Make them yourself
- These slides.

Images

Main way of making them from scratch is with a java.awt.image.MemoryImageSource object.
A MemoryImageSource object takes in an int[] array and turns it into an image in memory:

	
MemoryImageSource(int width, int height, 
  int[] pixel, int arrayStart, int scanLineWidth)

Making Images from data

We can create the pixel array ourselves. Pixels are made up of RGBA data. Again, each is 0 to 255.
The array is 1D as this is more efficient to dynamically process.
However, why is it just one array, not four?
With a bit of clever computing, we can squeeze all four RGBA values into one super-efficient array.

Packed ints

If we take four int values of up to 255:

	
00000000 00000000 00000000 00000001 = int 1
00000000 00000000 00000000 11111111 = int 255
00000000 00000000 00000000 01111111 = int 127
00000000 00000000 00000000 11111111 = int 255

The lefthand three bytes are wasted.
What we really need to do is this:


00000001                            = int 1
00000000 11111111                   = int 255
00000000 00000000 01111111          = int 127
00000000 00000000 00000000 11111111 = int 255
Joined together = compressed weirdness:
00000001 11111111 01111111 11111111

Making pixels: the hard way

So that's what we do.
You can do this very efficiently, using a series of 'bitwise' operators Java has for interacting with bits.
This is about as much fun as being continually kicked in the groin by a battery of mules.

These four values are squeezed into a single int number. The way this is done is slightly complex, but is basically the following: You will remember that computers ultimately represent everything in binary (ones and zeros). Numbers are represented in exactly this way, so, for example, the numbers 0, 1, 2, 3, 4 are 0, 1, 10, 11, 100 in binary. The number 255 is 11111111. You can find out more at: http://www.webopedia.com/TERM/b/binary.html Each one or zero is called a bit. Eight bits make a byte. 255 therefore is the maximum number you can store in a byte. The int variable type can hold numbers between �2147483647. This is because each int uses 32 ones or zeros. One of these is usually reserved to denote positive or negative, and if you fill the others with 31 ones you get the number 2147483647. However, you can see that the 32 bits (four bytes) used to store an int could actually be used to store four numbers between 0 and 255. This would be a nice compressed format, as with one int we could store four numbers. This is how int storage of pixels works. The four int values, which can only be up to 255 each are stored in a single packed int, therefore reducing the space we need. So, a completely un-transparent pixel with a red value of zero, a green value of 255 and a blue value of zero (i.e. a green pixel) would look like this in memory: 11111111 00000000 11111111 00000000. So how do we set up such packed ints? Well, there are Java operators (<<, >>, & and |) which can be used to manipulate binary data directly. However, direct binary manipulation is about as much fun as being continually kicked in the groin by a battery of mules. Code to do this, and an explanation of what is happening is on your sheet. There are easier ways to achieve the same goal using the java.awt.Color Class.

Making pixels: the easy way

The Color class has methods to help change 0 -> 255 r, g, and b values into a packed int:
```
Color color = new Color(r,g,b);
int packedInt = color.getRGB();	
```
You can also make a Color object using a compressed int:
```
	
Color color = new Color(packedInt);
```

	
int width = 16;
int height = 16;
int[] pixels = new int[width * height];

for (int h = 0; h < height; h++) {

    for (int w = 0; w < width; w++) {

		int value = 0;
		Color pixel = new Color(value,value,value);

		pixels[(h*width) + w] = pixel.getRGB();

    }

}

	
int width = 16;
int height = 16;
int[] pixels = new int[width * height];

for (int h = 0; h < height; h++) {

    for (int w = 0; w < width; w++) {

		int value = (w * h > 255) ? 255 : w * h;
		Color pixel = new Color(value,value,value);

		pixels[(h*width) + w] = pixel.getRGB();

    }

}

	
int width = 16;
int height = 16;
int[] pixels = new int[width * height];

for (int h = 0; h < height; h++) {

    for (int w = 0; w < width; w++) {

		int value = data[h][w];
		Color pixel = new Color(value,value,value);

		pixels[(h*width) + w] = pixel.getRGB();

    }

}

Must re-range our data between 0 and 255 if below or above this.

Using MemoryImageSource

With the array of pixels we can build the java.awt.image.MemoryImageSource.
Encapsulates an image in the computer's memory.
Computers can have multiple output devices on which an image is displayed, so this doesn't represent a displayed image. To do this, we need to use a Component to convert it. They know about the display.
```
	
MemoryImageSource memImage = 
      new MemoryImageSource(16,16,pixels,0,16);
Panel panel = new Panel();
Image image = panel.createImage(memImage);
```
We'll see how to draw the image in a bit.

Once we have our array of pixels in a compressed format, we can build the MemoryImageSource. This then encapsulates an image in the computer's memory. This is very different from actually displaying a java.awt.Image. Why? Well, it's because computers can have multiple output devices on which an image is displayed. The simplest example is to look at the difference between displaying an image on a screen and displaying it on a printer. However, there are much more subtle examples. For instance, the same program might be set up to run on a PC and a mobile phone. The MemoryImageSource Object encapsulates the Image in such a way that it doesn't matter how it will ultimately be displayed � it is completely separated from any notion of the GUI. Instead, it is GUI Components that know about the display mechanisms. These are the things that will convert the MemoryImageSource to a real, displayed, Image. To do this, we use a Component's createImage Method to make a proper, displayable Image. Here�s an example that continues from our previous one: MemoryImageSource memImage = new MemoryImageSource(16,16,pixels,0,16); Panel panel = new Panel(); Image image = panel.createImage(memImage);

Sequence

Get an image array.
Create a MemoryImageSource object.
Create an Image object.

Making Images:
PixelGrabbers

If we have an Image and we want the pixels, we can use a java.awt.image.PixelGrabber.
The PixelGrabber object does the exact opposite of MemoryImageSource.

	
PixelGrabber(Image img, int left, int top, 
  int width, int height, int [] pixels, 
  int startArray, int scanLineWidth)

	
int pixels[] = new int [100];
PixelGrabber pg = 
  new PixelGrabber(image,0,0, 16,16, pixels,0,16);
pg.grabPixels();

Putting it all together

We now have all the methods we need to build a small image processor:

First we get an image.
Then we use a pixelGrabber to pull the pixels into an array.
We then expand the pixels into their alpha, red, green and blue values.
We manipulate the values - for example filtering the data.

Putting it all together

We then recode the values into the int array.
We use a MemoryImageSource to put the pixels back in an Image.
We draw the image on the screen.
We then run to the pub and drink ourselves unconscious to celebrate being geek gods/goddesses unfettered by the mere trifling difficulties of everyday human beings.

Images

Dr Andy Evans

Images

Images

Making Images from data

Packed ints

Making pixels: the hard way

Making pixels: the easy way

Using MemoryImageSource

Sequence

Making Images:PixelGrabbers

Putting it all together

Putting it all together

Making Images:
PixelGrabbers