The Display – Pixel Art, Basics

LOFI Robot - emoji

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

Despite the progress of display technology, pixel art is having a comeback on a wave of sentiment for the past.

The display from your CODEBOX Tv is perfect for displaying pixel art – it has only sixty four pixels to make something cool. 🙂

Connecting electronic modules

  • Display → OUTPUT 3.
  • Power → USB cable → computer.

The code

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

LOFI_Robot_TV_blocks (4)

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 eight lines and eight columns, but according to programming good practices, their numbering begins with 0, so the first row is row 0 and the eighth row is actually row 7.

Example 1: rectangle

wyświetlacz prostokąt codebox tv

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

LOFI_Robot_Pixel_Art1 (2)

Example 3: invader

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

LOFI_Robot_Pixel_Art1 (1)

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.

kosmici pixel art