Scratch for Interactivity

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” • What do you observe?

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

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 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 240 0,0 at the center of the stage -180

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 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?

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 and then use the eyedropper to pick a color and then click in the drawing area and drag to create the ball Circle tool and eyedropper 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

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"

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 drag out "forever" Click on Motion drag out “change y by 10” Change it to -1 Try it out!

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