Learning Scratch

 

Learn how to Program in Scratch

Adults - Beginner Program

 

 

 

Introduction

Welcome

What is your name?

 

 

What would you like to learn in this course?

 

 

What do you think programming is?

What is coding?

 

Programming is giving a computer a set of step by step instructions for it to follow to complete a task

The instructions should be:

  • Detailed
  • Accurate
  • In the correct sequence (order)

The instructions are written in a programming language:

  • Java
  • C++
  • Python,
  • Scratch


Programming allows us to create many different applications on our phones, tablets and computers that power the world

Where do we see programming?

  • Mobile Phones
  • Medical Equipment
  • Self Driving Cars
  • Tablets
  • Desktops
  • Watches
  • Washing Machines
  • Robots
  • Smart TVs

Why do we need to know about coding?

  • Understand the digital world around us
  • Be able to interact with technology staff
  • Use technology to improve our day to day efficiency 
  • Automate tasks at work
  • Learn computational thinking and improve problem solving
  • Improve skillset for the future
  • Build your own technology solutions 

With code you can create anything that is in your imagination

  • Create your own webpages
  • Build your own mobile applications 
  • Program is a great skill to have

What does a computer know?

  • As programmers we have the intelligence 
  • It's our responsibility to give the computer the right instructions
    • Detailed,
    • Accurate 
    • Right Sequence

HOW WOULD A COMPUTER MAKE A SANDWICH ??



Think about what instructions you would give it

 

Scratch Programming

What is Scratch?

Scratch

  • Scratch is a graphical programming language
  • Drag and Drop Commands
  • Learning the Interface below

Setup Scratch Account

Setting up Scratch

Step 1

  • Username: firstname_learn2code
  • Password: learn2code
  • Do not forget password!!

Step 2

  • Enter in birth month and year
  • Gender
  • Country

Step 3

  • Email Address
  • Do you want to receive info from Scratch

Complete

  • Check email account
  • Confirm the setup

Moving The Cat

Create a new project

  • Click on 'Create' in the top menu bar


Name your project

  • Top left hand side of screen
  • 'Learning the Scratch Commands'

Sprite / Character

  • Cat Sprite
  • Default Sprite when a project starts

Move the Cat Sprite Forward

  • move 10 steps
  • Double Click on the command to make the character move 10 steps
  • Try this out a few times

Using a repeat loop

  • Moving 10 steps - 10 times
  • Try this out a few times
  • What happens when the cat gets to the edge of the screen?

Edge of the Screen

  • When it touches the edge of the screen we need to turn the character around
  • Do not turn upside down

Try these:

  • Change 'move 10 steps' to 5 steps or 15 steps
  • Change 'repeat 10' to 5 or 20
  • Try 'rotation style' 'don't rotate' & 'all around' - what do they do?

Making Sounds & Adding Events

Meow

  • When the cat is clicked make a 'Meow sound'

Adding An Event

  • An event waits for an action to happen (wait for the cat to be pressed)
  • Then runs the code under it
  • Scratch is an event based programming language

When 'Green Flag' Pressed

  • Place it on top of the code what makes the cat move

Set a starting position for the Sprite

  • Cat will start the program in the middle of the screen
  • x = 0, y = 0

Speech

Speech

  • When the space key is pressed
  • For 2 seconds
  • Try a longer or shorter time

Changing Colours & Effects

Change Colour

  • Add this block after the speech command
  • Try changing the colour effect by 5, then 60 and see the difference

Clearing the Graphic Effects

  • Part of the setup or initialisation 
  • Add to the 'Green Flag' is pressed event

Set the Backdrop

Four Methods

  • Scratch library
  • Draw your own
  • From your computer files
  • Take a picture directly

Setting the Backdrop

  • Select 'Stage 2' from the Scratch library of backdrops
  • Now let's make some changes

Animate a new Sprite

Create a new sprite

  • Scratch library
  • Draw your own
  • Select from computer files
  • Take a picture from webcam

Select from Scratch Library

  • Select 'Bat 1'
  • Look at Costumes Tab

Animation

  • Works by flipping very quickly between still images
  • Switch Costumes to move between 2 still images on the character REPEATEDLY

Try this code

  • Can you explain what the code does
  • We need to slow the flapping down a bit
    • Use a 'wait' block (control) 
    • Where can you put it? 
    • What wait value will you use? 

Adding Wait

  • After the 'next costume' command

Sharing Projects

Check on the 'Share' Button

  • Top Right hand corner

What have we learnt?

 

What did we do Scratch Instructions

Move A Character

  • move 10 step
  • Turn around at an edge
  • Rotate left-right

Loops

  • repeat instructions over and over again

Sounds

Events

  • Wait for an action to occur 
  • Run the code under the event
Speech

Change the colour 

  • Command contains all the graphic effects
  • Remember to clear graphics effect on setup

Add a backdrop

Add a sprite

Animate a sprite

CAT CODE

BAT CODE

Project: About Myself

Tell Me About Yourself

Project Requirements:

1 Select a backdrop
2 Choose a sprite to represent yourself (see that it has more than 1 costume) 
3 When the sprite is clicked - It tells me one thing you like about coding
4 When the 'a' key is pressed - animate the sprite
5 When the 'm' key is pressed - move the sprite and create a dance 
6 Add a friend sprite
7 When the friend sprite is pressed - chose a graphic effect to apply to it

Remember:

  • Make sure you are logged into Scratch with your account
  • Give your project a name
  • Save it regularly

 

Maze Project

Build A Maze

THE MAZE

Co-Ordinates & Movement

Center of the Stage: x =0, y= 0

 

Positive x values  - as we go right

Negative x values - as we go left

 

Positive y values - as we go up

Negative y values - as we do down 

 

Directions & Examples

Point in direction command


Examples

Movement Scratch

Point Right & Move Right

Point Left & Move Left
Point Left & Move Down
Point Right & Move Up

 

 

 

Which command will move 10 steps down the screen?

Which command will move 10 steps left ?

Which command will point left and move 10 steps left

What do these commands do?

  • Point left AND go to x position -10
  • Point left AND move down 10 steps
  • Point left AND move left 10 steps
  • Point left AND move right 10 steps
  • Point right AND move right 10 steps

Maze Instructions

Setup & Moving the Main Character

Step 1: Setup the backdrop

 

 

Step 2: Setup the main sprite

 

 

Step 3: Move the main sprite

 

Notes:

  • Add a forever loop around these 4 commands
  • Add a 'Green Flag' event at the top of this code

Conditions

  • Computer checks a statement
  • If its true it does a task
  • Otherwise does nothing

                          

Example in the real world:

  • IF it is raining THEN take an umbrella
  • IF you pass your exam THEN you get a holiday
  • IF you leave home at 7am THEN you will get to work on time

                        

If condition block in code:

  • Check the condition after the if keyword
  • If the condition is true, then run the code that is inside the if statement
  • Blocks with pointed edges go into the if condition block

                          


Example 1:

  • If the score variable is equal to the number 10 then run the code inside the block 

                     

Example 2:

  • If the sprite is touching the colour blue then send the sprite back to position x = 0 and y = 0

Wall Obstacles & Exit Door

Step 1: Hitting a Wall

 

Notes:

  • Add this at the end of the code in Step 2 (setup of the main character)

 

Step 2: Touching the Exit

 

Level 2 Setup

Bat Obstacle

 

What does the bat need to do?

0 Add the 'Bat1' sprite to the project
1 Set an initial position to start
2 Point in a direction
3 Set the rotation style
4 Add a Loop: For the code to move and animate the bat
5        Move: move () steps
 6          At at Edge: Turn around
7         Animate: next costume
8         Slow down: wait()

 

 

 

 

 

 

 

 

 

 

 

 

Solution

 

Moving Platform

 

What does the platform need to do?

0 Draw the platform sprite using a vector rectangle
1 Set an initial position to start
2 Point in a direction
3 Add a Loop: For the code to move and platform continously
4        Move: glide to new location
5         Move: glide back to the starting location

 

 

 

 

 

 

 

 

 

Solution

 

Ending Condition

Instructions

  • Create a new backdrop and name it 'Congratulations'
  • When the main character touches the exit colour (level 2) switch backdrop to 'Congratulations'
  • Play a sound (e.g. cheers)

 

Bonus

  • Main character does a short dance (use animations) when the backdrop changes to 'Congratulations'

 

                                    

                                   

Solutions

 

Summary

What did we learn?

  • Directions
  • Conditions

Checkpoint

What is computer programming?

  • A robot
  • Giving a computer detailed instructions
  • I don't know
  • Computer hardware

What is an event?

  • An events waits for an action to occur
  • An event is something that happens over and over again
  • An event is any green coloured command in Scratch
  • An event is a detailed instruction to the computer

What are 2 types of loops we have seen in Scratch?

  • An over and over loop
  • A repeat loop
  • A forever loop
  • A 5 times only loop

How do i move a character FORWARD?

Drawing Shapes

Drawing a Square

 

Drawing Triangles & Patterns

Notes:

  • Can you reuse some of the code we have already written?

 

 

Variables

 

 

Making the code work for any shape

Duplicate the square code 

  • We are going to modify this to use a variable 
  • Change the event to when 'space key' is pressed

Create a variable

  • sides
  • set sides to 4
  • calculate turn  degrees = 360/sides
  • 90 degrees

Change the value of sides

  • Check the code draws any sided shape you want

What pattern does this code create?

Summary

Learnings

  • How to use the Pen commands
  • Recognising patterns in code
  • Use loops instead of writing the same code many times
  • Variables
    • Placeholder for missing information
    • Stores the data in Scratch's memory
    • The data be changed at any time 

Algorithm

Algorithmn

Making a cup of tea

 

Inputs:

 

Process:

 

Output:

Algorithm:

Photo Editor

Using effects

Photo Editor Project


Select a group of photos 

Apply different graphic effects to them

Use broadcasting to send messages between sprites


                                                


                                            



                                            


Broadcasting - Sending Messages

 

 

Let's see that in action

  • Click on Cat
  • Sends out a message 'spin'
  • Crab receives message
  • It runs some code

Set the scene

Create the buttons

 

 

 

 

Flip through photos

Adding Stamps

Stamp

  • Show when the 's' key is pressed
  • Follow the mouse pointer and stamp
  • Stop when mouse button is pressed

Cleanup Screen

  • Clear & Hide at Startup or when the 'c' key is pressed

Try this: Rainbow Stamp

  • When 'r' key is pressed 
  • Follow the mouse pointer and stamp
  • Stop when mouse button is pressed

Summary

What did we learn?

  • Broadcasting: Sending messages from one sprite to the rest of the program
  • Importing pictures into Scratch 
  • Repeat until loop
  • How to get a character to follow the mouse pointer
  • Stamping using the pen

Ping Pong

Ping Pong Game

We are going to design the game with what we know so far

The questions to think about are:

  • How many sprites will this program use?
  • What will each sprite do?
  • What coding concepts will we be using?

 

Breakdown the game into steps

Ball

Background & paddle

Ball bounces off paddle

 

Randomness

Creates unpredictability - Important concept used in many different games

 

  • Monopoly: Rolling a dice - Random number each time
  • Pokemon: Occur randomly and don't know where they will appear
  • Video Games: Random things happen, no matter how many times you play the game

 

Add sound and colour

 

End game condition

 

Extension

Extension Exercies

  • Adding a 'score' variable
  • Increase the score by 1 every time the paddle catches the ball
  • If score reaches 10 then switch to a 'You Win' backdrop

Summary

Ping Pong

  • Step by step design
  • Loops
  • Conditions
  • Randomness
  • Variables
BALL CODE PADDLE CODE

 

Frogger

Frogger

Mini Project

 

  • Break it program down into steps

  • Use all our knowledge we have built up

Planning our project

Steps:

Write down more detail for each step here

  • Setting up the backdrop 
  • Define the sprites required
  • What will each sprite do?
  • What is the flow of the program? 

Setup Background

  • Draw it 
  • Get clipart from the internet and load it into Scratch

The Program

 

The Sprites

Frog:

  • Initially starts in the green area
  • Moves left,right,up,down with the arrow keys
  • Objective: collect all the letters

 

Cars:

  • Take a lane each and travel up and down at different speed

 

Letters:

  • Set the position in the yellow area when the program starts

 

Variables:

  • Lives: Set to 3

 

Program Flow:

  • If the Frog hits a car it goes back to the start and the the lives are reduced by 1
  • If the Frog hits the blue barriers in the yellow area - it goes back to the start
  • If the lives go to 0 you lose the game - create a losing backdrop
  • Add some creativity into the flow using sounds and animations

 

Bonus:

  • When the Frog collects all 4 letters and has more than 0 lives then you win the game
  • Have a Winning backdrop 

 

Solution - Frog

 

1. Setup and moving around the screen

 

 

2. Hitting the Cars or the Blue Barrier

 

3. Losing & Winning Conditions

 

Solution - Cars

Red Car

 

Yellow Car

 

Solution - Letters

Letters

 

Summary

Putting it all together with the basic programming principles

  • Designing the program by breaking it down step by step 
  • Backdrop & sprites
  • Initialisation & program flow 
  • Testing each step
  • Incremental development

Re-mixing Projects

Scratch Re-mixing

Scratch

  • Over 12 million users 
  • Over 21 million shared projects

Search for Projects

  • Try 'maze'
  • Click on a project
  • Read the Instructions/Notes
  • Run it with 'Green Flag'
  • 'See inside' to view the code


Re-mix: Paint with Gobo

  • Search 'Paint with Gobo'
  • By 'Scratchteam'
  • Click on it
  • Try it Out
  • See Inside

Remix

  • See project name has remix added to it 
  • Start drawing when 'd' is pressed
  • Stop drawing when 's' is pressed
  • Add one of your own changes to make it unique!

Coding Knowledge

Algorithmn

Making a cup of tea

 

Inputs:

 

Process:

 

Output:

Algorithm:

Scratch Co-Ordinates

Center of the Stage: x =0, y= 0

 

Positive x values  - as we go right

Negative x values - as we go left

 

Positive y values - as we go up

Negative y values - as we do down 

 

Scratch Plane

Directions


Events

Events

  • Wait for an action to occur 
  • Actions include:

 

Loops

Variables

 

 

 

 

 

 

Conditions

  • Computer checks a statement
  • If its true it does a task
  • Otherwise does nothing

                          

Example in the real world:

  • IF it is raining THEN take an umbrella
  • IF you pass your exam THEN you get a holiday
  • IF you leave home at 7am THEN you will get to work on time

                        

If condition block in code:

  • Check the condition after the if keyword
  • If the condition is true, then run the code that is inside the if statement
  • Blocks with pointed edges go into the if condition block

                          


Example 1:

  • If the score variable is equal to the number 10 then run the code inside the block 

                     

Example 2:

  • If the sprite is touching the colour blue then send the sprite back to position x = 0 and y = 0

Broadcasting - Sending Messages

 

Let's see that in action

  • Click on Cat
  • Sends out a message 'spin'
  • Crab receives message
  • It runs some code

Randomness

Creates unpredictability - Important concept used in many different games

 

  • Monopoly: Rolling a dice - Random number each time
  • Pokemon: Occur randomly and don't know where they will appear
  • Video Games: Random things happen, no matter how many times you play the game

 

Summary

Day 1

Overview of programming

  • What it is 
  • Why we should know about it
  • Where we see it in our day to day lives
  • Continuing to expand in our world

Scratch

  • Event based programming 
  • Learned how to use the program
  • Created  a maze

Computing Concepts

  • Loops
  • Events
  • Sequences
  • Conditions

Day 2

Drawing

  • Using the Pen
  • Creating Shapes
  • Using Loops
  • Variables

Photo Editor

  • Broadcasting 
  • Sending messages between sprites

Ping Pong

  • Putting it all together in a simple game
  • Randomness