Pixel Art is a very popular graphics technique referring to 80s and 90s low-resolution computer screens. Pixels in those displays we so big, you could see them with a naked eye, and because of that everything displayed on them had that distinct “blocky” appearance.

Despite the progress of display technology, pixel art is having a comeback on a wave of sentiment for the “old days”.

The display from your CODEBOX Tv is perfect for displaying that good old pixel art. It’s 8×8 pixels, which means we have “only” 64 pixels to make something cool, and that’s just right when you’re coding one pixel at a time. 🙂

Have fun!

Programming

The basic block that we will be using is the TV: RECTANGLE.

It allows us to “color” pixels in the scope of coordinates X and Y and defined height and width. If we don’t define the rectangle’s color, it displays in white color (R:100, G:100, B:100).

Note that the display has 8 lines and 8 columns, but according to programming good practices, their numbering begins with 0, so the first row is row 0 and the eight row is actually row 7. You’ll get used to it. 😉

Example 1: rectangle

Notice. If you change the parameters during the program’s work, the display will start to blur. This is because the consequent images are displayed one on top of the other. To clear the display either restart the program or add the CLEAR DISPLAY block at the beginning of the loop.

The RECTANGLE block is our “building block” for drawing on the display. More complex images will be built using sequences of that basic block. Now, let’s try drawing something more interesting.

Example 2: emoticon

Example 3: invader

Characters from a classic game called SPACE INVADERS are perfect material for this coding excercise.

In the picture below you can find some more examples of the invaders. Try coding some of them, and in the next lesson, we will introduce some color to our graphics.