This small demo allows the user to play with creating simple, 2-bit graphics. With 2 bits (each one having both an on and an off state), you get 4 distinct values:
Using the application
Clicking on any of the pixels will rotate through the four colors. Clicking on any one of the swatches (in the upper right) will allow the user to change the color by using the three color sliders. There are also buttons (in the lower right) to enable/disable the grid.
Have fun, and (for the students in my introduction to computer graphics class) be sure to take screenshots of your creation and post them in the discussion board.
Some theory/ background
OFF OFF or 00 (in binary) or 0 (in decimal)
OFF ON or 01 (in binary) or 1 (in decimal)
ON OFF or 10 (in binary) or 2 (in decimal)
ON ON or 11 (in binary) or 3 (in decimal)
In this application, you can use any colors you want, but only 4 at a time. In a real application, the four colors would have to be saved separately with 3 bytes for each color (one byte each for red, green, and blue).
Each pixel (in this case, 15x15), however would only require 2 bits (to identify which of the four colors it should use). That gives us 4 pixels per byte. So, 15x15 pixels produces 225 pixels alltogether, which fits comfortably into 57 bytes. Adding in the 12 bytes for the four colors produces 69 bytes alltogether for the image (or 0.67K).
So that's a small file for a small image. But if each pixel stored its color directly, 3 bytes would be required for each pixel. So instead of getting 4 pixels per byte, we end up with 1/3 of a pixel per byte. So, we end up with 15x15x3 bytes, or 675 bytes- roughly 10 times the amount of storage. As the image gets larger, the space savings are even more significant.
The GIF format works in just such a way to reduce file size.