(Redirected from Bitmap)
For more information, see Raster Graphics on Wikipedia.
Raster graphics, also called bitmap graphics or pixel 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 (RGB - red, green, and blue) and a transparency factor).
Usage in Scratch
In Scratch 1.4, and all previous versions, raster graphics were exclusively used. The Scratch 2.0 and 3.0 Paint Editors support both raster and vector graphics, though many features of the Scratch 2.0 and 3.0 user interfaces, notably the blocks, use vector graphics unlike Scratch 1.4's graphics.
Bitmap was the default mode when the user opened the costume editor in Scratch 2.0. However, the default editor is Vector in Scratch 3.0.
Contrary to what many people think (due to its name),[citation needed] Scratch uses the PNG format for bitmap graphics instead of BMP.
Differences Between Versions
As of the release of Scratch 3.0, some features have been changed between Scratch 2.0 and 3.0:
- In Scratch 3.0, the bitmap palette no longer exists. It has been replaced by a slider at the top of the editor in which you change the color, the saturation, and grayscale.
- In Scratch 2.0, one could center a costume with a button, selecting the new center with the mouse-pointer, but in Scratch 3.0, the center button was removed. Costume centering had to be done by selecting and moving an entire costume, before an automatic centering feature was implemented on February 13th, 2020. In an announcement forum, ceebee states,
| “ | ... You can now align your artwork to the canvas center more precisely. You can do this by clicking your artwork and dragging it towards the center crosshair symbol. The paint editor will automatically align your artwork when your artwork gets close to the canvas center. | ” |
– ceebee, [1] | ||
Because of the inconveniencies, not all users agreed with those updates and have suggested to bring back some features.[2]
File Types
File types 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-color images). This works by instead of storing something like "255, 255, 255, 255", the system would store it as 4"255".
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:
Magnified 20 times:
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:
Magnified 20 times:
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:
Magnified 40 times:
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.
See Also
- Pixels
- Paint Editor
- Vector Graphics
- Raster graphics on Wikipedia
