Raster Graphics

Raster graphics, also called bitmap graphics, are graphics stored and rendered as arrays of pixels. Though this method of storage is simpler, it is slower with large images since many pixels need to be stored. For example, the Scratch Stage stored as a raster image would be 360*480=172800 pixels, and each pixel has 4 integers associated with it (corresponding to three colors and a transparency factor).

Use in Scratch

In Scratch 1.4, and all previous versions, raster graphics were exclusively used. The Scratch 2.0 Paint Editor supports both raster and vector graphics, though many features of the Scratch 2.0 user interface, notably the blocks, use vector graphics unlike Scratch 1.4's.

File Types

Filetypes that store raster images fall under one of three categories: uncompressed, lossy compressed (visual data is lost with compression), and lossless compressed (image is compressed, but no visual data changes). The first category includes BMP and some types of TIFF and it stores image data without any compression at all. JPEG and some types of TIFF are examples of lossy compression, which causes visible artifacts especially in simple images. Lossless compression makes a file look the same as its uncompressed counterpart but with a smaller filesize, and examples include some types of TIFF, PNG, and GIF (for 256-colour images).

Netpbm File Format

Netpbm is an uncompressed image file format similar to BMP. It was originally invented in the 1980s by Jef Poskanzer so that images could survive changes to ASCII text in an email message. Images in general, including the ones Scratch support, share similarities.

Example 1

Here is an example image and its code:

Netpbm Example1.png
Magnified 20 times:
Netpbm Example1.png

P1
# This is an example bitmap of the letter "K"
# The 6 and 10 are the width and height of the image.
6 10
0 0 0 0 0 0
0 0 0 0 0 0
1 0 0 0 1 0
1 0 0 1 0 0
1 0 1 0 0 0
1 1 0 0 0 0
1 0 1 0 0 0
1 0 0 1 0 0
0 0 0 0 0 0
0 0 0 0 0 0

P1 specifies that the image will be solely black and white, and the 6 and 10 are the width and height of the image, respectively. The array of numbers after that is the array of pixels used in the image. Each array element always corresponds to a specific pixel. For example, an element in the top right corner of the array is the same pixel as the one in the top right corner of the image.

Also, since P1 means that the color depth is black&white, 1 stands for black, and 0 stands for white.

Example 2

Here is another example of an image:

Netpbm Example2.png
Magnified 20 times:
Netpbm Example2.png

P2
# An example of some art.
# This image is 6 pixels wide and 10 pixels tall.
# The color depth goes from 0 to 15.
6 10
15
0  0  0  0  0  0
0  3  0  0  3  0
0  0  3  3  0  0
0  0  3  3  0  0
0  0  0  0  0  0
3  3  3  3  3  0
6  6  6  6  3  0
9  9  9  6  3  0
12 12 9  6  3  0
15 12 9  6  3  0

For the most part, the top of the image file is formatted the same way as in Example 1. P2 constitutes that the image will be graymap, meaning that it will be made of black, white, and grey pixels. The 6 and 10 are once again the width and height of the image. The one major change though is the addition of the 15. This specifies that the color depth of the image ranges from 0 to 15, with 15 being black, and 0 being white. Values closer to 0 will be lighter, and values closer to 15 will be darker.

Example 3

Here is a final example:

Netpbm Example3.png
Magnified 40 times:
Netpbm Example3.png

P3
# The P3 means colors are stored in pixmap.
# The image is 3 pixels wide and 2 pixels high.
# The color depth is 255.
3 2
255
0    0    0        255  0    0        0    255  0
0    255  255      255  255  0        255  255  255

This image is again close to the same as Example 2, but each pixel is now represented by three numbers. The first number is the amount of red in the pixel, the second number is the amount of green, and the third is the amount of blue. The color depth works exactly like it did in example 2, though now it is the cap for three numbers. For example, if a color depth of 10 is used, then 10 0 0 would become red.

Other than that, the P3 means that the image is pixmap, or in other words, stored with colors. The 3 and 2 specify the size of the image, the 255 specifies the color depth, and the image's pixels are stored right after that.

Magic Numbers

As it is formerly called, P1 is a magic number. Magic numbers are what tell the computer what types of colors will be used, and what type of encoding is used for the image. P1, P2 and P3 specify that a Netpbm image will be encoded in ASCII. On the other hand, P4, P5, and P6 are encoded in binary, but they mirror P1, P2, and P3 in format, respectively. In conclusion:

Magic Number Type Encoding
P1 Portable bitmap ASCII
P2 Portable graymap ASCII
P3 Portable pixmap ASCII
P4 Portable bitmap Binary
P5 Portable graymap Binary
P6 Portable pixmap Binary

See Also

  • This page was last modified on 11 August 2014, at 00:40.