An intro to programming concepts with Scratch Quick

  • Slides: 43
Download presentation
An intro to programming concepts with Scratch Quick intro for college citizens. George Stockman

An intro to programming concepts with Scratch Quick intro for college citizens. George Stockman MSU CSE ITEC Winter 2010 1

A 10 -minute PR clip ITEC Winter 2010 2

A 10 -minute PR clip ITEC Winter 2010 2

What can we do with Scratch? n n Learn some computing concepts. Learn some

What can we do with Scratch? n n Learn some computing concepts. Learn some practical algorithms. Have fun with Scratch creating stories, games, art. We are teaching Scratch after school to middle school kids with the goal of increasing interest in STEM. ITEC Winter 2010 3

Start scratch and let’s go! n n Click on the cat icon If not

Start scratch and let’s go! n n Click on the cat icon If not on desktop, download from www. scratch. mit. edu Scratch programming environment comes up quickly We will first do simple ops ITEC Winter 2010 4

Scratch environment n n n Stage is at upper right (where actors act and

Scratch environment n n n Stage is at upper right (where actors act and information is displayed) Sprite is another name for actor (object). Instruction menus/panel at left (instructions for the actors) A script is another name for program or method; a script tells the actor what to do. Programming panel in center; here is where we construct scripts for the sprites (Sprites are objects; their scripts are methods or behaviors. ) ITEC Winter 2010 5

We start with the cat sprite We will learn to use other sprites and

We start with the cat sprite We will learn to use other sprites and many sprites LATER. Now we use the cat as our only actor. ITEC Winter 2010 6

The LOOKS menu Has operations for setting the color, size, and visibility of a

The LOOKS menu Has operations for setting the color, size, and visibility of a sprite. Constumes will be used LATER ITEC Winter 2010 7

The “hello” script (program) n n n Double click on the “say hello” lego

The “hello” script (program) n n n Double click on the “say hello” lego block Check your sprite behavior at the right Then double click “say hello for 2 secs” Your very first Scratch program! ITEC Winter 2010 8

Try some other looks operations (double click items) n n n n Change color

Try some other looks operations (double click items) n n n n Change color effect by 25 again Hide Show Change size by 10 again Set size to 100% ITEC Winter 2010 9

Let’s write a script to n n n Say “hello” for 2 seconds Then

Let’s write a script to n n n Say “hello” for 2 seconds Then change color by 25 Then think “Hmm. . ” for 4 seconds Then change color by 75 Then change size by 200 Drag the instructions from the menu to the center panel. Connect them into a single block. Edit the parameters to get the numbers we want. ITEC Winter 2010 10

Our script (program) ITEC Winter 2010 11

Our script (program) ITEC Winter 2010 11

The WAIT instruction n is needed to slow down the acting so we can

The WAIT instruction n is needed to slow down the acting so we can see or hear it properly (computers are too fast sometimes) Get the wait instruction from the CONTROL menu. Please ignore the other menu options at this time. Insert a wait in our looks script ITEC Winter 2010 12

3 second pause between changing color and size ITEC Winter 2010 13

3 second pause between changing color and size ITEC Winter 2010 13

The MOTION menu How to locate and orient a sprite; position and angle; moving

The MOTION menu How to locate and orient a sprite; position and angle; moving a sprite ITEC Winter 2010 14

Position on the stage n n n Drag your cat around and note its

Position on the stage n n n Drag your cat around and note its x-y position. Using the Looks menu, shrink our cat to 25%. Click on the Motion menu. Click to check the box for xposition and yposition ITEC Winter 2010 15

Other instructions n n goto x, y glide to x, y Move N steps

Other instructions n n goto x, y glide to x, y Move N steps Set direction ITEC Winter 2010 16

The “glide-to” instruction n n Drag the “glide-to” instruction into your script panel. Edit

The “glide-to” instruction n n Drag the “glide-to” instruction into your script panel. Edit in some coordinate values and double click to see where your sprites goes. ITEC Winter 2010 17

The SENSING menu Getting information from the user or some other machine ITEC Winter

The SENSING menu Getting information from the user or some other machine ITEC Winter 2010 18

Use the SENSING menu 1) Ask the user for age; 2) user types in

Use the SENSING menu 1) Ask the user for age; 2) user types in age; 2) 3) result stored in “answer” ITEC Winter 2010 19

User types “ 13” and the script stores the answer “answer” is a Special

User types “ 13” and the script stores the answer “answer” is a Special Scratch variable ITEC Winter 2010 20

OUTPUT: Giving the user information with say answer Say is in Looks menu; drag

OUTPUT: Giving the user information with say answer Say is in Looks menu; drag “answer” from Sensing menu; click ITEC Winter 2010 21

Making an “age variable” 1) Click Variables menu; 2) click “Make a variable” 3)

Making an “age variable” 1) Click Variables menu; 2) click “Make a variable” 3) Type in “age” and click OK Do you want to display for all sprites or just one? ITEC Winter 2010 22

We have an “age variable” Operations for “age” Displaying variable “age” ITEC Winter 2010

We have an “age variable” Operations for “age” Displaying variable “age” ITEC Winter 2010 23

We can join text and a number to say things From Looks From Operators

We can join text and a number to say things From Looks From Operators From Sensing Make the join Build this instruction from the parts above it. ITEC Winter 2010 24

Storing a value in a variable; then saying it to the user 1) Set

Storing a value in a variable; then saying it to the user 1) Set from Variables menu; 2) Say from Looks menu; 3) Join from the Operators menu joins your text with the “answer” ITEC Winter 2010 25

A first “program” for 6 th grade The variable V now stores the computed

A first “program” for 6 th grade The variable V now stores the computed average of A and B ITEC Winter 2010 26

Changing costumes Another way to change the appearance of a sprite. ITEC Winter 2010

Changing costumes Another way to change the appearance of a sprite. ITEC Winter 2010 27

Making a new costume 1) Get bat 2 -a sprite from the “sprite box”.

Making a new costume 1) Get bat 2 -a sprite from the “sprite box”. 2) Click on sprite 3) Click on “Costumes” 4) Click on “Import” 5) Now get bat-2 b sprite from the sprite box ITEC Winter 2010 28

Use a loop to make the bat fly! 1) When and repeat from Control

Use a loop to make the bat fly! 1) When and repeat from Control menu and 2) next costume from Looks menu. ITEC Winter 2010 29

Changing coordinates n n n We can randomly set the location of the bat

Changing coordinates n n n We can randomly set the location of the bat so it will “flutter”. Set X to a random number Set Y to a random number Move the bat to location (X, Y) Of course, the bat should remain on stage! ITEC Winter 2010 30

Using pick random Click the stop sign at the stage upper right to stop

Using pick random Click the stop sign at the stage upper right to stop the forever loop. Do we need a wait in the loop? Try it to see the change in flying. ITEC Winter 2010 31

Multiple interactive bat flight ITEC Winter 2010 32

Multiple interactive bat flight ITEC Winter 2010 32

Adding a background n n Click on the Stage icon at lower right Click

Adding a background n n Click on the Stage icon at lower right Click on Backgrounds n Click on bat icon (Sprite 1) Click on n FLY AGAIN! n Scripts ITEC Winter 2010 33

Controlling the bat’s direction n n n Let’s create multiple scripts. Click space bar

Controlling the bat’s direction n n n Let’s create multiple scripts. Click space bar for random moves Click right arrow to move right Click left arrow to move left The bat will behave differently depending upon which key is typed! (So, could a gamer catch the bat? ) ITEC Winter 2010 34

On to multimedia, games, stories Detecting events; sending messages; using music and audio; ITEC

On to multimedia, games, stories Detecting events; sending messages; using music and audio; ITEC Winter 2010 35

See stock example: Mad Lib Explore the available examples; Mad Lib under stories; Study

See stock example: Mad Lib Explore the available examples; Mad Lib under stories; Study message sending; ITEC Winter 2010 36

Study Break Dance Music and dance example; Messaging; Use of stock music and costumes

Study Break Dance Music and dance example; Messaging; Use of stock music and costumes ITEC Winter 2010 37

Digitizing your own audio Use din example ITEC Winter 2010 38

Digitizing your own audio Use din example ITEC Winter 2010 38

Composing with drum beats ITEC Winter 2010 39

Composing with drum beats ITEC Winter 2010 39

ITEC Winter 2010 40

ITEC Winter 2010 40

Jodi jumps on the drum Story teller script Jodi’s script ITEC Winter 2010 41

Jodi jumps on the drum Story teller script Jodi’s script ITEC Winter 2010 41

Recording from a mike (or an i. Pod or other music player) 1. Plug

Recording from a mike (or an i. Pod or other music player) 1. Plug in microphone 2. Pick the speaker sprite 3. Click “Sounds” 4. Click “Record” 5. Click red button and speak 6. Click square button to stop 7. Click triangle to hear it 8. Click “OK” if it’s OK 9. Use name of sound in a play-sound instruction ITEC Winter 2010 42

Where does all this lead? Definitely engaging for grades 6, 7, 8. Does it

Where does all this lead? Definitely engaging for grades 6, 7, 8. Does it increase STEM interest of our kids? Does it motivate college computing classes? Does Scratch make a smarter Lego bot? ITEC Winter 2010 43