Wednesday, July 20, 2016

Old School Graphics Lesson (Binary and Pixels)

I'm doing some programming and computer classes at a local library for kids and I'd had a cool idea from watching a video on how graphics worked on the Commodore and Nintendo. My intent is to teach the idea that computers use pixels to render objects and sort of define what that means. Also, we'll be looking at binary and it's relationship to pixels and data storage. This is for kids so we'll keep it as simple as possible.

First, an explanation of binary or base 2 numbers is required. We'll have a few places represented by square cards with powers of 2 written on them like so:
____ ___ ___ ____ ___ ____
| 32 | 16 |  8  |  4  |  2  |  1  |
----- ----- ----- ---- ----- -----

We can move these cards up and down to show what value is being represented. By counting the values of the numbers that are "down", we can figure out what the base 10 value would be. All cards up would equal 0 or 000000. The rightmost card down would equal 1 or 000001. The leftmost and ''8" cards down would be 40 or 101000. Once we establish the basic idea, we'll ask the student to make the day month and year of their birthday using binary.

Once we understand binary, we can draw a picture using the grid paper. We'll only use 1 of the 3 defined columns to keep it easy. By filling in a square, we're marking the binary value of that row as 1. So if you filled in the leftmost block only, the value would be 128. In this way, we can draw using the grid and then convert the values to binary, then to a numerical value that's 0-255. 

Once the student draws their picture using the grid, they can use this program that I wrote up to input their numerical values for each row. Once they fill in all the rows they'll the image they made on paper.

Hopefully this will provide them with an understanding of binary, how it can be used to store data on computers, and how early pixel graphics displays could work.