Black and White Pixelation Widget

October 31, 2018

Today we used the Black and White Pixelation Widget on code.org to create images. Each pixel was represented by 1 bit - "1" turned the light on, and "0" turned the light off. However, before encoding the pixels for creating the images, we had to state our dimensions using a string of 8 bits for each dimension of the image. This was called the metadata, and was necessary for rendering the image.

The editor looked like this:

We were instructed to recreate this image (without copying the code). It was not a difficult task, but on my first time I mixed up the height and the width. In the metadata, the width comes first and then the height. I think that coding the dimensions would be harder if you were just given an image, as you would have to count every pixel along the sides on the image.

We were then instructed to create our own image. Mine is as attached:

The code for this image is:

0001 0000

0001 0000

1111111111111111

1111000000001111

1110111111110111

1101111111111011

1101101111011011

1101111111111011

1101011111101011

1101100000011011

1110111111110111

1111000000001111

1111111011111111

1111111011101111

1111000000011111

1110111011111111

1111111011111111

1111111011111111

The only problem I had was orienting myself in the image while encoding it. Also, if I deleted a bit, the whole image would be off, and I'd get confused. Over time, the encoding would get pretty tedious.