An intro to Scratch
Notes and Tasks for ITEC-I5 Camp
Leaving lots of exploration for the future.
ITEC-I5 Scratch Aug 2009
1
What are our goals?





Learn some computing concepts.
Use Octave as computing tool.
Use Scratch as computing and
multimedia tool.
Have fun with Scratch creating stories,
games, art.
Learn some computing concepts.
ITEC-I5 Scratch Aug 2009
2
Who computes?








Scientists
Engineers
Businessmen
Social scientists
Artists
FBI agents
Brain surgeons
Grandkids
ITEC-I5 Scratch Aug 2009
3
Monday concepts (20 min)
What is an algorithm?
An algorithm for an average and min
An algorithm for sorting
ITEC-I5 Scratch Aug 2009
4
Algorithm for computing the
average of two numbers




Let the first number be A; say A=12
And the second number be B; say B=15
To compute the average _____________
So the average of 12 and 15 = ________
ITEC-I5 Scratch Aug 2009
5
What algorithm for the average
age of two people?




Input this
Do precisely this
Do precisely that
Output what
12
15
ITEC-I5 Scratch Aug 2009
6
problem: finding min






Person B is the “ref” watching A.
Person A has list of numbered cards, but
cannot look at all the numbers.
A can look at 2 numbers at a time only
-- one card in each hand.
A must find the min of all cards.
Exchange roles, with A the “ref” and B “the
player”.
HOW TO ALWAYS FIND THE MIN?
ITEC-I5 Scratch Aug 2009
7
Problem: team finding the min






Person A can look at no numbers!
No numbers can be seen by A, ever!
Person B can look at only two numbers on
cards given by person A.
Person B gives back to A first the card with
the smaller number (if numbers are = then it
doesn’t matter which is given first)
Person A must find the min and show it to the
instructor WITHOUT EVER SEEING IT
A and B should switch roles and repeat.
ITEC-I5 Scratch Aug 2009
8
Problem: how to sort?
Use set of cards for each team.
How can A sort using B as
comparer?
ITEC-I5 Scratch Aug 2009
9
Sorting two-person game





This is a 2-person exercise.
To solve the sorting puzzle, person A must form an
ordered list of cards, which the instructor will check
for order (this is the OUTPUT).
Person B can only compare two numbers by seeing
the numbers. Person B gives A the smaller number
card first (precise operations).
Person A can only ask Person B which of two cards
has the smaller number. Person A never ever looks at
any numbers.
To solve the sorting puzzle, person A must start from
an unordered list of cards (this is the INPUT).
ITEC-I5 Scratch Aug 2009
10
Sorting by selecting minimum




Spread out list of number cards
31, 22, 13, 32, 11, 21, 23, 33, 12
Select the minimum and begin a new list
11
Select the min of what’s left and add it to the
end of the new list. 11, 12,
Repeat this process until the original list is
empty and the new list has all the cards.
11, 12, 13, 21, 22, 23, 31, 32, 33
ITEC-I5 Scratch Aug 2009
11
Problem: what is the average age
of our class?


How do we define this? ..compute this?
An algorithm computes some
output
from the given input
using precise steps
that a machine can follow
ITEC-I5 Scratch Aug 2009
12
Students use Octave (10 min)
Verify the work and problem
solutions as below [while the
instructor leads].
ITEC-I5 Scratch Aug 2009
13
Compute the average of two
numbers using Octave




sum = 12 + 15
sum = 27
average = sum/2
average = 13.500


sum is a variable;
set its value to
12+15
average is another
variable; set its
value to the value of
sum divided by 2
ITEC-I5 Scratch Aug 2009
14
Octave has many useful ops



It can operate on numbers -- +, /, sqrt
It can operate on lists of numbers – min,
max, length, mean
Use Octave as needed in camp and after!
ITEC-I5 Scratch Aug 2009
15
gKids = 10

13
11
12
13
>> length(gKids)

ans = 5

>> sum(gKids)
You can use the
ages of the actual
group present.

ans = 59

>> avgAge =
sum(gKids)/length(gKids)

avgAge = 11.8000
ITEC-I5 Scratch Aug 2009
Precise steps to
compute the
output from the
input.
The input is the
list of ages; the
output is the
average of all the
ages in the list.
16
sort a list into order

>> gKids

gKids = 10
13

>> sort(gKids)

ans = 10

>> min(gKids)

ans = 10

>> max(gKids)

ans = 13

>>
13
11
11
12
What algorithm does
MATLAB use to sort the
list?
12
13
13
What algorithm finds
the min?
What algorithm finds
the max?
ITEC-I5 Scratch Aug 2009
17
There are MANY sorting
algorithms.
Recursively selecting the min is a BAD algorithm
when the list is big. Computer scientists know
many different algorithms, some good for small
and some good for big lists.
ITEC-I5 Scratch Aug 2009
18
Start scratch and let’s go!
(90 min)




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-I5 Scratch Aug 2009
19
Goals for Scratch




Learn about objects and behavior
Programming motion and sound
Programming user interaction
Creating your own story, game,
entertainment piece, or simulation
(starting Wednesday)
ITEC-I5 Scratch Aug 2009
20
PREFACE


These slides are intended to be used in an
active lab demo and discussion and are
therefore not complete by themselves.
Scratch has a nice facility for working with
sounds; however, during the intro only the
instructor’s computer should have speakers.
When students get to individual work later,
they can use headsets and microphones.
ITEC-I5 Scratch Aug 2009
21
Simple ops first




Sprites are objects
We operate on their color, size, position
We move them
We have them say things
ITEC-I5 Scratch Aug 2009
22
Click on the
“Looks”
button at
the top left.
ITEC-I5 Scratch Aug 2009
23
Major components




At right: the stage with sprite[s] or
objects or actors
At left: operations and attributes for the
sprites
Center: scripts or program[s] for the
behavior[s] of the sprites
Your sprites are actors that you direct
with your scripts
ITEC-I5 Scratch Aug 2009
24
The “hello” script



Can do it in 57 languages – java, C++,
… Scratch
Easy in Scratch: select “Looks”
operations and drag the “hello operation”
onto your center panel.
Then double click on this “lego block”:
check your sprite behavior at the right
Your very first Scratch program!
ITEC-I5 Scratch Aug 2009
25
Make the cat 50% larger
1. Select “Looks” operations
2. Drag the “change size” operator into your
script
3. Click and edit for a 50% change (increase)
4. Double click your one operation script
5. Did your cat sprite get 50% bigger?
ITEC-I5 Scratch Aug 2009
26
Putting a sprite in a location





Motion ops
Go to x , y
Set x to
Set y to
Glide to
X is +
X is –
Y is +
Y is +
Origin is (0, 0)
X is –
X is +
Y is -
Y is -
ITEC-I5 Scratch Aug 2009
27
Your sprite’s “attitude”
Try a “move op” to see changes.
Try “rotation ops” as well.
Choose “Motion” ops
Click on “attitude variables”
ITEC-I5 Scratch Aug 2009
28
Locating your sprite
Interesting task:
make your own
“glide to” operation
and have your sprite
glide to (200, -100)
ITEC-I5 Scratch Aug 2009
29
Scripting a sequence of ops





Do ops in the following order by
dragging operation blocks into a single
connected block
Say hello
Move 200 steps forward
Grow 50% bigger
Make the “meow sound”
ITEC-I5 Scratch Aug 2009
30
Result of 4 operation script
ITEC-I5 Scratch Aug 2009
31
Some new operations
color
change
(Looks)
•
• wait
(Control)
• move
(Motion)
ITEC-I5 Scratch Aug 2009
32
Exercise: write a script to






Make the cat move along a square path
Say “hi” at all four corners
Wait 3 seconds at each corner
Change color at all four corners
Double size when back to the original
starting location.
Say “That’s all folks” when done.
Show an instructor that you have achieved this.
ITEC-I5 Scratch Aug 2009
33
Using variables




Script might have to remember
information
How far is the cat from the dog?
How fast is the rocket moving?
Where did the user click on the stage?
ITEC-I5 Scratch Aug 2009
34
Let’s implement an algorithm
to average two numbers


Make a
variable
“number1”
(click and
drag and
set)
Make
another
one
“number2”
ITEC-I5 Scratch Aug 2009
35
Compute average first as sum





Make variable
average
Drag a “set
operation” to script
area
Drag a + operation
Drag variables
number1 and
number2 to
parameters
Click to execute
ITEC-I5 Scratch Aug 2009
36
Average script as 4 operation
sequence.
Change the two
numbers and click
the sequence to
execute the block
again.
ITEC-I5 Scratch Aug 2009
37
Elements of Scratch: objects







Colors
Sounds
We want to use Scratch
to program with
Locations in 2D space
multimedia.
Sprites
Costumes
Variables (to remember the state of things)
Events: that are broadcast for communication
ITEC-I5 Scratch Aug 2009
38
Elements of Scratch: control



Sequence of operations
Loops or repetition
Detecting events (key or mouse
pressed, sprites overlapping each other,
sprites hitting edge of stage, sensor
giving value)
ITEC-I5 Scratch Aug 2009
39
Loops are for repeating sequences



Bethoven’s 5th: bump-bump-bam;
bump-bump-bam; …
Running the bases in baseball or driving
around the block.
Milling around waiting for some event
to occur (in the aquarium example, the
fish sprites mill around forever)
ITEC-I5 Scratch Aug 2009
40
Loop constructs in Scratch



Repeat N times
Repeat forever
Repeat forever if
some condition
exists (suppose I’m
a sprite wandering
about this lab until
someone asks a
question)
Try these!
ITEC-I5 Scratch Aug 2009
41
Exercise: use a loop to





Move sprite around the 4 corners of the
square
Wait 2 seconds at each corner
Say something at each corner
Double size when done
Change color when done
Show an instructor that you have achieved this.
ITEC-I5 Scratch Aug 2009
42
Play and examine MadLib





Choose the “file” option at the top of
the window
Choose “open”, then “examples”
Choose “stories”
Choose “MadLib” and then read the
authors instructions
Click OK, wait for load, click green flag
ITEC-I5 Scratch Aug 2009
43
About the MadLib story






How many actors (sprites)?
What is the role of the girl?
How are the answers you give 'remembered'
and then used in later actions?
What is the role of the little whale?
What makes the little whale flip around?
What makes the big whale spout?
ITEC-I5 Scratch Aug 2009
44
Tuesday: computing distances
and directions (30 min)




How to go from here (A) to there (B)?
Computing distance
Computing direction or heading
How useful in Scratch or navigation,
etc.?
ITEC-I5 Scratch Aug 2009
45
Angles are important
180 degrees
About 30
degrees
About 45
degrees
(straight angle)
215 deg
90 degrees
(right angle)
360 deg
complete
circle
http://www.mathsisfun.com/geometry/degrees.html
To see animation of angle measure.
ITEC-I5 Scratch Aug 2009
46
Using a protractor to measure angles
ITEC-I5 Scratch Aug 2009
47
Measure some angles with a
protractor
C
Q
P
B
A
ITEC-I5 Scratch Aug 2009
48
The treasure is buried under an oak tree
42 degrees to the right of the line
between the statue and post
post
42
deg
statue
ITEC-I5 Scratch Aug 2009
49
Right triangles are special
What is the distance
from point A to point B?
B
Do this on graph paper.
Draw the triangle ABC
with side CB = 3 and
side CA = 4.
3
C
4
A
Cut a “ruler” out of
graph paper to measure
the side AB.
ITEC-I5 Scratch Aug 2009
50
Measure another triangle
C
12
B
5
A
A person walks north 5 miles from A to C
and then east 12 miles from C to B for a
total of 17 miles. How far would the
person walk going directly from A to B?
(Do this on a scale drawing.)
ITEC-I5 Scratch Aug 2009
51
Pythagorean theorem


Long ago Pythagorus discovered
that in a right triangle, with
short sides a and b, the long
side c is such that c times c is
equal to axa + bxb
The scare crow said it in the
Wizard of Oz: “In a right
triangle, the square of the
hypotenuse is equal to the sum
of the squares of the other two
sides”.
a
b
c
hypotenuse
cxc=axa+bxb
This is of great use in
engineering and navigation.
ITEC-I5 Scratch Aug 2009
52
Shortest distance from A to B?
C
25


It’s 65 miles
going north from
A to C and then
east from C to B.
What if we go
the direct path
from A to B along
a straight line?
B
40
A
ITEC-I5 Scratch Aug 2009
53
Scratch script:
distance A to B




Pick point A
with the mouse
Pick point B
with the mouse
Compute the
distance from A
to B
Test separately!
ITEC-I5 Scratch Aug 2009
54
Test the first part separately
We ask the user to click the mouse. We use variables Ax and Ay to save the
mouse click position, then move our sprite there (156, 82) and change its color.
ITEC-I5 Scratch Aug 2009
55
Test the second part (point B)
After double
clicking on our
second code
segment, our
sprite has
moved from A,
where both x
and y were
positive, to B
where both x
and y are
negative. Our
variables are
displayed.
B = (-99,-51)
ITEC-I5 Scratch Aug 2009
56
Test the final distance comp.
Executing the above code, results in
the stage at the right. Our sprite has
moved a distance of 287.6 in going
from point A to point B. (Extra: In
what direction did it move?)
ITEC-I5 Scratch Aug 2009
57
exercises


Solve the distance
problem by
changing the script
to not use mouse
input.
Just set (Ax, Ay) to
(0,0) and (Bx, By) to
(25, 45) and
execute!

Find a distance on
the earth using your
actual GPS reading
from your
geocaching unit.
ITEC-I5 Scratch Aug 2009
58
Shortest distance from A to B?
C
B
25


Solve the distance
problem by
changing the script
to not use mouse
input.
Just set (Ax, Ay) to
(0,0) and (Bx, By)
to (25, 45) and
execute!
40
How far
A to B?
A
ITEC-I5 Scratch Aug 2009
59
Using Octave to solve it
(You can use a scale drawing too.)

>> b = 40
% declare variable b to have value 40 miles

b =40

>> a = 25

a =25

>> cSquared = a * a + b * b

cSquared =2225

>> c = sqrt(cSquared)

c = 47.1699

>> c * c

ans =2225
% declare variable a to have value 25 miles
% compute the square of the hypotenuse (long side)
% we need the square root of 2225
% the square root times itself must be 2225 it is!
% the direct route is about 47 and 1/6 miles; much less than 65
ITEC-I5 Scratch Aug 2009
60
Tuesday: Scratch more
More about control in Scratch. How to
control sprite behaviors?
How to control user interactions?
ITEC-I5 Scratch Aug 2009
61
Conditions can be checked



Do something if
sprite k hits sprite m
Do something if a
certain key is
pressed
Do something is
some variable takes
a certain value
ITEC-I5 Scratch Aug 2009
62
Interacting with your sprite or
story



Using mouse
Entering a character
Asking the user a question
ITEC-I5 Scratch Aug 2009
63
Sprite follows the mouse
Try changing
the number of
steps or the
wait time.
ITEC-I5 Scratch Aug 2009
64
Sprites can interact with each other



Can detect when colors overlap in space
Can detect when sprites bump into edge of
the stage
Later: See “bouncing balls” example under
Simulations under Examples
Interact with this simulation
Check out the rather complex scripts
ITEC-I5 Scratch Aug 2009
65
Simple communicating sprites



Dog talks to cat in “forever” (infinite) loop
Dog sprite sends a message to the cat sprite
Cat sprite says “hello” and gives the floor back to the dog
ITEC-I5 Scratch Aug 2009
66
Cat sprite reacts to dog
ITEC-I5 Scratch Aug 2009
67
exercises



A) modify the above scripts so that a global
variable is used to count how many times the
dog says “Hello”
B) change the control so that when “Hello” is
said 10 times by the dog, the script stops
with the dog saying “That’s all folks”.
C) change the scripts so that each sprite
moves to a random position on the stage
before saying “Hello”
Show your work to an instructor when you get finished with each part .
ITEC-I5 Scratch Aug 2009
68
Check out the break dance
example





Open examples; music and dance;
break dance
How does break dancing begin?
What are the roles of the sprites?
What events are in the scripts?
What should happen when the boom
box is clicked?
ITEC-I5 Scratch Aug 2009
69
Wednesday Goals



Computing directions or headings in Scratch
or Octave (30 min)
Studying Scratch examples done by others
(50 min).
Design a project: story, game,
simulation, or entertainment/art to do
by Friday. (Sketch your plans in your journal
and discuss with instructor.)
ITEC-I5 Scratch Aug 2009
70
Wednesday: practical trig
Scale drawings
Angles and distances
Using trig functions
1)
2)
3)
ITEC-I5 Scratch Aug 2009
71
Heading from point A to point B



Suppose my GPS
says I am at x=10;
y=5
My treasure is at
x=22 and y=10
What is my heading
and how far do I
travel?
*
(22, 10)
N
**
(10, 5)
ITEC-I5 Scratch Aug 2009
E
72
Make a scale drawing and
measure the angle and distance.
ITEC-I5 Scratch Aug 2009
73
Tangent of an angle
B
Do you see THREE similar
triangles? All share the vertex
and angle A. Are there more?
B2
30
B3
20
10
20
A
C3
C2
C
60
ITEC-I5 Scratch Aug 2009
74
Tangent of an angle
10/20 = 0.5 = ½
B
20/40 = 0.5 = ½
30/60 = 0.5 = ½
B2
15/30 = 0.5 = ½ where is this
triangle?
5/10 = 0.5 = ½ where is this
triangle?
30
B3
20
10
20
A
C3
C2
C
60
ITEC-I5 Scratch Aug 2009
75
Tangent of an angle
B
If C2 is distance 47 from A, how
long is side B2-C2? _____
B2
If B3-C3 has length 12, how
long is A-C3 ? _______
30
B3
12
A
C3
C2
C
60
ITEC-I5 Scratch Aug 2009
76
Tangent of an angle is its RISE
divided by its RUN



Carpenters use the
terms RISE and RUN
to measure how
steep a roof angle
is.
All roofs making the
same angle, have
the same ratio
RISE/RUN
Size of the house
doesn’t matter!
Tangent of angle =
rise/run
= “slope”
ITEC-I5 Scratch Aug 2009
rise
run
77
Using the hypotenuse and one leg




>> hyp = 10
hyp = 10

>> angleA = asind(rise/hyp)

Hyp
= 10


ans = 0.6000
Rise
=6
C
A
angleA = 36.8699
>> sind (36.8699) %in degree

B
10 more minutes and a few slides
needed to do this
>> rise = 6
rise = 6
sin A = rise / hyp
ITEC-I5 Scratch Aug 2009
78
What’s the distance from A to C?


Use the Pythagorean
Theorem to compute
it.
10^2 = b^2 + 6^2



Use the cosine to
compute it.
cosine A = run / hyp
run = hyp * cosine A
ITEC-I5 Scratch Aug 2009
79
Problem: angles and sides







Draw any right triangle
Measure one side
Measure one angle
What is the missing angle? ______
What are the missing sides? ____ ____
Check the Pythagorean relation ______
Check the sind and cosd relations ___ ___
ITEC-I5 Scratch Aug 2009
80
Angles in Octave

>> rise = 20

rise =20

>> run = 40

run = 40

>> angle = atand(rise/run)

angle = 26.5651

>> rise = 30

rise =30

>> angle = atand(rise/run)

angle = 36.8699
% function or operator atand gives your angle in degrees
ITEC-I5 Scratch Aug 2009
81
Angles in Scratch
ITEC-I5 Scratch Aug 2009
82
Computing the angle
Execute each of the 3
code segments.
Slope is 0.5 or ½
The angle is about 27
degrees.
ITEC-I5 Scratch Aug 2009
83
Heading from point A to point B



Suppose my GPS
says I am at x=10;
y=5
My treasure is at
x=22 and y=10
What is my heading
and how far do I
travel?
*
(22, 10)
N
**
(10, 5)
ITEC-I5 Scratch Aug 2009
E
84
Use atand to compute heading






>> east = 22-10 % miles
east = 12
>> north = 10-5 % miles
north = 5
>> angle = atand(east/north)
angle = 67.3801 % head 67 degrees east of north
ITEC-I5 Scratch Aug 2009
85
Using a different triangle






>> rise = 10-5 %miles
rise = 5
>> run = 22-10 %miles
run =12
>> angle = atand(rise/run)
angle = 22.6199 % head about 23 degrees north of east
ITEC-I5 Scratch Aug 2009
86
Exercises in computing angles


A) Repeat the
above Octave
solutions in
Scratch
B) Find the
angles A at
the right
(angle C=90)
A
30
20
C
C
24
A
45
36
50
A
ITEC-I5 Scratch Aug 2009
C
87
Exercises in Scratch (50 min)



Do some of the triangle exercises – any of
them from geocaching?
Study the aquarium program to see how the
various fish behave; change fish color and
observe the change; change its speed and
observe; what other behavior changes can be
made?
Students study and modify existing Scratch
programs; students imagine creating a
program of their own.
ITEC-I5 Scratch Aug 2009
88
Student Scratch project
Pick a project: story, game, simulation,
or entertainment/art to do by Friday.
(Sketch your plans in your journal and
discuss with instructor.)
ITEC-I5 Scratch Aug 2009
89
Experiment with Scratch as
time permits Thur and Fri




Try your own scripts: make moves, sounds,
interactions in simple cases
Try the examples and learn what makes them
work
Download Scratch on your own machine and
experiment some more
Direct a story; or a simulation; or create a
video game.
ITEC-I5 Scratch Aug 2009
90