Images

This describes how images work.

Resizing or Scaling

The size of the image below is 260 pixels in the X (across the screen/width) direction and is 140 pixels in the Y (up and down/height) direction. Usually the width (X) is first, then the height (Y).
Sometimes this is shown as:

• 260 by 140
• 260 x 140

The x between the two numbers is different than the X meaning width. The size of the x is not consistent, so the place of the x is what is important for the meaning.
Notes:

• A "pixel" is a "picture element". It is a very small part of the picture. This is described more later.

It is possible to "scale" this image by changing the width. The width in this image was set to 500. Notice that the height didn't change.
Notes:

• The ratio between width and height is called "aspect ratio".
• The image looks a little fuzzier. This is because the original image is smaller and does not have many pixels.

Scaling can be performed using the following:

• HTML - <img src="../docs/images/1-pets.jpg" width=300> is actually scaling.
• Edit using Gimp
• Python
  • pygame - See pygame.transform.scale()
  • opencv - See cv2.resize()

Pixels

The following image is part of the original image above and shows 40 by 50 pixels.

Here is what the pixels look like if they are shown larger. So the pixels are the small squares. Televisions and phones have pixels, but they can be very small.

How many colors are in one pixel?

See Edit using Gimp for viewing and drawing on images.

In Gimp, open file "1-pets.jpg" and use View/Zoom and select something like 4:1 or 400% to see something like this image. The zoom feature does not change the image, it only changes the display.

Color

Colors for programming are created using light from 3 colors. The three colors are red, blue and green. Each color can be a different brightness.

There are many ways to represent the brightness in programs. The Inkscape program has a nice way to represent colors in their Fill and Stroke paint windows. The Gimp program has a window accessed from the Windows/Dockable Dialogs/Colors menu.

Hexidecimal

Some programs show their color using hexidecimal numbers. Here is how the first numbers relate.

Decimal	Hexidecimal
0	0
1	1
2	2
3	3
4	4
5	5
6	6
7	7
8	8
9	9
a	10
b	11
c	12
d	13
e	14
f	15
10	16
11	17
12	18

There is a formula to convert decimal to hexidecimal. Multiply the first character by 16, and add the second character.

decimal	Calculation	hexidecimal
46	(4 * 16) + 6	70
80	(8 * 16) + 0	128
c0	(c=12 * 16) + 0	192
ff	(f=15 * 16) + f=15	255

Both Windows and Linux have a calculator that can be set to programmer mode, and will convert between hex and decimal.

Color Combinations

Some examples of colors are shown here in hexadecimal. Note that the first two characters are ff, then the color is the brightest red. The higher the first two characters are, the more red there is.
When the last two characters are ff, then the color is the most intense blue.

Transparency

Many programs have what is called an alpha layer or opacity. This is used for images show the background in parts of the image. This is very important for animation, which is displaying different images to show movement.

The following image shows the background (white) behind the girl and bird.

The following image shows the background (blue) behind the girl and bird, but notices that the girl eye color is still white.

This means that parts of the image indicate how transparent it is by using an extra value (part of the color number).

Scenes

Many images can be placed in one rectangular area. The rectangular areas are often larger than the image sizes so that many images can fit into the area.

The following scene is 80 pixels by 50 pixels. In programming, counting starts at 0 instead of 1. So instead of:

• one, two, three = three positions

Use:

• zero, one, two = three positions

Notice that when counting to three starting from 0, the last number is 2.

The programs here all use position 0 X and 0 Y to mean the top left corner. So the green dot is at position (sometimes called coordinate) 0, 0. The red box is an image of size 4 x 3, and is at position 4, 11. The blue dot is at 79, 2. Notice again that starting counting at zero means that the last position is the size of the scene (80) minus 1 = 79.

To move the red image to the left, make the X position smaller, so moving to position 0, 11 would move all the way to the left side of the scene. Moving the X to 5, 6, 7, 8, 9, would move the red image smoothly to each point and look like the image was moving smoothly to all of the positions. Many of the game demos show this type of movement.