Shapes and animations

Shapes

There are plenty of blocks that are still unexplained but offer so many different possibilities.
For now, let's focus on ones from the Display section.
We know how to paint the entire screen with one color, but what about only the part of it?
There is a function for drawing some of the most used shapes - rectangle, circle, and line.
All of these can be either filled or not while using the same colors as for the screen.
Here is an example of one such code.

Before we begin, add the "begin nibble variant" block:

The first thing we want to do is fill the screen with white, and put the "Loop forever" block in the drawing section.

Let's draw an outlined rectangle.

We chose a green outline. Both the width and height are set to 25. Also, both coordinates are set to 10.

The color of the rectangle is green.

We'll also draw an outlined circle with a radius of 25 and coordinates of 40 and 70.

The color of the circle is navy.

Click on the Run button and check it out.

Animations

The screen refreshes 25 times in a second, which is fast enough to create the effect of a moving image.
Animations are just that - shapes and images moved so slightly that they have a smooth movement.
It's best that we show it by example.
We're going to take a circle and move it from the top of the screen to the bottom.
When it reaches the bottom, it will change its color and direction in which it moves.

What exactly does "Loop forever" do? It repeats whatever is inside it a specific amount of times.
As we can see in the example, we set the i variable to 15 and increase it by 1 every time the loop loops.
When it gets to 120, the for loop breaks and the program continues.
But what does this exactly have to do with animation? Well, we used that same i as one of the coordinates for the circle.
Every time the loop ran, the circle went down by 1 frame, but the loop ran so fast that we only saw the smooth movement of the circle.

If you want to put the stock firmware back onto your device, you can click the Restore firmware button in the top right corner on CircuitBlocks.