1. Scratch for Interactivity
Dr. Ben Schafer
Department of Computer Science
University of Northern Iowa
CS4HS Summer 2010

2. Activity #1 – adding simple interactivity
Yesterday at one point I suggested that you create a sequence of actions so that the sprite draws
A square (saved as “SquareTracer” ??)
An octagon
An equilateral triangle

3. Activity #1 – adding simple interactivity
Suppose that instead I asked you to write a program that had the sprite draw an n-sided regular polygon where n was provided by the human user of our program.

4. Activity #1 – adding simple interactivity
Learn about
introduce variables
introduce mathematical operations
introduce slider based interaction

5. Some challenges How do we get the input from the user?
How do we tell the computer to repeat based on this answer?
How do we change out side length and angles based on this answer?

6. One solution
While we technically have several problems, all are solved through the introduction of a variable.

7. Thought questions What is a variable? Where do we use one in general?
Where do we use one(s) in this problem?

8. Variables Select the variables menu from the script block area.
Notice that by default none are provided and that there are no script blocks available.
Press the Make a variable button.

9. Variables
We need to give our variable a good name. In this situation we want a variable to store the number of sides on our polygon. Therefore…

10. Variables
After creating a variable several script blocks appear below a list of our current variables (at this point, only one).

11. Variables
Insert the “set … to … “ block at the beginning of the cat’s script and assign it’s initial value to 4

12. Variables
Replace the numerical 4 in the repeat block with the sides block from the variables menu (notice it has rounded edges meaning it can be placed there)

13. Variables Run this program. What do you observe?
Change the “4” to a “6”

14. Variables
Despite the fact that we have a six in as the sides we still get a square.
Although, notice the cat is in a different place.
What’s going on?

15. Variables
We need to adjust our angle when we change the number of sides.
Should that be another variable?
It could be, but there’s a better (easier) way.

16. Operators
How is the amount of each turn (angle) related to the number of sides?
If there is a mathematical relationship (and there is) we can use operator blocks to have the computer make the calculation.

17. Operators
Notice that the Operators menu contains several mathematical (rounded edge) and boolean/logical (angle edge) blocks

18. Modifying our code
We can improve our solution by replacing the “hard coded” numbers of 100 and 90 with mathematical calculations based off of the original number of sides.
Try a variety of inputs.
Does it seem to work?

19. Other ways to provide input?
Ok, a human user SORT of has a way to change the sides, but it is pretty lame.
How can we provide input during execution (“run-time”)?

20. Variable Sliders Right click on the display for “sides”
Select the slider option.
Test out the resulting program.

21. Slider values are too extreme
Right click again on the sides display.
Notice that the options have changed now that it is a slider.
Select “set slider min and max”
Set min=3 and max=20

22. Thoughts, comments, questions?

23. Activity #2 – A game
We will make a game where the player controls a baby using the arrow keys to catch a falling ball. If the baby misses the ball the game is over.

24. Activity #2 - Goals Learn about introduce event handling
introduce conditionals
more with loops
more with variables
more with parallel execution (yesterday)
more with message passing (yesterday)

25. Delete the Cat
Click on the scissors and your cursor turns to scissors and then click on the cat to delete it
Or right click on the cat and pick delete

26. Add the Baby
Click on the button with the picture of folder with a star in it
if you hover over it, it says "Choose new sprite from file"

27. Select the People Folder

28. Scroll to the Baby
Click on the baby and then OK

29. Resize Your Sprite!
You can make your sprite larger or smaller by using the “grow sprite” or “shrink sprite” icons.
You click on one of these icons, then click on your sprite until it is the size you’d like.
shrink
grow 29

30. Move the Sprite
Select (click on the arrow and then on the sprite) and click and drag the sprite to the bottom of the window

31. Add a Background Click on the Stage Click on the Backgrounds tab
In the bottom right area
Click on the Backgrounds tab
In the center
Click on the import button
Pick a background
Like bedroom1 in indoors

32. Event Handling We want to control the baby using the arrow keys
When we click the left arrow the baby should move left
When we click the right arrow the baby should move right
This is a form of event handling
Responding to user actions like mouse clicks and key presses

33. The Scratch Stage
The Scratch stage is 480 pixels wide and 360 pixels high.
180
Moving left decreases the x value
Moving right increases the x value
-240
0,0
240
at the center of the stage
-180 33

34. Respond to Arrow Keys
Click on Control and then drag out "when space key pressed"

35. Respond to Right Arrow
Click on down arrow next to space and select right arrow

36. Respond to Right Arrow
Click on Motion and drag out "move 10 steps"

37. Change the move amount Click on the 10 Type 5 and press enter
it will highlight in blue
Type 5 and press enter

38. Respond to Arrow Keys Drag out "when space key pressed"
Change "space" to "left arrow"
Drag out "move 10 steps"
Change it to -5 (to move left)
Click on the stage and try out the left and right arrow keys
Does the sprite leave the window?
You can also use the stamp (top right) to make a copy of the first two blocks and then modify them to be left arrow and -5.

39. Paint a Ball Click on the paint brush and star
It will say "Paint new sprite" if you hover over it

40. Draw the Ball Click the circle tool
Circle tool and eyedropper
Click the circle tool
and then use the eyedropper to pick a color
and then click in the drawing area and drag to create the ball
Drawing area
Click ok when done

41. Size the ball as desired and move it to the top
Click and drag the ball to the top of the window
Use the grow and shrink keys like we did with the baby.

42. Make the Ball Fall
When the green flag is clicked we want the ball to always start at the top and fall down
Click on Control
Drag out "When green flag clicked"
Be sure that the current sprite is the pumpkin.

43. Start the Ball Click on Motion Drag out “go to x # y # “
this will always start the ball at its current position (Scratch doesn’t automatically put it back for you).

44. Sequential Execution One block is executed after the other
In order from top to bottom
When the green flag is clicked
the ball will go to the specified x and y location

45. Loops
We want the ball to continue to move down unless the baby catches it
How do we make this happen?
We could use lots of blocks one after the other
But, that would be slow and repetitive
We need a way to repeat a block or set of blocks
This is called a loop or iteration

46. Make the ball fall Click on Control Click on Motion Try it out!
drag out "forever"
Click on Motion
drag out “change y by 10”
Change it to -1
Try it out!
The forever block will make anything inside it repeat until you stop the script or all scripts.

47. Catch the ball! If the ball touches the baby then it is caught
Let's track how many balls we have caught with a score
We will increment the score each time we catch a ball

48. Variables If we are going to keep track of the score
We want something to hold the current score
And we want to be able to change the score
We want the value to change or vary
This is called a variable

49. Track the score When we start the game set the score to 0
Click on Variables
Click on Make a Variable
Name it score

50. Set score to 0 In the ball script Drag the “forever” down
Drag out "set score to 0“
Drag the “forever” back up
Notice the score showing on the window 50

51. Conditionals We want to increase the score if the baby caught the ball
So this action will only occur only if some condition is true
This is called a conditional or an “if”

52. Conditional Statements
You can lead a discussion of “if statements” or “if-else statements” in the real world.
Examples: 1) If you eat all of your dinner, you may have dessert.
2) If you study for your exam, you will do well, or else, you will do badly!
This code means that if the user presses the Space key on the keyboard, the sprite will move 10 steps.
Notice the “angle edged” block. These blocks are used to answer Boolean (true/false) questions. 52

53. Conditional Statements
Notice the “angle edged” block. These blocks are used to answer Boolean (true/false) questions.
Conditional blocks are obtained from either the Operators or the Sensing menu.

54. Sensing
The sensing menu contains a number of blocks which detect whether certain situations are true (or false).
In our current program we are interested in the “touching” block.

55. Did we catch the ball? From Control drag out an “if”
Check if the ball is touching the baby
Get this in Sensing
If this is true increment the score
From Variables
You can change the name of the sprites to make it more obvious what they are.

56. Increment the score Try it out! Computers do what you tell them to
is this what you expected?
Computers do what you tell them to
Not what you want them to
The score increases each time the ball moves and is still touching the sprite. We really want the ball to move back to the top of the window instead once we catch it. 56

57. Reset the Ball If we caught the ball Increment the score
And move the ball to some random spot at the top of the window
So we don’t keep increasing the score

58. Reset the Ball Click on Number drag out "pick random 1 to 10"
drop on the x value after “go to x:”
change the 1 to -235 and change 10 to 235
change the y value to match the y in the first “go to x # y #”

59. Adding Losing
If the baby doesn't catch the ball it just gets stuck at the bottom of the screen
Let's tell the player that he or she lost

60. Add a text sprite Click on the Paint new sprite button
Click on the T for text
Pick the color
Modify the font size
Move the square to where you want the text
Type You Lost!

61. Hide the sprite
We don’t want to tell the player that she lost when the game starts
So hide the message when the game starts
Click on Control
drag out "when green flag clicked"
Click on Looks
drag out “hide”
Be sure that this script is on the text sprite.

62. Check if Lost If the y position gets near the bottom (near -180)
Drag out an if
from Control
Drag out a blank < blank
From Numbers
Add a y position
From Motion
Type in -175

63. Broadcast a message Sprites communicate by passing messages
One sprite broadcasts the message
Other sprites can listen for it and react to it when they receive it
Click on Control
drag out "broadcast blank"
click on the drop down arrow
next to new – name it lost
Add “stop script”
to stop the forever loop
Sprites communicate by passing messages
One sprite broadcasts the message
Other sprites can listen for it and react to it when they receive it
Click on Control
drag out "broadcast blank"
click on the drop down arrow
next to new – name it lost
Add “stop script”
to stop the forever loop

64. Receive Lost Click on the text sprite Click on Control Click on Looks
drag out "when I receive blank"
click on the down arrow and select lost
Click on Looks
drag out “show”
drag out “stop all”
to stop all scripts
The stop all will stop all the scripts from executing. 64

65. Parallel Execution We have several things happening at the same time
when the green flag is clicked
This is called parallel execution
More than one thing happening at a time

66. Create Instructions
Click on the Show Project Notes icon in the upper right corner
Add the instructions
Press OK

67. Test your game Click the green flag
If you want, adjust the speed of the ball
Increase the amount it changes in y
Modify the sprites using the “Costume” tab
Save your game with the “Save” button

68. Other Ideas Add a sound when you lose Add the ability to win
When you reach a certain score
Track the amount of time it takes as well
Speed up the ball over time
Add more sprites to catch
Add a sprite to avoid (like a big brother)
killer sprite

69. Concept Summary The Variables menu The Sensing menu Forever loops
can hold values and can change value
The Sensing menu
Can be used to see if certain conditions exist
Forever loops
repeat all the commands inside of them one at a time until the script is stopped or all scripts are stopped
Conditionals – ifs
only execute the body of the if when the condition is true
Sometimes used with sensing blocks

70. Concept Summary Sprites can pass messages Sprites can react to events
and receive them
Sprites can react to events
like clicking the green flag and pressing the left or right arrow keys
Sprites can have several scripts, costumes, and sounds
Things can happen one after the other – sequential execution or at the same time – parallel execution