Lesson 2

Draw Something on the Screen

Booting is cool and all, but now it is time to draw something on the screen. Drawing things on the screen is the basis of all video games programs.

Take the code you made in Lesson 1 and add the following code under the arduboy.begin() function. Push the code to your hardware.

arduboy.fillRect(5, 5, 5, 5, WHITE);

arduboy.display();

Yay A Square!

Look at the upper left corner. See the square? You added that! But how?

Let's look at the first line:

arduboy.fillRect(5, 5, 5, 5, WHITE);

This line of code is the instructions. It tells the program what to draw and where. Now let's look at the next line:

arduboy.display();

This line is a function that says "Hey, take all those drawing instructions and put them on the screen." If you were to take away this line then nothing would show up!

Have you noticed how every line ends with a ; (semicolon) ?

This ; is important as it let's the computer know it is the end of a line of code.

Get Rid of that Boot Logo

Let's get rid of that Arduboy boot logo.

Add the clear() function right under the begin().

arduboy.clear();

Clear() will completely wipe away whatever is on the screen.

So this was the order of what will happen is:

  1. Boot and scroll the logo

  2. Clear the screen

  3. Draw the square on the blank screen

Mess Around

One of the most important ways you can learn to code is to mess around a bit with the code to learn how it works.

Let's see what we can do to this fillRect() function.

The fillRect() function has four 5's in it. Let's change the first 5 to a 50 and see what happens.

Make the change and push the code to the hardware.

. . .

Look at that, the square moved!

The numbers and words inside a function's ( ) are called parameters.

Try changing all of the other parameters but do it one at a time. If you do more than one it will be a lot harder to tell what each parameter is controlling.

Challenges!

Regular Challenge: Can you add another square on the screen?

Hard Challenge: Can you draw a smiley face on the screen?

The Thinking Coder's Super Challenge: How could you make a square move across the screen? Consider what you've learned about Clear() and fillRect().

The Complete Code

#include <Arduboy2.h>

Arduboy2 arduboy;


void setup() {

// put your setup code here, to run once:

arduboy.begin();

arduboy.clear();

arduboy.fillRect(50, 5, 5, 5, WHITE);

arduboy.display();


}


void loop() {

// put your main code here, to run repeatedly:


}