Create an interactive digital product using programming logic

1. Create an interactive digital product using programming logic

2. OBJECTIVE The objective of this lesson is for each student to create an interactive digital product using programming logic. Sample(s) of Behavior (SOBs) • Build a script that enables a cat to walk • Use script tools for importing a Sprite, interaction, conditional and question blocks, and talking • Build a script for adding a Background – Repeat Blocks – Export a Sprite • Use variables, motion, looks, and interaction • Build a script that generates two cat sprites into just one • Modify a script by adding variables • Produce or add sounds

3. THE BEGINNINGContinued • In the world of digital electronic systems, there are three basic kinds of devices: memory, microprocessors, and logic. Memory devices store random information such as the contents of a spreadsheet or database. Microprocessors execute software instructions to perform a wide variety of tasks such as running a word processing program or video game. Logic devices provide specific functions, including device-to-device interfacing, data communication, signal processing, data display, timing and control operations, and almost every other function a system must perform. • Logic devices can be classified into two broad categories - fixed and programmable. As the name suggests, the circuits in a fixed logic device are permanent, they perform one function or set of functions - once manufactured, they cannot be changed. On the other hand, programmable logic devices (PLDs) are standard, off-the-shelf parts that offer customers a wide range of logic capacity, features, speed, and voltage characteristics - and these devices can be changed at any time to perform any number of functions.

4. THE BEGINNINGContinued • With programmable logic devices, designers use inexpensive software tools to quickly develop, simulate, and test their designs. Then, a design can be quickly programmed into a device, and immediately tested in a live circuit. The PLD that is used for this prototyping is the exact same PLD that will be used in the final production of a piece of end equipment, such as a network router, a DSL modem, a DVD player, or an automotive navigation system. There are no NRE costs and the final design is completed much faster than that of a custom, fixed logic device. • Another key benefit of using PLDs is that during the design phase customers can change the circuitry as often as they want until the design operates to their satisfaction. That's because PLDs are based on re-writable memory technology - to change the design, the device is simply reprogrammed. Once the design is final, customers can go into immediate production by simply programming as many PLDs as they need with the final software design file.

5. THE BEGINNINGContinued • The value of programmable logic has always been its ability to shorten development cycles for electronic equipment manufacturers and help them get their product to market faster. As PLD suppliers continue to integrate more functions inside their devices, reduce costs, and increase the availability of time-saving IP cores, programmable logic is certain to expand its popularity with digital designers. • Now we have a basic understanding of Programming Logic, let’s look at a way of developing an interactive digital product using “Scratch” programming logic program.

6. THE BEGINNING This is a sprite. It can be any thing, person, or place you want it to be. You can control what a sprite does. They can only do those things if they know how to do them. Sprites already know how to do some things, but it is your job to make sprites do more complicated things by using the few simple things that they already do know how to do. So in a way, you are teaching the sprite what to do. You can teach it to walk, run, jump, talk, or anything else you are clever enough to teach them to do. You can tell a sprite to do something it already knows by putting a Script Block into the Script Window. To pick which Sprite you are controlling, select it from the window on the bottom right. Your sprites can be seen in action in your World Preview Window.

7. THE BEGINNINGContinued • In this lesson you will teach a cat to walk when certain keys are pressed on the keyboard. • In order to make the cat do something, you have to tell it, step by step, everything it must do. • To give the cat a simple walk, you must tell the sprite how to do the following: • Move in the direction you want to walk • Move your legs • Move to the keyboard • Turn around

8. THE BEGINNINGContinued Tell the cat to move by dragging to the script window. A positive (+) # number moves →to the right. A negative (-) # number moves ←to the left. You can activate script blocks by double clicking their colored areas. Try it out. Sprites can have different costumes. They can switch between →← costumes to change the way they look. This sprite has 2 costumes already. The cat’s legs are in different positions. If it switches back ← and forth→ between these costumes, the cat will look like it is taking steps. Click in the Top Left Menu. Find and drag it into the script window. You can connect blocks on their tops and bottoms.

9. THE BEGINNINGContinued • These two blocks tell the cat take one cat-step to the right. • Why does the block say 10 steps? • Here, ‘steps’ means: # number of pixels → to move in the direction that the sprite is facing. You will learn more about this in Lesson 3. • Pixels are tiny blocks of color that are combined together to make images. • When Script Blocks are connected, they activate together, starting from the top. • One way to respond to the keyboard is to add to the top of a list of commands. The commands will then start when a certain key is pressed. • You can find this command by clicking in the Top Left Menu. • Drag to the script window and snap it to the top of your list. Change the keystroke to right arrow instead of space. Click the Green Flag to start your scripts.

10. THE BEGINNINGContinued • From here on, you will start seeing this image: • When you see this, it means that you should click the Green Flag and test out your program. • Now that there is a cat sprite that can walk to the right, you need to make one that can walk to the left. • The Stamp is a World Tool. Stamping a sprite makes a copy of it.

11. THE BEGINNINGContinued • Make a copy of the cat sprite by stamping it. • Select Sprite 2. You can use this new sprite to walk left. • Each sprite has its own Scripts, Costumes and Sounds. Everything gets copied when you used the stamp tool. • It is best to name a sprite after what it is. • Change the name to “catLeft”.

12. THE BEGINNINGContinued • Click the Costumes Tab Click the Edit button to edit costume2. • The editing window will open. • Click the Flip Horizontally button to make the cat face the other way.

13. THE BEGINNINGContinued • You must do the same thing for the other costume. • If you have not done so already, rename the sprite that is facing right, to catRight. • To make the sprites work together, you have to only have one showing at a time. It is easy to hide and show sprites as long as you can figure out when to do it. • You want catLeft to show when the left arrow is pressed and hide when the right arrow is pressed. • You want catRight to show when the right arrow is pressed and hide when the left arrow is pressed. • Click in the Top Left Menu. Find and . • Make the sprite hide and show when it needs to for both sprites.

14. THE BEGINNINGContinued Both of the sprites are just different views of the same cat so you want both sprites to move at the same time even if they are not showing.

15. THE BEGINNINGContinued • Now you need to make sure that both sprites are in the same spot. • If both sprites are not showing, you can show the one that is hiding by right-clicking the sprite’s button (control click for Mac) and clicking ‘show.” • You can drag and move sprites. A good way to put them in the same spot is to align the tips of the ears. • Test out your program by pressing the left and right arrow keys.

16. THE BEGINNINGContinued • Save your project so you can use it later. Save it as “Lesson 1” in a new folder “Lessons”. • To make a new folder, click the new folder button in the save window.

17. THE BEGINNINGContinued

18. IMPORTING A SPRITE, INTERACTION, CONDITIONAL AND QUESTION BLOCKS, AND TALKING • Open up the file you saved from Lesson 1. • Click the Import New Sprite Button. Open the Things Folder.

19. IMPORTING A SPRITE, INTERACTION, CONDITIONAL AND QUESTION BLOCKS, AND TALKINGContinued Scroll down and find the key.

20. IMPORTING A SPRITE, INTERACTION, CONDITIONAL AND QUESTION BLOCKS, AND TALKINGContinued It is always helpful to name sprites. Rename the sprite to “key.” This sprite is very big compared to the cat so you should make it smaller. Choose the Shrink Tool in the World Tools then shrink the key to make it look better. Keep clicking the sprite with the shrink tool until it looks like the cat could hold it.

21. IMPORTING A SPRITE, INTERACTION, CONDITIONAL AND QUESTION BLOCKS, AND TALKINGContinued Keep clicking the sprite with the shrink tool until it looks like the cat could hold it. Working with the key scripts: For this program, you should show the key sprite as soon as the Green Flag is clicked.

22. IMPORTING A SPRITE, INTERACTION, CONDITIONAL AND QUESTION BLOCKS, AND TALKINGContinued To make it look like the cat is taking the key, you can hide it when the cat touches it. To do this, you need to use a conditional block. These blocks have pointy edges on the side and they fit into holes that have pointy edges on the side. Question blocks are used to ask true or false questions. You can use them by putting them into conditional blocks to perform actions depending on the answer. Blocks that ask conditional blocks have an empty spot for you to put questions in. The questions look like rectangles with pointy ends. To complete a conditional block command, you have to put a question in it. Right now, you want to ask if the key is touching the sprite. Find the Touching question block: Touching is a sense, so look for it in the Sensing Menu. To use a question block, you need to say what to do when the question is true. One way you can do this is by putting the question into the ‘Wait Until’ conditional block. The ‘Wait Until’ block is in the Control Menu.

23. IMPORTING A SPRITE, INTERACTION, CONDITIONAL AND QUESTION BLOCKS, AND TALKINGContinued Connect the Wait Until block to the show block. Then put the Touching block into the Wait Until block. Put a hide block under them. Using the drop-down menu, change the setting of the block so that it will check if the key is touching catLeft. By adding these 3 commands, it is like you are saying, “wait until the key is touching the catLeft sprite and then hide the key.”

24. IMPORTING A SPRITE, INTERACTION, CONDITIONAL AND QUESTION BLOCKS, AND TALKINGContinued • You may have noticed that the cat does not pick up the key when the cat is facing right. That is because you never told it to. In order to do that, you have to ask if the key is touching either catLeft or catRight. That way, if the key is touching either one, then it will hide. • Notice that right now you cannot put both questions into the Wait Until block at the same time. In order to put both in there, you have to say: • Wait Until question 1 is true OR question 2 is true. • One way to combine questions, is to put them both into an OR question block. You can find this block in the Numbers Menu

25. IMPORTING A SPRITE, INTERACTION, CONDITIONAL AND QUESTION BLOCKS, AND TALKINGContinued • To go one step further, you can make the key only hide if it is touching the cat AND the down arrow is pressed. You’re sure to have played games where in order to pick up an item, you have to press a certain button or key. • To do that, you have to add a ‘Key Pressed’ question block. • Finding out whether a key pressed is a sense, just like touching, so you can find it in the Sensing Menu. • Earlier, you combined two questions by using the OR block. They turned into one question. Now you must do it again, but this time, using an AND block. • Wait Until question 1 is true AND question 2 is true. • You want the cat to be touching the key and you want the down arrow to be pressed to signal that the person operating the keyboard wants to pick up the key. • There, you can find the AND block.

26. IMPORTING A SPRITE, INTERACTION, CONDITIONAL AND QUESTION BLOCKS, AND TALKINGContinued You have to be careful about what order you put the AND & OR blocks. Remember that they combine questions. The order of combination is important. The top question set is what you want. It means, “is the down arrow pressed and is the key touching the cat?” The bottom question set is not right. It means, “is the down arrow pressed while the key sprite is touching catLeft or is the key just touching catRight?”

27. IMPORTING A SPRITE, INTERACTION, CONDITIONAL AND QUESTION BLOCKS, AND TALKINGContinued Working with catLeft scripts: • You can also use question blocks to make the cat say something when it is touching the key. • Another way to use question blocks is to put them into If blocks. • Using an If block is like saying, “If the question is true then do what is within the block.” The ‘Wait Until’ block is a lot like an If block. In fact, it is an If block that just sits around and waits until the question is true. • So, here, you want to say, “If the cat is touching the key then say, ‘I found a key!’” • You want to say this over and over again though; otherwise it will only be checked once when the Green Flag is clicked. The Forever If block checks if the condition is true forever. • The Forever If block is found in the Control Menu. Put a When Green Flag Clicked start block into the script window underneath the walking scripts. Connect a Forever If block to that. Put a Touching block into the Forever If block. Change the value of this to “key.”

28. IMPORTING A SPRITE, INTERACTION, CONDITIONAL AND QUESTION BLOCKS, AND TALKINGContinued Find the Say __ For __ Seconds block in the Looks Menu. Put it in the Forever If block. Find the Think __ For __ Seconds block. Put it in the Forever If block. Change what the cat thinks and says.

29. IMPORTING A SPRITE, INTERACTION, CONDITIONAL AND QUESTION BLOCKS, AND TALKINGContinued You can copy a list of blocks to another sprite by clicking on the top block and dragging it to that sprite. Click the top Green Flag Block and drag it to the other cat sprite. This will copy it there.

30. IMPORTING A SPRITE, INTERACTION, CONDITIONAL AND QUESTION BLOCKS, AND TALKINGContinued You could have used the Wait Until block again to make this happen, but here, it is not the best choice. When you use the wait until block, the script underneath it will only happen once. What if the user doesn’t read fast enough then they will not know what to do. Save your program as “Lesson 2” in your “Lesson” folder. • Things To Remember • Use AND blocks when you have two question that both need to be true. • Use OR blocks when you only need one of two questions to be true. • The order that you combine questions does make a difference. • There are many different ways to do the same thing. forever if {commands}=forever { wait until {commands} }=forever { if {commands} } • You can copy a list of commands to another sprite by dragging them to the sprites icon in the bottom right part of the window.

31. ADD A BACKGROUND – REPEAT BLOCKS – EXPORT A SPRITE • Open up the file you saved from Lesson 1. • Changing the Background: • Isn’t that white background getting boring? It is really easy to change. In Scratch, the background is actually called the Stage. It works a lot like a sprite because it can have costumes and scripts too. • To edit the Stage, select it from where you normally select different sprites.

32. ADD A BACKGROUND – REPEAT BLOCKS – EXPORT A SPRITEContinued You can draw your own background or import one that is already made. Right now, just import one. Click the Import Button. A window will pop up that will allow you to choose a background. Navigate to the “Indoor” folder and then find “room2.” Now that you added a background, it is time to make the cat jump.

33. ADD A BACKGROUND – REPEAT BLOCKS – EXPORT A SPRITEContinued Working with catRight scripts: First, add a When Key Pressed block to the scripts catRight. Change it to “up arrow.” To make it look like the cat is jumping, you need to make the cat move up and then down. You can do that by changing the “y position”. Changing the Y position moves a sprite up or down. Find the ‘Change Y By’ block in the Motions Menu. A good amount to have the cat jump is 100. There are a lot of ways to do that. Some ways will look different than others. If you move the cat up 100 just one time then back down 100 then it will look like the cat is warping. If you move the cat up by 25 for four times, then it will still look choppy or laggy. The key to smooth motion is to make a lot of small steps. However, there is no need to make more steps than you need to make a movement look smooth.

34. ADD A BACKGROUND – REPEAT BLOCKS – EXPORT A SPRITEContinued You can change the Y more than once an easy way or a hard way. Both of these scripts move the sprite 100 pixels up. Using a repeat block is much simpler and easy to change later if you need to.

35. ADD A BACKGROUND – REPEAT BLOCKS – EXPORT A SPRITEContinued Find the Repeat block in the Control Menu. Put the Change Y By block into the repeat block. Copy that and change the value in the Change Y Block to “-10” to make the sprite move down 100 pixels so it will be back where it started. Attach those blocks to the When Key Pressed block. Remember that the cat has 2 sprites: one for facing left and one for facing right. Like in the previous lessons, you have to click the top block in your list and drag it to the other cat sprite to copy it there. Copy the jump script into catLeft.

36. ADD A BACKGROUND – REPEAT BLOCKS – EXPORT A SPRITEContinued • The cat jumps really fast. It would be a good idea to slow the jump down. All you need to do to make that happen is Wait a little while after each time you change Y. • In the Control Menu, find the Wait # Secs block. • Put one in both repeat blocks underneath the Change Y By block. Remember to do the same for the other cat sprite. • Now it’s too slow. Try different values for the wait time. If you cut the time in half, the cat will jump twice as fast. Be careful not to change the number of repeat times. • Sometimes it takes a long time to guess the right time to wait. You can often use math to figure out values. In this case, you would divide the total time you want the jump to last by the number of steps. A half of a second would be a good amount of time for the jump to happen. You could also say that a good duration for the jump would be 0.5 seconds. Duration of jump ÷ # steps = wait time      0.5 seconds ÷ 20 steps = 0.025 seconds per step                          (10 up, 10 down) Once you are satisfied with how the cat jumps, save your program as “Lesson 3” in your “Lesson” folder.

37. ADD A BACKGROUND – REPEAT BLOCKS – EXPORT A SPRITEContinued Make the cat jump to get the key: • You already made a key sprite that hides. It is in Lesson 2 program file. Open up your program from Lesson 2 (make sure you save what you have started for lesson 3). • You can export sprites in Scratch. Exporting a sprite is useful because you can then import it into a different Scratch program. Once you have lesson 2 open, right click (control click for Mac) the key sprite and click export. You can also export a sprite by clicking the export button next to its name near the top center of the window. Export it as “hiding key” to a new folder, “lesson sprites”. Now open up your Lesson 3 program again. You can import the sprite you just exported just like you would any other sprite. Click the Import New Sprite Button.

38. ADD A BACKGROUND – REPEAT BLOCKS – EXPORT A SPRITEContinued Import “hiding key.” Move the key sprite to the top shelf in your background by dragging it there. In Lesson 2, you had the key disappear when the cat was touching it AND when the down arrow was pressed. It is not necessary to press the down arrow in this case, so you need to take that part out of the Key scripts. Now you should be able to have the cat jump up and grab the key. Save your program as “Lesson 3” in your “Lesson” folder.

39. ADD A BACKGROUND – REPEAT BLOCKS – EXPORT A SPRITEContinued Things To Remember • In Scratch, the background is actually called the Stage. It works a lot like a sprite because it can have costumes and scripts too. To edit the Stage, select it from where you normally select different sprites. Click the Background tab (where the Costume Tab is normally) to see the backgrounds. • There are a lot of ways to move a sprite. Some ways will look different than others. If you move a sprite 100 just one time then it will look like the sprite is warping. If you move the sprite by 25 for four times, then it will still look choppy or laggy. The key to smooth motion is to make a lot of small steps. However, there is no need to make more steps than you need to make a movement look smooth. • If a sprite is moving too fast, you should add a Wait block in between movements. If a sprite is then moving too slow, then you are waiting too long. To be sure of the right time, you can always use the following formula: • Duration of movement ÷ # steps = wait time • You can export sprites in Scratch. Exporting a sprite is useful because you can then import it into a different Scratch program. Right click (control click for Mac) the sprite button under the World Preview Window and click export. You can also export a sprite by clicking the export button next to its name near the top center of the window.

40. VARIABLES Open up the file you saved from Lesson 3. Now that you know how to make the cat be able to pick up a key, you can make the cat use the key for something. In this lesson you will learn how to make the key activate a robot. Import a pre-made robot sprite by first clicking the import button. Find it by looking in the “Fantasy” folder. It is called “robot3.” Place the robot sprite on the right side of the world where the cat will be able to walk to it.

41. VARIABLESContinued • To recap, the cat can get the key and you want to robot to do something when the cat walks up to the robot with the key. The first thing you need to do is somehow be able to tell whether or not the cat has the key or not. • In order to do this, you need something that can hold onto information for you so you can ask for the information later. Variables hold information. • To create a variable, you must first click the variables button in the Top Left Menu. Then click “Make a Variable.” Always name a variable after what it is used for. So for this one, you should name it “has key?” because you want to use it to be able to tell whether or not the cat has the key or not. When you make variables, you want to ask yourself, “what sprites need to use the variable?” If the variable is only going to be used by one sprite, then you mark “for this sprite only” when you make it.

42. VARIABLESContinued If the variable needs to be used by more than one sprite, then you mark “for all sprites” when you make it. This variable will be used by all sprites. In Scratch, variables hold numbers. So you can set the variable to “0” when the cat does not have the key and set it to “1” when the cat has the key. When the green flag is clicked, the cat will start out not having the key, so you will have to set the variable to “0” right away. Add a When Green Flag Clicked block to the robot’s script. To set the variable, add a “set has key? to []” block and set it to “0.”

43. VARIABLESContinued Navigate to the Key script and find the where the key hides when the cat touches it. Under that, you can add another “set has key? to []” block and set it to “1.” Now you can use the variable to find out if the cat has the key. Now use can have the robot do something if the cat walks up to it with the key. In the robot script, add another When Green Flag Clicked block. You will want to always check if the cat is touching the robot. You will also always want to check if the cat has the key or not. You can do both of these checks will a Forever If block. The “has key?” variable can be accessed by putting it where a number would usually go. To check if the cat has the key, you can ask if it is equal to “1.” The ‘is equals’ question block can be found in the Numbers Menu.

44. VARIABLESContinued • Now whenever the cat is touching the robot and has the key, whatever is in the Forever If block will be carried out. For this lesson you can just make the robot shift back and forth like it is turned on. All you have to do is have it move to the right and back to the left. You will want to add a pause (wait block) after each movement though. The pause will allow you to see the movements. Otherwise the robot will move so fast that it will look like it is standing still. Save your program as “Lesson 4” in your “Lesson” folder.

45. VARIABLESContinued Things To Remember • In Scratch, variables hold numbers. • To create a variable, you must first click the variables button in the Top Left Menu. Then click “Make a Variable”. • Always name a variable after what it is used for. When you make variables, you want to ask yourself, “what sprites need to use the variable?” If the variable is only going to be used by one sprite, then you mark “for this sprite only” when you make it. • Variable can be used to keep track of answers to questions too. You can just assign answers to certain numbers. For example: one (1) can be used for ‘yes’ and zero (0) can be used for ‘no.”

46. PRACTICE WITH VARIABLES, MOTION, LOOKS, AND INTERACTION Open up the file you saved from Lesson 1. First off, get rid of that bland white background by changing it to the “boardwalk” scene from the “Outdoors” folder. (If you don not remember: select the stage sprite, background tab, import…) You can delete “background1” once you added the “boardwalk background.

47. PRACTICE WITH VARIABLES, MOTION, LOOKS, AND INTERACTIONContinued • Now you are going to need to reposition the cat sprite on solid ground. Remember to do both sprites (catRight and catLeft). • Import the “fish3” sprite from the “Animals” folder. Shrink it down to a reasonable size using the shrink tool.

48. PRACTICE WITH VARIABLES, MOTION, LOOKS, AND INTERACTIONContinued • So now you have a cat, a fish, and some water. You can make a game out of these things. What about if you make the fish jump out of the water and try to make the cat catch it. • You already know how to move sprites. And you know how to make things disappear when they touch the cat. You can even keep score now that you know how to use variables. • The first step is to send the fish to a spot in the water so you can make it look like it is jumping out. • If this is going to be a game, you are going to want to have the fish jump out of the water in different places. That means that you have to put different values of X into the Go To block every time the fish shows up again. You also know that you are going to have to put the script to make the fish jump into a repeat block so that is happens more than once. For simplicity, you can put a forever block under a When Green Flag Clicked block. • You can send the fish sprite directly to a certain spot by using the Go To block. You can find it in the Motion Menu.

49. PRACTICE WITH VARIABLES, MOTION, LOOKS, AND INTERACTIONContinued How do you find out where to put the fish? You are going to want the fish to jump out of the water in different places. That means that the X position will have to be different every time. Since you need different numbers within a certain range, you can use the “pick random #” block. This block is used to pick random numbers in between the numbers you give it. You can find it in the Numbers menu. To find out what numbers to pick in between, you have to find the farthest X position to the left and the right that you want the fish to go. For example, if you leave the numbers at 1 and 10, then the fish will only be in between 1 and 10. To find the X positions, you can move your mouse over the World Preview Window. The coordinates of where the mouse pointer is will be shown just below and to the right of the World Preview Window. The center of the world is at (0,0).

50. PRACTICE WITH VARIABLES, MOTION, LOOKS, AND INTERACTIONContinued You are going to have to find the Y position now. The Y position will be the height of where the fish jumps out of the water. It will be the same every time, so you do not have to use random numbers and you can just enter that number directly into the “go to” block. You can test is by double clicking the block. Fish cannot jump out the water sideways, so why don’t you make it look up when it is coming out the water… Find the Point in Direction block located in the Motion menu.