An intro to Scratch

Document Sample
An intro to Scratch Powered By Docstoc
					An intro to Scratch

 Notes and Tasks for ITEC-I5
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



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

             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
   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
        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 is a variable;
   sum = 12 + 15                   set its value to
     sum = 27                      12+15
   average = sum/2                average is another
     average = 13.500              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)
                                                  Precise steps to
                    You can use the
   ans = 5         ages of the actual            compute the
                    group present.                output from the
   >> sum(gKids)                                 input.
                                                  The input is the
   ans = 59                                      list of ages; the
                                                  output is the
   >> avgAge =
    sum(gKids)/length(gKids)                      average of all the
                                                  ages in the list.
   avgAge = 11.8000
                       ITEC-I5 Scratch Aug 2009                      16
sort a list into order
   >> gKids

   gKids = 10    13    11    12              What algorithm does
                                              MATLAB use to sort the
   >> sort(gKids)                            list?
   ans = 10     11    12    13    13
                                              What algorithm finds
   >> min(gKids)                             the min?
   ans = 10                                  What algorithm finds
   >> max(gKids)                             the max?
   ans = 13

   >>
                                   ITEC-I5 Scratch Aug 2009            17
There are MANY sorting

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
   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
   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
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
   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
     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                                X is +
                   X is –
   Go to x , y    Y is +
                                              Y is +

   Set x to                             Origin is (0, 0)

   Set y to
                    X is –                   X is +
   Glide to        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
                                     • wait
                                     • move

          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
   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
    (click and
    drag and
   Make
                 ITEC-I5 Scratch Aug 2009   35
          Compute average first as sum
   Make variable
   Drag a “set
    operation” to script
   Drag a + operation
   Drag variables
    number1 and
    number2 to
   Click to execute
                           ITEC-I5 Scratch Aug 2009   36
Average script as 4 operation

                                      Change the two
                                      numbers and click
                                      the sequence to
                                      execute the block

           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
                                          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
                           ITEC-I5 Scratch Aug 2009    41
Exercise: use a loop to

   Move sprite around the 4 corners of the
   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,

                 ITEC-I5 Scratch Aug 2009   45
         Angles are important
                                                       180 degrees
                    About 30
                    degrees                            (straight angle)

                About 45                       215 deg

          90 degrees
          (right angle)
                                                           360 deg
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

               C                          Q


               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




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

             ITEC-I5 Scratch Aug 2009                         50
Measure another triangle
    C   12


             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                  a

    that in a right triangle, with
    short sides a and b, the long                            c
    side c is such that c times c is                    hypotenuse
    equal to axa + bxb
    The scare crow said it in the
    Wizard of Oz: “In a right                 This is of great use in
    triangle, the square of the               engineering and navigation.

    hypotenuse is equal to the sum
    of the squares of the other two
                         ITEC-I5 Scratch Aug 2009                       52
Shortest distance from A to B?
                                            25   B

   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                   A
    straight line?
                 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
                                      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
   Solve the distance             Find a distance on
    problem by                      the earth using your
    changing the script             actual GPS reading
    to not use mouse                from your
    input.                          geocaching unit.
   Just set (Ax, Ay) to
    (0,0) and (Bx, By) to
    (25, 45) and
                   ITEC-I5 Scratch Aug 2009            58
Shortest distance from A to B?
                                               25             B

   Solve the distance
    problem by
    changing the script             40
                                                    How far
    to not use mouse                                A to B?
   Just set (Ax, Ay) to
    (0,0) and (Bx, By)
    to (25, 45) and
                    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                 % 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 = 47.1699

   >> c * c                          % the square root times itself must be 2225 it is!

   ans =2225               % 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
   Do something is
    some variable takes
    a certain value

                    ITEC-I5 Scratch Aug 2009   62
Interacting with your sprite or
   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
   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
   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

           1) Scale drawings
     2)    Angles and distances
      3)    Using trig functions

                ITEC-I5 Scratch Aug 2009   71
     Heading from point A to point B
    Suppose my GPS
                                                       (22, 10)
                                                  *

    says I am at x=10;
    y=5                        N

   My treasure is at
    x=22 and y=10
   What is my heading         **              E
    and how far do I       (10, 5)

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

            ITEC-I5 Scratch Aug 2009   73
Tangent of an angle
Do you see THREE similar
triangles? All share the vertex
and angle A. Are there more?                  B2

                     B3                            20


A                     C3                      C2           C

                                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?                                                            30
5/10 = 0.5 = ½ where is this    B3                           20

         A                      C3                      C2           C

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


       A                       C3                         C2   C

                                    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           Tangent of angle =
    steep a roof angle       rise/run
   All roofs making the     = “slope”                  rise
    same angle, have
    the same ratio
   Size of the house                             run
    doesn’t matter!
                       ITEC-I5 Scratch Aug 2009                77
      Using the hypotenuse and one leg
   10 more minutes and a few slides                                    B
    needed to do this
   >> rise = 6
   rise = 6                                                 Hyp
                                                             = 10
   >> hyp = 10                                                         =6
   hyp = 10

   >> angleA = asind(rise/hyp)                                         C
   angleA = 36.8699                               sin A = rise / hyp
   >> sind (36.8699) %in degree

   ans = 0.6000

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

                      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)   % function or operator atand gives your angle in degrees

   angle = 26.5651

   >> rise = 30

   rise =30

   >> angle = atand(rise/run)

   angle = 36.8699

                                  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

          ITEC-I5 Scratch Aug 2009                     83
     Heading from point A to point B
    Suppose my GPS
                                                      (22, 10)
                                                 *

    says I am at x=10;
    y=5                       N

   My treasure is at
    x=22 and y=10
   What is my heading        **              E
    and how far do I      (10, 5)

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

    above Octave                      30
    solutions in             C
    Scratch                  24
   B) Find the                         A
                                                    45   36
    angles A at     50
    the right
    (angle C=90)                  A                      C
                     ITEC-I5 Scratch Aug 2009                 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
   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
   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