Bits

The numbers we commonly use are known as decimal numbers and are based on the number 10.  This system was devised because we have 10 fingers.  What do you think would have happened if we had only had eight fingers?

Our decimal numbers have place values calculated on powers of 10.  So the number 1537 really means 1 thousand, 5 hundreds, 3 tens and 7 units, or put another way:

11010101 = 1x128 + 1x64 + 0x32 + 1x16 + 0x8 + 1x4 + 0x2 + 1x1 = 213₁₀

So 11010101 in binary is equivalent to 213 in decimal and 11111111 is equivalent to 255.

Using 8 bits we can represent all the numbers from 0 to 255, which is 256 numbers in all. 

Pixels & Colours

Each colour component (sometimes called a channel ) in a pixel is typically represented with a single byte, eight bits.  Eight bits can represent 256 values (2 to the power of 8), which we typically use to represent the values 0 to 255. Each pixel, then, uses 24 bits to represent colours.  This is made up of 3 channels (Red Green Blue) with 8 bits per colour channel. 

There are computer models that use more bits per pixel. For example, there are 32 bit models which use the extra 8 bits to represent transparency, meaning how much of the colour “below” the given image should be blended with this colour. These additional 8 bits are sometimes called the alpha channel. There are other models that actually use more than 8 bits for the red, green, and blue channels, and while they do capture (encode) more colour information, it’s not really usable for most purposes.

JPEG files

For now we will work with images stored in Jpeg format.  JPEG is an international standard for how to store images with high quality but in little space.  JPEG is a lossy compression format. That means that it is compressed, made smaller, but not with 100% of the quality of the original format. Typically, though, what gets thrown away is stuff that you don’t see or don’t notice anyway.

RGB

A triplet of (255, 255, 255) (red, green, blue components) is black, and (0, 0, 0) is white.

(255, 0, 0) is pure red, but (100, 0, 0) is red, too—just less intense. (0, 100, 0) is a light green, and (0, 0, 100) is light blue.

When the red component is the same as the green and as the blue, the resultant colour is grey. (50, 50, 50) would be a fairly light gray, and (100, 100, 100) is darker.

Storage Space

Images on disk and even in computer memory are usually stored in some kind of compressed form. The amount of memory needed to represent every pixel of even small images is pretty large. A fairly small image of 320 pixels across by 240 pixels wide, with 24-bits per pixel, takes up almost 2 million bytes.

A computer monitor with 1024 pixels across and 768 pixels vertically with 32-bits per pixel takes up a whopping 25 megabytes.

Number of bytes needed to store pixels at various sizes and formats

  Each pixel of the image needs to have the 3 pieces of RGB information

We manipulate pictures in JES by making a picture object out of a JPEG file, then changing the pixels in that picture. We change the pixels by changing the colour associated with the pixel—by manipulating the red, green, and blue components.

Getting Information from a Picture File

getWidth(), getHeight() Pictures know their width and their height. You can query them with getWidth and getHeight  print getWidth(mypicture) will tell you the width of the image stored in the variable mypicture

getPixel() We can get any particular pixel from a picture using getPixel() with the picture, and the coordinates of the pixel desired. >>>pixel= getPixel(mypicture,1,1) >>>print pixel Pixel red=172 green=196 blue=224 tells you that the pixel at coordinates (1,1) of your image has RGB values of (172, 196, 224)

getPixels() We can also get all the pixels from a picture using getPixels() with the picture >>>pixels = getPixels(mypicture) >>>print pixels[0] Pixel red=172 green=196 blue=224 will store the information from all the pixels in an array (multi-cell storage location) named pixels.  It will then print the information from the first cell of the array.  Note that the first location is pixels[0], not pixels[1] as might be expected. Don't try to print out a list of all the pixels in your picture!  There will be too many, and JES will be likely to crash!

This page has been produced by Margaret Meijers.  Questions or feedback may be directed by email to mmeijers at ictmindtools.net

 
This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 2.5 License.
Attribution should include the statement: "This has been adapted from a resource originally created by Margaret Meijers at http://ictmindtools.net"