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!