Let's play with the display!

In computer programming, a variable is a storage location that contains a value. Every variable has a specific name. You can store and change the values of a variable.  

Firstly, let's create a variable. Find the section named "Variables" and press the "Create variable..." button. 

You need to give your variable a name. 

I am not that creative, so I will name my variable "x" (just a single letter x).

We have a variable now. Great!

We can make all the variables we will need for this sketch immediately.

Just repeat the same process you did while making the variable "x".

When we create a variable, it's undefined - it has no value. We must set a value for every variable when our computer program starts. That's why you'll need the "set variable" block.

Put the "x" block in the "Arduino run first:" branch.

You need to define the value to which you want to set the variable.

Find this block named "123" in the "Math" section. This block is a numerical value block, and you can type in the numerical value you want once you drop it onto the drawing area.

Place the block as shown in the photo below.

Now click on the block and type in the value. Set the numerical value of the block to 20. You can do this by simply typing the number 20 on your keyboard. 

Now, repeat this process for every other variable you made. But, make sure to add the correct numerical value for each variable.

By doing this, we defined the position of the ball on the screen.

Now that we have variables created and set to correct numerical values let's make a drawing we want to see once we run this code.

You need to find this yellow block named "Clear the display with screen color Black ".

We're going to use the loop()part of the code.

Put that block in the "Arduino loop forever" branch.

Using this block, we make sure the background of our screen is black once we run the sketch.

Now you need to find another yellow block named "Draw filled circle with colour screen colour Green".

Place this block under the "Clear the display" block in the "Arduino loop forever:" branch.

Set the radius value to 5 by simply writing the number 5 on your keyboard. As you probably guessed, the radius value defines the size of your ball. Number five in a radius represents a number of pixels of radius.

After that, open the Variables and choose the blocks that only say "x" and "y". 

You will drag them in the circles displaying "30". By that, you defined the ball's position using previously made variables.

Your sketch should look like this:

Once again, open the Display section, and find the block called "Draw sprite to display".

Put it under the block you used for drawing the ball.

We have to put the "Draw sprite do display" block to ensure that our ball appears on display.

Now that we drew the ball, we should control its motion.

Firstly, go to Variables, and choose a block called "change x by 1". You'll make two of those for the "x" and "y" variables. 

Instead of number 1 in the circle, we will drag variables "dx" and "dy". 

By doing that, you'll increase the value of "x" and "y" variables by the value of "dx" and "dy". 

Let's use a time-related block.

Find the block saying "wait 1000 milliseconds", drag it to the end of your sketch, and write 20 instead of 1000. You can choose whatever time you want.

With this block, you make the program wait for a certain number of milliseconds.
A millisecond is a thousandth of a second.

One thousand milliseconds is actually one second, and 20 milliseconds are 0.02 seconds.

If we put 20 instead of 1000, the ball will move for one pixel every 0.02 seconds.

Let's move on to the "Logic" section!

Drag the first one you see between the "change" and "clear" blocks.

Up next, we'll need a Boolean block - the one that says "or".

Boolean is a binary variable that can have one of two possible values, 0 (false) or 1 (true).

Now we'll need a comparison block. This block is usually used for comparing the value of a variable to a fixed value (i.e., let's see if the variable x is less than or equal to number 5).

Place the variable we've created on the left side of the comparison block.  

Take the numerical value block from the math section and place it on the right side of the comparison block. 

Also, we have to define a numerical value of the "dx" variable, so we need to take a "set dx to" block.

Find single operand blocks in the Math section.

An operand is the part of a computer instruction that specifies what data is to be manipulated or operated on.

Choose the circled one from the photo below:

Now you'll have to duplicate the last couple of blocks. You can do that by clicking on the right button on your mouse and choosing "duplicate".

We'll need the second group of blocks for the "y" variable.

Check out the values we put for the "y" variable:

Now hit the big red "Run" button and see the code executed on your device.

Cool, right?