Let's play with the display!

For the next step, let's go a bit further and do something fun on display.  

The first thing we are going to use are variables.

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. 

random image

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).

random image

We have a variable now. Great!

random image

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".

random image

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.

random image

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.

random image

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. 

random image

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.

random image

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 ".

random image

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

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

random image

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".

random image

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". 

random image

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:

random image

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

random image

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.

random image

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". 

random image

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.

random image

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

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

random image

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).

random image

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. 

random image

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:

random image

random image

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:

random image

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

Cool, right?