How to use colors and animations on The Display from CODEBOX Tv.

Connecting electronic modules

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

Where do colors on the screen come from?

The display in your CODEBOX Tv can show colors because each of its pixels has three diodes built in: red, green and blue. These various colors on the display come from mixing the proportions of light from the diodes. This is called the RGB (Red Green Blue) model. Contemporary TVs, smartphones, and tablets also work in this model.

In the RGB model, the default color is black which is done by just turning off the diodes. The display from CODEBOX Tv is not black, so we assume that black in our terms means diodes turned off.

Let’s see how other colors are made:

• Yellow is a combination of red and green.
• White is maximum brightness of all three components.
• Violet is a combination of red and blue.
• Aquamarine is a combination of green and blue.
• Black as we mentioned ealier is all three diods with set to 0 value.

How do we control colors on our display?

Our main block for managing colors on the display on the TV: COLOR block.

As you can see, its three parameters come from the RGB model: R is red, G is green, and B is blue.

Example 1: colorful emoticon

Note that the TV: COLOR block defines the color for each block coming after it until you set another TV: COLOR block with a new color. That is why we only needed one of these blocks to color both 4×4 rectangles on the top of the emoticon.

Example 2: elf

The second example uncovers the basic flaw of drawing with code – it takes a lot of coding to create more complex images. Good thing we have graphics programs nowadays. 😉

Nevertheless, this type of drawing is a great logical and mathematical puzzle. If you want to have some more fun with that, just look for 8×8 pixel art in google graphics.

Example 3: colors of the rainbow

So when drawing with code makes sense? For example when you want to create a visual effect or an interactive animation. See how you can combine signals from a robot’s sensors with objects displayed on the screen. In this example, we’ll use the potentiometer to manipulate the color of the displayed rectangle.

This time we’ve used the TV: RAINBOW COLOR block to define the color. This block allows us to define any hue with just one number, and thanks to this we can easily create animated color transitions, similar to colors of the rainbow. Note that the limitation of this method is that it doesn’t allow us to manage the display’s brightness.

Example 4: confetti

In this example, we’ll use random numbers to introduce some “commotion” to our animations. Let’s program our display to light a random pixel with a random color with every execution of the loop.

At the beginning of the loop, the display is cleared by the CLEAR DISPLAY block. Let’s see what happens when we turn this block off – right click that block and click the DISABLE BLOCK option.

This time the pixels aren’t turned off with every execution of the loop. Thanks to this we get this interesting building up effect that looks like confetti.

Note that this program is quite simple – it’s just a few blocks, and the end effect is quite complex. If we wanted to create a similar effect in a graphics program, we would have to put a lot more effort than this.

This last example is a perfect depiction of when it drawing through coding makes sense. When we want to draw a specific object, like a cat, a house, or a tree, it’s best to use a graphics program. However, if we want to create some animations which can be described mathematically, it’s very likely it will be more efficient to code it than to draw it frame by frame. Naturally, our coding skills will be necessary to create intelligent animations, like a lamp that will turn on when we enter the room, or an animation that will react to our movement.