Before we go onto the next step, there is a little trick that might help you when programming.

Press the right-click on your mouse on one of the blocks to open a quick action menu to easily duplicate blocks, add commnets, delete blocks, or seek for help.

You can also do some of these commands by pressing other buttons on your keyboard. 

To delete a block, press DEL button on Windows/Linux or DELETE on MacOS. 

To copy a block, press Ctrl+C on Windows/Linux or Cmd+C on MacOS.

To copy a block, press Ctrl+X on Windows/Linux or Cmd+X on MacOS.

To paste a block, press Ctrl+V on Windows/Linux or Cmd+V on MacOS.

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

See that display.commit() function? It's probably the most important function of all and it's located under the display section.

Its mission is to read everything that has happened between the last time it was called and now and to transfer those changes to the hardware.

For example, sprite->clear() function would not change anything if the display.commit() isn't called.

That function says 'draw sprite to display' in the blocks!

We've also used another new block called wait().

The number value block can be found in the Math section and its value can be changed to suit our needs.

Since the loop() function is really fast, sometimes we need this delay to actually see what is going on on the screen.

Using delay when expecting a fast and responsive program, however, is not the way to go,
especially when we're using buttons. More about that in the next lesson.

What we're actually doing in this program is alternating the screen color between three values.

Firstly we change it to cyan, then wait 500 milliseconds or 0.5 seconds.

Then, we change it to orange and wait another 500 milliseconds.

Lastly, we change it to yellow, wait 500 milliseconds, and return back to the beginning of the loop, where the screen is again changed to cyan.

Now that we know how to change the background color, it's time to start writing something on that canvas.

Nibble library offers three different fonts that can be re-sized and re-colored as we like.

Functions for that are rather simple and should not be a problem to understand for anyone.

With this program, we're writing some words out on the screen in different fonts, sizes, and colors.

The font type is easily changed with the drop-down menu of the set font type block. The font size, however, multiplies the size of the selected font by the desired value. By default, both of those values are 1, so setting them at the beginning of the program to that same value actually made no difference.

Later both of those values have been changed. In the last example, we're printing out two words "And SIZE!" in a different font that is twice the size.

The print() function here is something that we're going to use quite often. The first empty slot is a string of characters that are meant to be written out.

You can find an empty one in the Text section.

The second and third slot are the location of the first letter. Setting both of those values to 0 will print out words in the upper left corner of the screen.

With these numbers, we're actually referencing pixel locations. Our screen is 128x128 pixels and we can manipulate each and every one of them.

If any of those values is out of that range, we will not see the component.