1. An intro to Scratch Notes and Tasks for ITEC-I5 Camp
Leaving lots of exploration for the future.
ITEC-I5 Scratch Aug 2009

2. 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.
ITEC-I5 Scratch Aug 2009

3. Who computes? Scientists Engineers Businessmen Social scientists
Artists
FBI agents
Brain surgeons
Grandkids
ITEC-I5 Scratch Aug 2009

4. Monday concepts (20 min) What is an algorithm?
An algorithm for an average and min
An algorithm for sorting
ITEC-I5 Scratch Aug 2009

5. 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

6. 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

7. 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

8. 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

9. Use set of cards for each team. How can A sort using B as comparer?
Problem: how to sort?
Use set of cards for each team. How can A sort using B as comparer?
ITEC-I5 Scratch Aug 2009

10. 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

11. 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

12. 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

13. Students use Octave (10 min)
Verify the work and problem solutions as below [while the instructor leads].
ITEC-I5 Scratch Aug 2009

14. Compute the average of two numbers using Octave
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
sum =
sum = 27
average = sum/2
average =
ITEC-I5 Scratch Aug 2009

15. 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

16. gKids = 10 13 11 12 13 >> length(gKids)
ans = 5
>> sum(gKids)
ans = 59
>> avgAge = sum(gKids)/length(gKids)
avgAge =
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.
You can use the ages of the actual group present.
ITEC-I5 Scratch Aug 2009

17. sort a list into order
>> gKids
gKids =
>> sort(gKids)
ans =
>> min(gKids)
ans = 10
>> max(gKids)
ans = 13
>>
What algorithm does MATLAB use to sort the list?
What algorithm finds the min?
What algorithm finds the max?
ITEC-I5 Scratch Aug 2009

18. 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

19. Start scratch and let’s go! (90 min)
Click on the cat icon
If not on desktop, download from
Scratch programming environment comes up quickly
We will first do simple ops
ITEC-I5 Scratch Aug 2009

20. 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

21. 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

22. 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

23. Click on the “Looks” button at the top left.
ITEC-I5 Scratch Aug 2009

24. 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

25. 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

26. Make the cat 50% larger Select “Looks” operations
Drag the “change size” operator into your script
Click and edit for a 50% change (increase)
Double click your one operation script
Did your cat sprite get 50% bigger?
ITEC-I5 Scratch Aug 2009

27. Putting a sprite in a location
Motion ops
Go to x , y
Set x to
Set y to
Glide to
X is +
Y is +
X is –
Y is +
Origin is (0, 0)
X is –
Y is -
X is +
Y is -
ITEC-I5 Scratch Aug 2009

28. 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

29. Locating your sprite
Interesting task: make your own “glide to” operation and have your sprite glide to (200, -100)
ITEC-I5 Scratch Aug 2009

30. 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

31. Result of 4 operation script
ITEC-I5 Scratch Aug 2009

32. Some new operations wait (Control) move (Motion) color change (Looks)
ITEC-I5 Scratch Aug 2009

33. 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

34. 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

35. 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

36. 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

37. Average script as 4 operation sequence.
Change the two numbers and click the sequence to execute the block again.
ITEC-I5 Scratch Aug 2009

38. Elements of Scratch: objects
Colors
Sounds
Locations in 2D space
Sprites
Costumes
Variables (to remember the state of things)
Events: that are broadcast for communication
We want to use Scratch to program with multimedia.
ITEC-I5 Scratch Aug 2009

39. 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

40. 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

41. Loop constructs in Scratch
Try these!
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)
ITEC-I5 Scratch Aug 2009

42. 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

43. 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

44. 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

45. 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

46. Angles are important 180 degrees About 30 degrees (straight angle)
(right angle)
360 deg complete circle
To see animation of angle measure.
ITEC-I5 Scratch Aug 2009

47. Using a protractor to measure angles
ITEC-I5 Scratch Aug 2009

48. Measure some angles with a protractorQ P B A
ITEC-I5 Scratch Aug 2009

49. 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

50. Right triangles are special
What is the distance from point A to point B?
Do this on graph paper.
Draw the triangle ABC with side CB = 3 and side CA = 4.
Cut a “ruler” out of graph paper to measure the side AB. B 3 C A 4
ITEC-I5 Scratch Aug 2009

51. Measure another triangle12 C B 5
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.) A
ITEC-I5 Scratch Aug 2009

52. Pythagorean theorem b
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 c
hypotenuse
c x c = a x a + b x b
This is of great use in engineering and navigation.
ITEC-I5 Scratch Aug 2009

53. Shortest distance from A to B?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? 40 A
ITEC-I5 Scratch Aug 2009

54. 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

55. 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

56. 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

57. Test the final distance comp.
Executing the above code, results in the stage at the right. Our sprite has moved a distance of in going from point A to point B. (Extra: In what direction did it move?)
ITEC-I5 Scratch Aug 2009

58. 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

59. Shortest distance from A to 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

60. Using Octave to solve it (You can use a scale drawing too.)
>> b = % declare variable b to have value 40 miles
b =40
>> a = % declare variable a to have value 25 miles
a =25
>> cSquared = a * a + b * b % compute the square of the hypotenuse (long side)
cSquared =2225
>> c = sqrt(cSquared) % we need the square root of 2225
c =
>> c * c % the square root times itself must be 2225 it is!
ans = % the direct route is about 47 and 1/6 miles; much less than 65
ITEC-I5 Scratch Aug 2009

61. Tuesday: Scratch more
More about control in Scratch. How to control sprite behaviors?
How to control user interactions?
ITEC-I5 Scratch Aug 2009

62. 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

63. Interacting with your sprite or story
Using mouse
Entering a character
Asking the user a question
ITEC-I5 Scratch Aug 2009

64. Sprite follows the mouse
Try changing the number of steps or the wait time.
ITEC-I5 Scratch Aug 2009

65. 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

66. 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

67. Cat sprite reacts to dog
ITEC-I5 Scratch Aug 2009

68. 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

69. 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

70. 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

71. Wednesday: practical trig
Scale drawings
Angles and distances
Using trig functions
ITEC-I5 Scratch Aug 2009

72. 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 * E *
(10, 5)
ITEC-I5 Scratch Aug 2009

73. Make a scale drawing and measure the angle and distance.
ITEC-I5 Scratch Aug 2009

74. 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

75. Tangent of an angle 10/20 = 0.5 = ½ 20/40 = 0.5 = ½ 30/60 = 0.5 = ½
15/30 = 0.5 = ½ where is this triangle?
5/10 = 0.5 = ½ where is this triangle? B B2 30 B3 20 10 20 A C3 C2 C 60
ITEC-I5 Scratch Aug 2009

76. Tangent of an angle B
If C2 is distance 47 from A, how long is side B2-C2? _____
If B3-C3 has length 12, how long is A-C3 ? _______ B2 30 B3 12 A C3 C2 C 60
ITEC-I5 Scratch Aug 2009

77. 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”
rise
run
ITEC-I5 Scratch Aug 2009

78. Using the hypotenuse and one legB
10 more minutes and a few slides needed to do this
>> rise = 6
rise = 6
>> hyp = 10
hyp = 10
>> angleA = asind(rise/hyp)
angleA =
>> sind ( ) %in degree
ans =
Hyp = 10
Rise = 6 C A
sin A = rise / hyp
ITEC-I5 Scratch Aug 2009

79. What’s the distance from A to C?
Use the cosine to compute it.
cosine A = run / hyp
run = hyp * cosine A
Use the Pythagorean Theorem to compute it.
10^2 = b^2 + 6^2
ITEC-I5 Scratch Aug 2009

80. 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

81. Angles in Octave >> rise = 20 rise =20 >> run = 40
>> angle = atand(rise/run) % function or operator atand gives your angle in degrees
angle =
>> rise = 30
rise =30
>> angle = atand(rise/run)
angle =
ITEC-I5 Scratch Aug 2009

82. Angles in Scratch
ITEC-I5 Scratch Aug 2009

83. 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

84. 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 * E *
(10, 5)
ITEC-I5 Scratch Aug 2009

85. Use atand to compute heading
>> east = % miles
east = 12
>> north = % miles
north = 5
>> angle = atand(east/north)
angle = % head 67 degrees east of north
ITEC-I5 Scratch Aug 2009

86. Using a different triangle
>> rise = 10-5 %miles
rise = 5
>> run = %miles
run =12
>> angle = atand(rise/run)
angle = % head about 23 degrees north of east
ITEC-I5 Scratch Aug 2009

87. 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 24 C A 45 36 50 A C
ITEC-I5 Scratch Aug 2009

88. 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

89. 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

90. 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