Course 4 / Lecture 2:

Learn to use keyboard events

Keyboard events are great, because they are fast and offer a great input mechanism for robot control. In this lecture you will learn how to use the keyboard in SNAP. Your task will be to create a doodle program, that will move the cursor along the canvas as if it was a robot. You will be able to use the space to put down the pen to leave a trail for the movement. You will also learn about program initialization tasks.

Figure 1 - With this Snap code you can draw with the gray arrow


Task #1:

Describe what a boolean value is!

Boolean value - is a logical value. It can be only true or false. Also it is usually marked with 1 (true) or 0 (false).

Task #2:

Define what a logical expression is!

Logical expression - it is a (mathematical) expression which results a logical value. A logical expression is like: is x = 5? The answer is true if x equal to 5 or false if x is not equal 5.

Task #3:

Define what a selection is!

Selection - is a control structure. It is used for making decisions in programs. It has a condition part and one or two branches. The condition is a logical expression, which selects the branch.

Task #4:

Create an entry point to set the cursor to center and set its direction to 90 degrees!

In this lecture, you will discover some new blocks. You have already saw how to start programs and set variable values, how to put the pen down or lift it up and how to move the cursor away from its position. Now you will learn how to move your cursor to specified coordinates, turn your cursor to a starter direction. But the most important blocks are the selection blocks ('if' and 'if else' blocks) and logical expression blocks, which you will learn about in the following tasks. First, place the 'when green flag clicked' block. Then attach a 'go to x: 0 y: 0' block to the previous one (Figure 2). This block places the cursor to a specified coordinate, which is a number pair: an x and y value. On the canvas imagine a coordinate system on which the origin is on the center of the canvas. The x value specifies the horizontal position, the y value specifies the vertical position of the cursor. In the block you can specify these coordinates (in this case both x and y are 0). You have set the cursor's position to the origin. The next block is 'point in direction X' where X is a degree value. It will instantly turn the cursor to the specified direction. Set it to 90 degrees to turn the cursor right.

Figure 2 - Positioning the cursor

Task #5:

Put the pen down and save its state!

Now you should insert a 'clear' block which clears the canvas. You must clear the canvas after moving the cursor to the center because when you restart the program by clicking on the green flag, it sets the cursor's position to the center and draws a line from its former position to the center point if the pen is down. After that, please insert a 'pen down' block from Pen category to put the pen down. To save its state, you need to make a variable called 'pen_state' then set its value to 'down' by using the 'set [variable] to [value]' block like on Figure 3. You will use this variable later.

Figure 3 - Puttig the pen down and saving its status into a variable

Task #6:

Create a selection to change the pen's state!

The second part of the program will change the state of the pen by pressing a 'space' key on your keyboard. So it needs to start with a 'when space key pressed' block found in Control category. Then comes the 'if [condition] [blocks] else [blocks]' block which is also a Control block for creating selections. It makes a decision and continues the program with one of its two branches. The decision is based on the condition which is a logical expression. In the next step, you will learn how to create logical expression. In the 'if' statement above, the subsequent blocks (called 'then' branch) will execute if the logical expression in the 'condition' is true. If it is false, then the blocks after 'else' (called 'else' branch) will execute. In the 'then' branch you need to lift the pen up and set the value of the 'pen_state' variable to 'up'. In the 'else' branch, you should do the opposite, so place a 'pen down' block and set the value of the variable 'pen_state' to 'down' like on Figure 4.

Figure 4 - Changing the pen's state with using a selection block

Task #7:

Create a logical expression for the if-else block!

In the previous step, you have read about the 'if [condition] [blocks] else [blocks]' block's branches. Now let's talk about the condition. The condition is a logical expression which results a true or false value. The 'if else' block will make a decision based on this value. If the value is true, it will execute the 'then' branch. If the value is false, it will execute the 'else' branch. You can make logical expressions using the blocks in the Operators category. They are hexagon shaped to fit into the 'if' or 'if else' blocks' condition part (e.g. 'X < Y' or 'X = Y' blocks where X and Y can be variables or constants). Please pleace an 'X = Y' block where X should be the 'pen_state' variable and Y should be the 'down' text and put this block into the condition part of the 'if else' block you placed before like Figure 5 shows. Thus the selection block will check if the 'pen_state' variable's value is 'down'. If yes then it will lift the pen up and set the variable's value to 'up', if not then it will put the pen down and set the variable's value to 'down'. So it will switch the state of the pen between up and down.

Figure 5 - The 'if' block checks the pen state with logical expression operators

Task #8:

Move the cursor upwards!

You should change the pen state by pressing the space key. Now you have to create the third part, which can move the cursor up. Let's start with a 'when up arrow key pressed' block. It is nearly the same block as in the previous step, but it will be activated by pressing the 'up arrow' key instead of 'space'. Then you should create an 'if else' block. Let the condition be a 'X = Y' block where X should be the 'direction' variable and Y should be constant 0. You can find the 'direction' block in the Motion category. It is a built-in variable which stores the cursor's current direction in degrees. In the 'then' branch, please place a 'move 10 steps' block and a 'point in direction 0' in the 'else' branch as can be seen on Figure 6. So this will do the following: if the direction of the cursor is 0° then it will move the cursor by 10 steps, if not, it will point the cursor to direction 0 (upwards). On the second 'up arrow' key pressing, it will move the cursor 10 steps.

Figure 6 - Move the cursor upwards if the up arrow key is pressed

Task #9:

Move the cursor right, left and downwards!

The next 3 parts are almost the same as the third part. So please create one part for moving the cursor down (180°), one for moving right (90°) and one for moving left (270°). You can see these parts in Figure 7. To try it, click on the green flag button. It will set the cursor to the center and it's direction to 90 degrees and it will also clear the canvas. Press one of the arrow keys to move the cursor. It will draw a line as it moves. If you press the space key, it puts the pen up and stops drawing. If you press the key again, it puts the pen down and continues drawing.

Figure 7 - The completed program for all 4 arrow keys

Program code

Program code
Figure 8 - Program code that can draw lines

More information


Copyright © 2000- |Ozeki Ltd | |
Page: 6073 | | Login
Thank you for visiting this page