Introduction - GHI Electronics Web viewBrainPad – Scratch – Introduction. Page . 1. of ....

DSCRATCH

INTRODUCTION

BrainPad – Scratch – Introduction

Contents

Introduction.......................................................................................................................2

Overview.........................................................................................................................2

Guidelines.......................................................................................................................2

Setup and Installation........................................................................................................3

Scratch Gateway for .NET devices..................................................................................3

Scratch 2 Offline Editor...................................................................................................3

What is Scratch?.................................................................................................................5

Programming with Blocks..................................................................................................6

Controlling a Light Bulb....................................................................................................10

Controlling a Traffic Light.................................................................................................13

Directing Traffic................................................................................................................19

Exercise.........................................................................................................................26

What’s Next?....................................................................................................................27

Page 1 of 29


Introduction

The BrainPad circuit board is designed as a powerful educational tool that can be used to teach everyone from kids, to college students and professionals. Kids will start to learn programming using Visual Studio, one of the most widely used professional tools. College students and professionals that already know programming can use the BrainPad circuit board to learn about digital electronics and the connection between computing and the physical world.

Overview

Students will learn how to use Scratch to program the BrainPad.

Guidelines

Prerequisites: None Ages 12 and up PC setup with Scratch 2 Offline Editor and Scratch Gateway for .NET devices. Supplies: BrainPad, mikroBUS™ USB UART Click board

Page 2 of 29


Setup and Installation

Scratch Gateway for .NET devices

Please go to http://scratch4.net/Software for instructions on how to install and setup the Scratch Gateway for .NET devices and your BrainPad.

Note: Scratch Gateway for .NET devices is currently under development.

Scratch 2 Offline Editor

Please visit http://wiki.scratch.mit.edu/wiki/Scratch_2.0_Offline_Editor to install the Scratch 2 Offline editor.

Once everything is installed and setup, launch the Scratch 2 Offline editor. While holding SHIFT down, click File and then Import experimental HTTP extension as shown in Figure 1.

Figure 1 – Select the secret option called Import experimental HTTP extension.

Page 3 of 29

http://wiki.scratch.mit.edu/wiki/Scratch_2.0_Offline_Editor

http://scratch4.net/Software


Navigate to:

Windows 7o Local Disk (C:) > Users > Username > My Documents > Scratch4.Net

Windows 8/10o This PC > Documents > Scratch4.Net

Select the BrainPad.s2e file and click Open as shown in Figure 2.

Figure 2 – Open the BrainPad.s2e file (path shown is from Windows 7).

You’re now ready to start programming the BrainPad!

Page 4 of 29


What is Scratch?

Scratch is tool that allows people of all ages the ability to learn how to program. Learning to program is much like learning a new language. When people learn to read, write and speak a language, they’re able to express themselves and their ideas. This is the same goal when learning to program.

People have become better and better at interacting with technology with each generation, but that does not mean they can “read and write” in it so to speak. Scratch helps people start to learn to express themselves with technology. It also teaches them important strategies for designing projects and problem solving.

Most programming languages involve typing into an editor. This requires a deep understanding of the programming language and its structure. Scratch bypasses this process by letting students build programs using easy to understand blocks.

Blocks allow students to build up projects. Each block performs a task. These tasks can be stacked to perform a larger task. These color-coded blocks assist students in visualizing the flow and functionality of their project.

“Scratch is designed with learning and education in mind. A wide variety of educators have been supporting Scratch creators since 2007, in both formal and informal learning environments – K-12 classroom teachers, educational and computer science researchers, librarians, museum educators, and parents.” – https://scratch.mit.edu/educators/

Page 5 of 29

https://scratch.mit.edu/educators/


Programming with Blocks

Computers handle tasks by reading a program and processing it step by step. These programs are written in special languages known as code. The act of writing in these languages is referred to as programming (or coding). Learning to program takes time and dedication. Scratch simplifies the early stages of learning by using blocks instead of writing code. Helping you learn and understand the way a program is built.

We’ll begin by creating the classic “Hello World!” project. On the Scripts tab in the Events category, drag the [when (flag) clicked] block (Figure 3) and drop it into the script zone to the right.

Figure 3 – Add the [when (flag) clicked] block.

Page 6 of 29


Next, from the Looks category select the [Say <Hello!> for <2> secs] block and attach it below the [when (flag) clicked] block. Change the text to “Hello World!”.

Figure 4 – Add the [Say <Hello!>] block.

Now click the flag icon as circled in Figure 5. This will trigger the [when (flag) clicked] event and your project will run. Scratch will then say “Hello World!” for two seconds.

Figure 5 – The circled flag icon runs the project in the script zone.

Page 7 of 29


This classic project shows that when an event is triggered a task is completed. In this case, the event is the flag icon being clicked, which runs the project. Right now our project performs a simple task and only displays a message for a period of time. Going forward things will get more complex.

Congratulations on building and learning about your first project! Let’s keep going and see what we can do. How about we have him say “Hello!” while moving to the right.

Start by removing the previous [say <Hello World! for <2> secs] block by right-clicking the block and selecting the delete option. Next, go to the Motion category, select the [go to x: <0> y: <0>] block and attach it below the [when (flag) clicked] block. Make sure the x and y are set to zero. This will ensure Scratch always starts in the center.

From the Looks category we’ll use the [Say <Hello!>] block and attach it below the previous block. Finally, under the Motion category again, we’ll drag out [glide <1> secs to x: <0> y: <0>] and attach it. Change x from zero to 50. This will smoothly move Scratch 50 steps to the right. Your project should now look like Figure 6.

Figure 6 – This project has Scratch say “Hello!” while moving to the right.

Great! Now when we run the project (by clicking the flag icon) we see Scratch say “Hello!” while moving to the right.

Page 8 of 29


Let’s add a little more to finish our project. After Scratch moves 50 steps to the right, let’s wait one second and move back. This can be done by going into the Control category and attaching a [wait <1> secs] block. Next, inside the Motion category, drag out a [glide <1> secs to x: <0> y: <0>] block and attach it below the wait block as shown in Figure 7.

Figure 7 – This project makes Scratch say “Hello!” while moving right then left.

You are now done! Clicking the flag icon to run the project will make Scratch say “Hello!” while moving to the right and then to the left. What a happy cat!

Now that we’re more familiar with using the editor, we can start using it with the BrainPad to control even cooler things!

Page 9 of 29


Controlling a Light Bulb

Let’s recreate how a light switch can control a light bulb. In our case we don’t have a light switch on the BrainPad but we can use the left button to represent one. Inside the More Blocks category, select the [.Net Program] block and add it to the script zone. To control a light bulb, we need to use:

A conditional statement that says:

1. If the left button is pressed, turn the light bulb on.2. If no buttons are pressed, turn the light bulb off.

We’ll use an if-then-else statement to achieve this goal. In the Control category, drag the [forever] block and attach it to the [.Net Program] block. This allows the project to run continuously (forever) in a loop. Next drag and attach an [if_then_else_] block to the [forever] block as shown in Figure 8.

Figure 8 – Add the [forever] block and [if_then_else_] block.

Page 10 of 29


In the More Blocks category, drag the [button <left> pressed] block and drop it into the first slot of the [if_then_else_] block (Figure 9). Since this block is already set to check if the left button is pressed we don’t need to make any changes.

Figure 9 – Add the [button <left> pressed] block.

From the More Blocks category, drag the [turn bulb <off>] block and drop it into the second slot of the [if_then_else_] block (Figure 10). Change its state to <on>. This represents the first goal of our conditional statement.

Figure 10 – Add the [turn bulb <off>] block and set its state to <on>.

Page 11 of 29


Again, drag another [turn bulb <off>] block but this time drop it into the third slot of the [if_then_else_] block (Figure 11). Since its state is already <off> we don’t need to change it. This completes the second goal of our conditional statement.

Figure 11 – Add the [turn bulb <off>] block.

Now our project is complete! Pressing the left button down will turn the light on, and letting it go will turn it off as shown in Figure 12.

Figure 12 – To the left the bulb is off, to the right it’s on.

Now that we know how to control a light bulb, let’s trying controlling even more lights!

Page 12 of 29


Controlling a Traffic Light

Now it’s time to control a traffic light using buttons. Let’s remove the previous [.Net Program] block by right-clicking the block and selecting the delete option. Inside the More Blocks category, select the [.Net Program] block and re-add it to the script zone. To control a traffic light, we need to use:

A conditional statement that says:

1. If the up button is pressed, turn the red light on.2. If the left button is pressed, turn the yellow light on3. If the down button is pressed, turn the red light on.

We’ll use nested if-then-else statements to achieve this goal. In the Control category, drag the [forever] block and attach it to the [.Net Program] block. Next drag and attach an [if_then_] block inside the [forever] block as shown in Figure 13.

Figure 13 – Add the [forever] block and [if_then_else_] block.

Page 13 of 29


From the More Blocks category, drag the [button <left> pressed] block and drop it into the first slot of the [if_then_] block (Figure 14). Change the button to <up>.

Figure 14 – Add a [button <left> pressed] block. Change the button to <up>.

Under the More Blocks category, drag the [turn <red> traffic light <on>] block and place it inside the second slot of the [if_then_] block (Figure 15). That completes our first if-then statement and accomplishes the first goal of our conditional statement.

Figure 15 – Add a [turn <red> traffic light <on>] block.

Page 14 of 29


In the Control category, drag another [if_then_] block and place it beneath the first [if_then_] block as shown in Figure 16.

Figure 16 – Add a [if_then_] block.

Inside the More Blocks category, drag the [button <left> pressed] block and drop it into the first slot of the second [if_then_] block as shown in Figure 17.

Figure 17 – Add a [button <left> pressed] block.

Page 15 of 29


Next, drag the [turn <red> traffic light <on>] block and place it inside the second slot in the [if_then_] block (Figure 18). Change the color to <yellow>. This represents the second goal of our conditional statement.

Figure 18 – Add a [turn <red> traffic light <on>] block. Change its color to <yellow>.

In the Control category, drag an [if_then_] block and place it beneath the second [if_then_] block as shown in Figure 19.

Figure 19 – Add a [if_then_] block.

Page 16 of 29


Inside the More Blocks category, drag the [button <left> pressed] block and drop it into the first slot of the [if_then_] block (Figure 20). Change the button to <down>.

Figure 20 – Add a [button <left> pressed] block. Change the button to <down>.

Finally, drag another [turn <red> traffic light <on>] block and place it inside the second slot in the [if_then_] block (Figure 21). Change the color to <green>. This represents the third goal of our conditional statement.

Figure 21 – Add a [turn <red> traffic light <on>] block. Change the color to <green>.

Page 17 of 29


Press the up button to turn on the red light. Press the left button to turn on the yellow light and press the down button to turn on the green light as shown in Figure 22.

Figure 22 – Here we see all lights on after pressing up, left and down buttons.

Wait a second, what’s wrong with this project? Traffic lights can’t have all the lights on at the same time. That would be confusing. Let’s fix this issue so we can start directing traffic.

Page 18 of 29


Directing TrafficNow that we got the traffic lights to turn on we see there is a problem. As you press each button the lights stay on. To fix this, we need to turn off the other lights when a button is pressed.

Inside the More Blocks category, drag the [turn <red> traffic light <on>] block and place it the second slot in the [if_then_] block (Figure 23). Change the color to <yellow> and its state to <off>. Repeat this process for the green light.

Figure 23 – Add a [turn <red> traffic light <on>] block for both yellow and green. Their states should be set to <off>.

Now when we press the up button to turn the red light on, it also turns off the yellow and green lights.

Page 19 of 29


Repeat this process for the other buttons as shown in Figure 24.

Figure 24 – Add a [turn <red> traffic light <on>] block for both remaining buttons. Theese blocks’ color and states should be set appropriately.

Now when a button is pressed, the appropriate color is turned on and the others are turned off.

Next, we need a way to track the state of the traffic light. To do this, we’ll need to use a variable. A variable is a data item that holds a value. In our case, we will use it to hold the color of our traffic light.

Page 20 of 29


Click the Data category and press Make a Variable. Let’s name our variable “color” and click OK as shown in Figure 25.

Figure 25

Now that we have our “color” variable, we need to make each button press update its value. For example, when we press the up button, the color variable should be set to “red”.

Page 21 of 29


We can do this by dragging the [set <color> to <0>] block into each [if_then_] block and setting its value to the corresponding color we turn on as shown in Figure 26.

Figure 26 – Add a [set <colore> to <0>] block to each [if_then_] block and have them set the “color” variable to the corresponding color.

We’re now recording the state of the light! This allows us to control other things within our project. You might be thinking, “That’s fine, but what good is a traffic light if we don’t have anyone to direct?” Don’t worry, we’ll let you control the furball known as Scratch the Cat.

Page 22 of 29


We’re going to make Scratch the Cat move based on the color of the traffic light. Inside the Control category, drag and place the [if_then_] block at the bottom of the [forever] block. From the Operator category, drag a [_=_] block and put it inside the first slot of the [if_then_] block as shown in Figure 27.

Figure 27 – Add a [if_then_] block and inside it’s first slot put an [_=_] operator block.

Page 23 of 29


Now take a color variable and place it inside the first slot of the [_=_] block. Next, change the second slot by typing in “green”. After that, inside the Motion category, drag a [move <10> steps] block into the [if_then_] block’s second slot (Figure 28). Change the steps to <5>.

Figure 28 – Inside the operator block’s first slot, put the [color] variable, and in its second slot, the word “green”.

Page 24 of 29


Add another [if_then_] block and repeat the process for the color variable being “yellow”. Inside this new block change the [move <5> steps] to <2>. Finally, from the Motion category, place a [if on edge, bounce] block at the bottom of the [forever] block as shown in Figure 29.

Figure 29 – Add another [if_then_] block with an [_=_] operator block checking if [color] is “yellow”. Change the steps to <2>. Lastly, add a [if on edge, bounce] block.

Page 25 of 29


Now when the light is green, Scratch the Cat will move fast. When the light is yellow he will move slower and when you make it red he will stop moving completely as shown in Figure 30.

Figure 30 – Here C is saying he’s stopped because it’s a red light.

As you can see in Figure 30, Scratch the Cat is stopped.

Exercise

Wait a second, we never had him say anything! You’re right, we didn’t. In this bonus exercise, add blocks to have Scratch the Cat say when he’s walking, slowing down or stopped.

Page 26 of 29


What’s Next?

Today we learned how to control the light bulb and the traffic light using conditional statements and variables. These are just a few of the cool things BrainPad can do. Now that you have a general idea how to program using Scratch, try writing other projects that control a motor or read the temperature. Use your imagination!

While Scratch is a great learning tool, it’s not used when it comes to writing complex projects. That’s where languages like VB (Visual Basic) or C# (pronounced C-Sharp) take over. If you’re interested in learning about these languages, we recommend starting with our VB introduction course.

Page 27 of 29


GHIElectronics.com/support/brainpad

Page 28 of 29

https://www.ghielectronics.com/support/brainpad

Introduction - GHI Electronics Web viewBrainPad – Scratch – Introduction. Page . 1. of ....

Documents

Transcript of Introduction - GHI Electronics Web viewBrainPad – Scratch – Introduction. Page . 1. of ....