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, triangle, and ellipse.
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 program.
There are some variables that might cause some question marks here.
All of these functions have aĀ location, size and color parameters.
The first two parameters for aĀ rectangleĀ are the location of itsĀ upper left corner. TheĀ next twoĀ are itsĀ width and height. This means that it will occupy the area on the screen whichĀ starts in the coordinates x and yĀ and spread all the way to theĀ x+width and y+height.
Circle,Ā on the other hand,Ā is defined by the location of itsĀ center.
X and yĀ represent the center andĀ radiusĀ just how far from it are the furthest points.
TriangleĀ is defined by the coordinates of itsĀ vertexes. It doesn't matter in which order you put them, every triangle with the same coordinates will look the same.
You can combine those shapes, overlap them, draw them outside of the screen and many more things. Pretty much every more complex shape can be created with the basics ones.
Animations
We already talked about how 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.
For this one, a new block is going to be introduced -Ā a for loop. It's a pretty basic function in programming and you will use it quite often.
This loop and many more can be found in theĀ Loop section, the second one on the list.
What exactly doesĀ for loopĀ 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Ā 125, the for loop breaks and the program continues.Ā That means that everything inside it ranĀ 111 times!
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.
Combining text and shapes
Here is a quick example of using both text and shapes at the same time. Both shapes and text can be combined, with one drawn over the other.
Of course, on the top will always be the one whose function was called later in the loop.
In this example, we're recreating ourĀ CircuitMessĀ logo by using simple shapes and text.
You can try adding some animations to it and make it come to life!