Scratch - Coder Pete | Home · Scratch • Browser based • Created at MIT • Creative Computing...

43
Scratch Creative Computing

Transcript of Scratch - Coder Pete | Home · Scratch • Browser based • Created at MIT • Creative Computing...

Page 1: Scratch - Coder Pete | Home · Scratch • Browser based • Created at MIT • Creative Computing – Using a tool to easily create a computer program. • Typically a drag-and-drop

Scratch Creative Computing

Page 2: Scratch - Coder Pete | Home · Scratch • Browser based • Created at MIT • Creative Computing – Using a tool to easily create a computer program. • Typically a drag-and-drop

INTRODUCTION TO SCRATCH Section 1

Page 3: Scratch - Coder Pete | Home · Scratch • Browser based • Created at MIT • Creative Computing – Using a tool to easily create a computer program. • Typically a drag-and-drop

Scratch • Browser based • Created at MIT • Creative Computing – Using a tool to easily create a computer

program. • Typically a drag-and-drop tool. • Emphasizes creativity instead of programming syntax

• The ease of use allows beginners to be creative while programming.

Page 4: Scratch - Coder Pete | Home · Scratch • Browser based • Created at MIT • Creative Computing – Using a tool to easily create a computer program. • Typically a drag-and-drop

Section 1 Objectives • By the end of this unit, students will:

• Understand the concept of computational creation, in the context of Scratch

• be able to imagine possibilities for their own Scratch-based computational creation

• become familiar with resources that support their computational creation

• Mr. Stoll’s account: sestoll99

Page 5: Scratch - Coder Pete | Home · Scratch • Browser based • Created at MIT • Creative Computing – Using a tool to easily create a computer program. • Typically a drag-and-drop

Scripts and Commands • Command – A statement that tells the computer what to do.

• In Scratch each command is called a “Block” • Other scripting languages (block = set of commands)

• Script - list of commands that are executed by a certain

program or scripting engine. • Scratch uses scripts • Python is a scripting language

Page 6: Scratch - Coder Pete | Home · Scratch • Browser based • Created at MIT • Creative Computing – Using a tool to easily create a computer program. • Typically a drag-and-drop

Sprite • Sprite - an image and its

location on the stage (screen).

• Three sprites on the stage (screen)

• The Parrot sprite is selected • Work with Parrot Scripts

• What are score and

birdCounter? (top of screen)

Page 7: Scratch - Coder Pete | Home · Scratch • Browser based • Created at MIT • Creative Computing – Using a tool to easily create a computer program. • Typically a drag-and-drop

The Scratch Interface

Stage

Sprites

Script Menus (Motion Menu Selected)

Motion Commands Script Window

Page 8: Scratch - Coder Pete | Home · Scratch • Browser based • Created at MIT • Creative Computing – Using a tool to easily create a computer program. • Typically a drag-and-drop

Creating Scripts (Lego Block Concept) • Create scripts by snapping blocks together

Part of the Motion Menu

Command blocks applied to the sprite

Part of the Sound Menu

Page 9: Scratch - Coder Pete | Home · Scratch • Browser based • Created at MIT • Creative Computing – Using a tool to easily create a computer program. • Typically a drag-and-drop

Dancing Cat Demonstration

• Control – Repeat 10 Repeat the following four statements 10 times:

• Motion - Move 10 steps

• Sound - Play drum

• Motion - Move 10 steps

• Sound - Play drum

Sample Script (move and play drum repeatedly)

Page 10: Scratch - Coder Pete | Home · Scratch • Browser based • Created at MIT • Creative Computing – Using a tool to easily create a computer program. • Typically a drag-and-drop

• Drag a set of blocks from the top • While dragging a block, everything below moves as well

• Separate blocks from the bottom • Recommended:

• The green flag event is useful for setting up your scene

• Programming commands are under the tab.

• Most script commands apply to a specific Sprite

Tips For Using Scratch

Sprite1 is selected

Page 11: Scratch - Coder Pete | Home · Scratch • Browser based • Created at MIT • Creative Computing – Using a tool to easily create a computer program. • Typically a drag-and-drop

Time to Explore Scratch 1. Sign-up for Scratch: http://scratch.mit.edu

• Use account information you can remember. • Forgetting this may hurt your grade in the future.

2. Play with Scratch • Try to make something surprising happen to a sprite. • Work together if desired!!! • Be ready to discuss what you have learned.

Page 12: Scratch - Coder Pete | Home · Scratch • Browser based • Created at MIT • Creative Computing – Using a tool to easily create a computer program. • Typically a drag-and-drop

TALKING SPRITES Section 2

Page 13: Scratch - Coder Pete | Home · Scratch • Browser based • Created at MIT • Creative Computing – Using a tool to easily create a computer program. • Typically a drag-and-drop

Making Sprites Talk

• Make sure you select the desired sprite first.

• The “when this sprite clicked” event is very useful

Page 14: Scratch - Coder Pete | Home · Scratch • Browser based • Created at MIT • Creative Computing – Using a tool to easily create a computer program. • Typically a drag-and-drop

Mr. Stoll’s Example (About Me)

Click Here to Review the Project in Scratch

Page 15: Scratch - Coder Pete | Home · Scratch • Browser based • Created at MIT • Creative Computing – Using a tool to easily create a computer program. • Typically a drag-and-drop

Create Your Own Project • Create your own (About Me) project • Make it more elaborate than mine. • It is due at the beginning of the next class period

• Advanced students:

• Make it way better than mine.

Page 16: Scratch - Coder Pete | Home · Scratch • Browser based • Created at MIT • Creative Computing – Using a tool to easily create a computer program. • Typically a drag-and-drop

About Me – Project Review • Review student projects with class:

• Ask for volunteers • Select some students randomly if necessary.

Page 17: Scratch - Coder Pete | Home · Scratch • Browser based • Created at MIT • Creative Computing – Using a tool to easily create a computer program. • Typically a drag-and-drop

ANIMATION – DANCE PARTY Section 3

Page 18: Scratch - Coder Pete | Home · Scratch • Browser based • Created at MIT • Creative Computing – Using a tool to easily create a computer program. • Typically a drag-and-drop

Dance Party Project • Dance Party - “a Scratch project in which sprites get down

with cool costumes and funky beats.” • ie. claptrap from Borderlands

• For the next three slides we will create a Dance Party Scene.

We will: • Define Sprite • Define Costume

• Different images for a given sprite. • Assemble code blocks so sprite dances when clicked.

Page 19: Scratch - Coder Pete | Home · Scratch • Browser based • Created at MIT • Creative Computing – Using a tool to easily create a computer program. • Typically a drag-and-drop

• Sprite - an image and its location on the screen.

• Games have been using them for decades. • Used to be hardware dependent.

• Sprite on Stage • Sprite definition

• Press the in the upper left

corner of the sprite definition to see details about the sprite.

Sprite

Page 20: Scratch - Coder Pete | Home · Scratch • Browser based • Created at MIT • Creative Computing – Using a tool to easily create a computer program. • Typically a drag-and-drop

What is a Costume

• A sprite may have many costumes. • Costumes are typically used for animation.

Page 21: Scratch - Coder Pete | Home · Scratch • Browser based • Created at MIT • Creative Computing – Using a tool to easily create a computer program. • Typically a drag-and-drop

Dancing Ballerina 1. Press choose sprite from library button 2. Select a sprite from the library and press the OK button. 3. Create the following script:

Page 22: Scratch - Coder Pete | Home · Scratch • Browser based • Created at MIT • Creative Computing – Using a tool to easily create a computer program. • Typically a drag-and-drop

Adding Music to Ballerina • Separate simultaneous notes into

separate block sets. • They run in parallel – At the same time,

when the ballerina is clicked.

• .4 secs is the same as .4 beats • Synchronize music and animation.

• Drum 4 is the symbol.

• It plays at the end of the animation

Page 23: Scratch - Coder Pete | Home · Scratch • Browser based • Created at MIT • Creative Computing – Using a tool to easily create a computer program. • Typically a drag-and-drop

Sprites and Costumes Review • What is the difference between a sprite and a sprite’s

costume? • When might you want to use a sprite? • When might you want to use a costume?

Page 24: Scratch - Coder Pete | Home · Scratch • Browser based • Created at MIT • Creative Computing – Using a tool to easily create a computer program. • Typically a drag-and-drop

Resetting Your Scene • Initialize – To assign starting values. • This is a set of code blocks for a

sprite. This block: 1. Executes when the green flag is pressed. 2. Moves the sprite to its starting point 3. Displays its initial costume (Picture1)

• There are several things you can

initialize in your scene. • Most of them are in the

and menus.

Page 25: Scratch - Coder Pete | Home · Scratch • Browser based • Created at MIT • Creative Computing – Using a tool to easily create a computer program. • Typically a drag-and-drop

Incremental • Incremental - increasing gradually by regular degrees or

additions.

• Always add and test small amounts of code at a time.

Page 26: Scratch - Coder Pete | Home · Scratch • Browser based • Created at MIT • Creative Computing – Using a tool to easily create a computer program. • Typically a drag-and-drop

Assignment: Dance Party • Dance party Assignment Requirements

1. Sprites / Costumes – Select from one of these two options: • Find a sprite (in Scratch or outside of Scratch) that has multiple

costumes. • Take an existing sprite and modify it to have different costumes.

2. Animate the sprite when the user clicks on it • Move the sprite and change its costume.

3. Play at least two notes each time the sprite changes costumes. • Notes to be played at the same time must be in separate sets of

blocks.

• Review P. 49 of your Scratch Guide

• Everyone must have a unique project

Page 27: Scratch - Coder Pete | Home · Scratch • Browser based • Created at MIT • Creative Computing – Using a tool to easily create a computer program. • Typically a drag-and-drop

GAMES Section 4

Page 28: Scratch - Coder Pete | Home · Scratch • Browser based • Created at MIT • Creative Computing – Using a tool to easily create a computer program. • Typically a drag-and-drop

Blocks for Games (Variables)

• Examples: • health; moveSpeed; ammo; defensePoints

happiness (Sims); lives (old school games)

• Score Variable

• Initializing the Score

• Incrementing the Score

• Display/Hide Score

• See PP. 65 – 66 For More Information

Page 29: Scratch - Coder Pete | Home · Scratch • Browser based • Created at MIT • Creative Computing – Using a tool to easily create a computer program. • Typically a drag-and-drop

Blocks for Games (Random)

• Very Useful: • Enemy appears in random place on screen. • Enemy starts with random # health points • Dice rolls for video Monopoly • Card drawn in a video card game

• Anybody Have an Example for us??: • Sims • Tetris • Mario Kart

Page 30: Scratch - Coder Pete | Home · Scratch • Browser based • Created at MIT • Creative Computing – Using a tool to easily create a computer program. • Typically a drag-and-drop

Blocks for Games (Visibility)

• The visibility of sprites

• Visible • Invisible

• See PP. 65 – 66 For More Information

Page 31: Scratch - Coder Pete | Home · Scratch • Browser based • Created at MIT • Creative Computing – Using a tool to easily create a computer program. • Typically a drag-and-drop

Blocks for Games (Timing)

• Timing Examples: • Consistent game speed same on slow and

fast computers • Change the image on the screen to display

the next frame of animation.

• See PP. 65 – 66 For More Information

Page 32: Scratch - Coder Pete | Home · Scratch • Browser based • Created at MIT • Creative Computing – Using a tool to easily create a computer program. • Typically a drag-and-drop

Blocks for Games (Events)

• Event - an action or occurrence detected by the program that may be handled by the program. • key press events – Code executes when

user clicks on the sprite.

• Initialization Event – Code that executes when program is starting to run.

Green Flag To Initialize Sprites and Variables

Page 33: Scratch - Coder Pete | Home · Scratch • Browser based • Created at MIT • Creative Computing – Using a tool to easily create a computer program. • Typically a drag-and-drop

Blocks for Games (Comparisons)

• The player must not get a point unless the Orange touches the Parrot without touching the Cat sprite.

• Don’t increase the birdSpeed if it is already moving at 15 or above.

• See PP. 65 – 66 For More Information

Page 34: Scratch - Coder Pete | Home · Scratch • Browser based • Created at MIT • Creative Computing – Using a tool to easily create a computer program. • Typically a drag-and-drop

Blocks for Games (Collision Detection)

• Collision Detection – Detecting when one sprite overlaps another sprite.

• If this sprite is touching specified sprite, edge, or mouse-pointer.

• If this sprite is touching a specific color • If a specified color on this sprite is touching

another color.

Page 35: Scratch - Coder Pete | Home · Scratch • Browser based • Created at MIT • Creative Computing – Using a tool to easily create a computer program. • Typically a drag-and-drop

Games – Assignment (Make a game) • Review P 65 - 66 (blocks for games and collision detection)

Page 36: Scratch - Coder Pete | Home · Scratch • Browser based • Created at MIT • Creative Computing – Using a tool to easily create a computer program. • Typically a drag-and-drop

Blocks for Games (Strings)

• I currently plan to wait to discuss strings until we start working with Python.

• See PP. 65 – 66 For More Information

Page 37: Scratch - Coder Pete | Home · Scratch • Browser based • Created at MIT • Creative Computing – Using a tool to easily create a computer program. • Typically a drag-and-drop

PROGRAMMING CONCEPTS Section 5

Page 38: Scratch - Coder Pete | Home · Scratch • Browser based • Created at MIT • Creative Computing – Using a tool to easily create a computer program. • Typically a drag-and-drop

PROGRAMMING CONCEPTS (How they relate to blocks) • Decisions - Allows the program to compare two or more

values. • Most programming languages use the "if" keyword.

• Loop – Repeat one or more commands until a condition is met.

• Variable - Stores a value to be used later in the program. • Random - • Event - an action or occurrence detected by the program that

may be handled by the program.

• Etc.

Page 39: Scratch - Coder Pete | Home · Scratch • Browser based • Created at MIT • Creative Computing – Using a tool to easily create a computer program. • Typically a drag-and-drop

Decision Structure Scratch

Python if mrStollsAge > 49: print (‘You are old’)

if playerHealth < 10:

moveSpeed = 3

Page 40: Scratch - Coder Pete | Home · Scratch • Browser based • Created at MIT • Creative Computing – Using a tool to easily create a computer program. • Typically a drag-and-drop

Sequential Structure Scratch

Python Print (‘Hello’) moveSpeed = 3

xPosition = xPosition + 10

yPosition = yPosition + 10

Page 41: Scratch - Coder Pete | Home · Scratch • Browser based • Created at MIT • Creative Computing – Using a tool to easily create a computer program. • Typically a drag-and-drop

Loops Scratch

Python while guessesTaken < 6:

Command

Command

etc. while True:

command

command

etc.

Page 42: Scratch - Coder Pete | Home · Scratch • Browser based • Created at MIT • Creative Computing – Using a tool to easily create a computer program. • Typically a drag-and-drop

Variables Scratch

Python Score = 17

birdCounter = 30

birdSpeed = 5

Page 43: Scratch - Coder Pete | Home · Scratch • Browser based • Created at MIT • Creative Computing – Using a tool to easily create a computer program. • Typically a drag-and-drop

Random Numbers Scratch

Python random.randint(1, 10)