Unit II: Scratch Programming

Logistics

• Roll
• Today is a work day (after some introductory presentation)
• Wonderings? Comments?

Where are We?

We're starting to work on the first Scratch assignment. Let's check on how you're doing. Any questions or wonderings? Are you ready?   Are you working alone or with a partner?   Have you picked a story?   Any questions about the Scratch environment?   Any questions about the Scratch Language?   Anything else?

Starting a New Program in Scratch

I want to briefly discuss some code that we/I recommend be in every one of your programs (even if it is not in all of mine :-)  This idea is discussed in the coding suggestions document that we are building.

• Start a new Scratch program
• Name it
• Save it
• Examine the "My Stuff" area
• Refer to the code templates document; describe its purpose (and the possibility for extra credit)   Any questions?
• discuss the director metaphor and point out the code to use
• Demo placing appropriate code in the script areas for the "Stage" and the Scratch cat sprite
• NOTE: you can change the name of the file/program and you have a completely new program (e.g., your story program)

Your Next Task/Program

Do you have a questions about the program task?   Do you feel you understand the expectations?

• Multiple sprites
• Multiple lines (lines in a play)
• Animation

  How can you accomplish animation?

  • move
  • change costume (e.g., walk or face the other direction)
  • point in a different direction
  • change size
  • disappear and appear
  • Anything else?
  • a combination of the above

  Questions?   Comments?   Wonderings?

• Sprites interact

  Huh? (There are various ways to interact: touch, take turns talking or thinking or making sounds or ...) I am referring mostly to taking turns and the program has to control that. The two main control mechanisms are controlling timing with Wait (#) seconds blocks or with combinations of Broadcast [message ▼] and When I receive [message ▼] blocks.

  Questions?   Comments?   Wonderings?

Next Time:

• Plans:   Share RE this assignment; Get ready for the next one.
• To prepare for class:
  • finish your program, share it if you wish
  • complete and submit your TARR
  • Identify questions/discussion topics to bring to class
  • Send me suggestions for the code templates/suggestions document
• Questions? Comments? Wonderings?   See you Tuesday.
• Have fun!

Logistics

• Roll
• Today: Storying experience;   Drawing your initials
• Wonderings? Comments?

Today we will be sharing our experience with the Scratch story telling. Any general discussing/sharing before we start on topics I had in mind?

• What do you think of programming now? Easy? Hard? Challenging? Fun? Boring? Motivational? ...

  ?

• What kind of story did/can you tell with Scratch?

  ?

• Can you imagine using this with the students you plan to teach? Why/Why not?

  ?

• What did you learn about Scratch?

  ?

• What did you learn about programming?

  ?

• Other questions/comments/wonderings?

Anything you like to see added to our coding suggestions/templates? Any questions/comments/wonderings?

Next: Initials

Next we are going to draw our initials. The task will be to draw one's initials. I have an old program that draws my initials. We'll look at it and the you can think about what you might do to draw your initials and how you can improve on what I did. Let's look at my program (via sharing/shared_material.html).

• get the program
  • load the sharing page
  • Questions/comments/wonderings?
  • download my initials program (pay attention to where it get stored
  • open Scratch in a browser and get to the programming environment (Create link)
  • click on the File tab and select Upload from your computer
  • find and select the "initials_jpe.sb2";   then click the Open button.
• Run the program (click on the green flag)
• Questions? Comments? Suggestions?

How to do initials

Logo was the first programming language that included drawing commands (that I'm aware of). It was used with children and they were told to pretend they were the computer when trying to figure out how to get the computer to do what you needed. You might keep that in mind? So, what would the computer need to do to draw you initials?

Let's look at the task/assignment description and see what you might have questions about at this time. (Be sure to look at the specifications. Note that some are required and some not.)

Next Time

• Work on your initials program

Questions? Comments? Wonderings?   —   See you Thursday.

Logistics

• Roll
• Today: Work in initials drawing
• Wonderings? Comments?

Class Time for Programming

Any questions, comments, or wonderings before we start? . . . Okay, work, work, work!

Next Time

• Sharing & problems RE initials program

Questions? Comments? Wonderings?   —   See you Tuesday.

Logistics

• Roll
• Announce: no more leaving class early
• Wonderings? Comments?

Today we will be sharing our experience with the simple initials program. Any general discussing/sharing before we start on topics I had in mind?

• Has your view of programming changed?

  ?

• What problems did you encounter (and perhaps overcome)?

  ?

• What did you learn about Scratch?

  ?

• What did you learn about programming?

  ?

• Other questions/comments/wonderings?

Anything you'd like to see added to our coding suggestions/templates? Any questions/comments/wonderings?

Here is a list of some of the things I think you should be able to use relatively fluently by now.

• the green flag test and how to pass it
• creating your own blocks/instructions
• moving a sprite around the screen
• being able to coordinate sprite activities via either wait blocks or broadcasting (and receiving broadcast messages)
• drawing — leaving a trail, pen color, pen width, pen-up, pen-down
• anything else?

Next: Initials2

Hopefully, you've seen (and read) the next programming task. Do you have any questions or wonderings?

When drawing your initials you might have been able to do your planning while you were coding. Certainly you could probably have completed the activity with guess-and-check programming. It is likely you cannot do that on this assignment. >Additionally, while some math concepts were used in the previous programming task, I suspect the level of math used will/can substantially increase in this assignment. I suggest we start off by doing some thinking about letters and how they are drawn.

Note the figure at the right. It shows all the capital letters in a particular font. Showing the same character side-by-side also shows how much space is often placed between certain letters. Some have essentially no space around them, while others have a little. The numbers beside the letters are my guess as to a relative width for the letters. I used the 1 as the base width for the most commonly occurring width and eye-balled values for the other widths. Your eye might suggest something different. I just realized I screwed up on the "J". It's width is probably 0.4 rather than 1. Sorry.

You may or may not wish to take the width values into consideration as you draw your initials in the next program. There are, however, two values you will likely want to take into consideration.

• height to width ratio

  The letters are all essentially the same height. But they are different widths and the widths are not the same as the heights. So, in your planning, you'll need to decide the ration of height to width. The single source I found seemed to suggest that for 1:0.6 for the commonest letters (ones to which I gave a width of 1).

• positioning of the midline (that may not be the correct name)

  Some capital letters have crossbars, e.g., A, B, F, G, H, P, R. Others have meeting poings at a similar location, e.g., K, M, W, X. You will need to decide where that needs to occur. (I think I decided that the middle was a reasonable place.)

If you were also using lower case letters, you would also want to consider the "height" of the descenders (e.g., on g, j, p, q). I suspect the value there is a bit less than 0.5

Parameters for Initial Drawing

The programming task description suggests at least one of three (sets of) parameters be used: size, position, or orientation? Do you have any questions or wonderings about them?

• size

  The size will likely be indicated in terms of height (probably in units of pixels). That value can be used directly in drawing vertical lines. For the cross pieces you will need to calculate the width from the height. For letters that do not have vertical lines you may want/need to use the coordinate system and move to ... blocks. If you pass the height into a block as a parameter, you will likely want to calculate the width for that letter (and store it as a variable).

• position

  Position will require two letters: the x-coordinate and the y-coordinate. You are still likely to want variables for height and width and do movements in terms of the sum of coordinates and height or width.

• orientation

  Orientation refers to the direction indicated by the imaginary line at the bottom (or top) of the letters. It would be used to tell the sprite which way to point before starting to draw.

You may also have a question about how you incorporate parameters into your drawing. It is fairly straightforward. When you create a block, you give the block a name, then click on the options and you can add as many parameters as you wish. Note that you can also edit the definition of a block (right click on the block in the toolbox and select edit. You can then add more parameters or delete existing ones.

Example Planning

If you wish, we can do an example planning for a letter. Anyone want to work through theirs?

Next Time

• Work on your initials 2 program

Questions? Comments? Wonderings?   —   See you Thursday.

Logistics

• Roll
• Today: Work on initials drawing using parameters
• Wonderings? Comments?

Class Time for Programming

Any questions, comments, or wonderings before we start? . . . Okay, work, work, work!

Next Time

• Sharing & problems RE initials 2 program
• Next task: Drawing polygons and with polygons

Questions? Comments? Wonderings?   —   See you Tuesday.

Logistics

• Roll
• Comments?/Concerns?/Wonderings?

Initials 2 Sharing

Any general discussing/sharing before we start on topics I had in mind?

• What problems did you encounter (and perhaps overcome)?

  ?

• What did you learn about programming?

  ?

• What did you learn about Scratch?

  ?

• What do you think of programming now?

  ?

• Other questions/comments/wonderings?

Drawing (regular) Polygons

Today we will examine using turtle graphics blocks to draw polygons, actually regular polygons. What is a "regular" polygon? How do you draw one (with Scratch)? Let's try that out. What regular polygon shall we draw?

Polygon Demonstration

• What code/blocks do I start with to draw ___ (the figure noted above)?
• What next?
• And next ...
• ... (nothing else is needed, try it out; decide if it works)
• How about a different (regular) polygon? What would be different?
• Let's make a block to do any regular polygon. What do we need? (do what is suggested?)
  • make a new block
  • name?
  • parameter(s)?
  • and ...?
• Test it out, debug if necessary.
• Try it with a different value for number of sides.
• (If the block did not include a parameter for side size, edit it to include one, and test it with different values and different combinations of sides and side sizes.)

A "Flower" (or tree)

Now we'll try to do something with the polygons. We'll do a flower (sort of). Remember spirographs? How might you do that with Scratch?

Demo drawing a flower (or tree)

What would a flower look like? [A long green stem, perhaps bigger at the ground. Some colored (or multicolored) flower. Perhaps some green leaves.] Can you do that in scratch? How?

Perhaps as follows.

• draw a stem (wide pen)
• draw a spiralled polygon centered on the top of the stem
• change color in the flower
• build a block for the flower, specifying location and size

Now draw two flowers, different sizes with some space between them. Then add a sidewalk (series of squares) between them.

What will you draw?

What can you think of to draw with polygons? I think of a house — building, roof, windows (with panes). Might have to do a rectangle for the door.

Go draw something (see the Scratch IV learning activity.

Next Time

• Working on your drawing with polygons activity.

Day 10: Work on Scratch IV Task (drawing with regular polygons)

Logistics

• Roll
• Today: Work on polygon drawing activity (Scratch IV learning activity)
• Wonderings? Comments?

Class Time for Programming

Any questions, comments, or wonderings before we start? . . . Okay, work, work, work!

Next Time

• Sharing & problems RE drawing with polygons program
• Next task:

Questions? Comments? Wonderings?   —   See you Tuesday.

Logistics

• Roll
• Comments?/Concerns?/Wonderings?

Before we start, I want to show off again. Hopefully you will find this useful or interesting. The sharing folder has a program titled recursiveTree.sb2, let's look at it. Not that uses recursion, i.e., a new block (instruction/function) produces its result by calling itself. If you play with it be sure to keep the if >depth > 0< block and to not use depth more than about 10 or so. Comments/wonderings?

Scratch IV Sharing

Any general discussing/sharing before we start on topics I had in mind?

• What problems did you encounter (and perhaps overcome)?

  ?

• What did you learn about programming?

  ?

• What did you learn about Scratch?

  ?

• What do you think of programming now?

  ?

• Other questions/comments/wonderings?

User Input & Conditional Execution

Your next task will be to plan and implement a Scratch program that involves getting and using user input in a way that involves conditional execution (using one of the if blocks. Any wonderings before we start?

A Demonstration

We are going to look at an unfinished program. It should be in the sharing directory. It is called Stories_variables.sb2. Elements of that program that I want to point out (after running it) are:

• the use of the ask ... block (note that an "old" value for answer is lost when you ask something else
• the use of variables
• the use of random number generation
• cloning and clone actions
• y questions/comments/wonderings?

Next Time

• Working on your Scratch V activity.

Logistics

• Roll
• Comments?/Concerns?/Wonderings?

Today was supposed to be a workday for Scratch IV task?. But, ... when looking at the Scratch-III TARRs I saw that several of you were having difficulty. So, ... Are you? Is there anything you'd like to discuss about Scratch or the second initials problem or ...

Next Time

• ?

Day 13: Work on Scratch V Task (input & if)

Logistics

• Roll
• Today: Work on input & if (Scratch V learning activity)
• Wonderings? Comments?

Class Time for Programming

Any questions, comments, or wonderings before we start? . . . Okay, work, work, work!

Next Time

• Sharing & problems RE input & if programs

Questions? Comments? Wonderings?   —   See you Tuesday.

Logistics

• Roll
• Comments?/Concerns?/Wonderings?

Scratch V Sharing

Any general discussing/sharing before we start on topics I had in mind?

• What activity did you use for this project?

  ?

• What problems did you encounter (and perhaps overcome)?

  ?

• What did you learn about programming?

  ?

• What did you learn about Scratch?

  ?

• Other questions/comments/wonderings?

Lists

Your next task will be to plan and implement a Scratch program that involves lists. A list is a collection of data all in one variable. Some examples are lists of:

• student names
• states (& their capitals)
• quiz questions (& answers)
• trivia questions (& possible answers & answers)

Creating (& populating) your list(s)

You create a list like you create a variable. As with "simple" variables, when you create the list you get a bunch of blocks that allow you to use the list and do things to it (add an item, delete an item, etc.) You should look them over carefully and decide what you might be able to accomplish with them or use them for. Some particular hints about using lists are:

• manually type in list data

  You can type things into a list by clicking on + (plus sign) in the bottom left corner of the list. You should get a new numbered location to type in a value. The new item will be at the "bottom" of the list. Note that once you get enough values in the you have a scroll bar at the right.

• manually edit an item in the list

  If you select an item you can edit the value that appears in the list at that location.

• manually delete an item in the list

  If you select an item you should see a little x in a circle at the right. Click on it and the item should be removed.

• upload a file of values into a list

  If you right-click on the list you should be offered three choices: import, export, and hide. If you choose import you can upload a file of data into the list, i.e., you could type or copy it (one value per line) and then load it into the list all at once.

• Any questions/comments/wonderings?

Demonstrate creating a list and uploading a file to it. (trivia questions)

Parallel lists

Often you will want parallel lists. Parallel lists contain related data, e.g., a list of names and a list of addresses, a list of states and a list of capitals, a list of trivia questions and a list of multiple choice items and a list of answers.

Demonstrate creating a second, parallel list and uploading a file to it. (trivia choices)

The lists we have here are parallel in that question 1 (item 1) is related to items 1-4 in the choices list; question 2 is related to items 5-8 in choices; 3: 9-12; 4 13-16; etc. We can figure out the mathematical relationship between them and use variables and operators to access the questions and the choices.

We have to be careful to access our lists in a parallel manner.

Random selection (in parallel lists)

discuss how it can be done

Next Time

• Working on your Scratch VI activity.

Day 15: Work on Scratch VI Task (lists)

Logistics

• Roll
• Announce:

  I think I've figured out how we will move back to the original schedule. We'll:

  • work on Scratch VI today
  • make the Scratch VII task available for you to start thinking about
  • share about Scratch VI on Thursday
  • also on Thursday, discuss issues related to Scratch VII
  • work on Scratch VII next Tuesday
  • share about Scratch VII a week from Thursday
• Wonderings? Comments?

Class Time for Programming

Any questions, comments, or wonderings before we start? . . . Okay, work, work, work!

Next Time

• problems/work on input & if programs;   presentation RE task VII

Questions? Comments? Wonderings?   —   See you Tuesday.

Logistics

• Roll
• Comments?/Concerns?/Wonderings?

Task VI (lists)

After a while you should have some time to work on scratch task VI (lists) if you are not done. Before that I want to show you some stuff about animation (the next task). And before that (i.e., right now) I want to address any difficulties or wonderings you might you might have with scratch task VI. So, ... Do you have any difficulties or wonderings?

Animation

Your next task will be to plan and implement a Scratch program that involves more advanced uses of animation. What Scratch blocks/instructions/capabilities can you think of to cause animation?

Some I have thought of are:

• motion

  various ways—goto ...;   move ...;   glide...;   change x ...;   change y ...;   turn ...)

  can you think of others?

• change costumes, e.g., walking, pointing different direction (or rotated), stepping side to side or jumping up & down (off-center costumes), others?
• change size
• show & hide (perhaps mixed with other actions)
• Anything else?

Continuous motion

Our next task asks you to have a sprite in continuous motion that also, when the user indicates, does some additional or motion. Do you have any ideas of what that might be?

Some I have thought of are:

• a wizard flying around the top of the screen and occasionally zapping something at the bottom
• a shark being guided around the by the cursor and when the user tells it to opening his jaws and chomping down on a fish
• a rabbit running (rather randomly) around trying to avoid a coyote and when the user indicates, it swerves to one side or the other
• a coyote trying to catch a rabbit (like the shark above)
• a pirate ship cruising around and when the user indicates it fires its cannon
• two kids playing tag (like the rabbit and coyote above)
• Anything else?

So, ... How can we do continuous animation?

Some ways I have thought of are:

• back and forth motion

      point in direction (90)
      set rotation style left-right
      forever (or repeat until something happens)
          if <touching [edge] ?>
              turn 180
              if on edge, bounce
          move 5 steps
  

• random motion

      forever (or repeat until something happens)
          set  [newX]  to  <x position + (random from -20 to 20)>
          set  [newY]  to  <x position + (random from -20 to 20)>
          goto x:(newX) y:(newY)
          wait .1 seconds
  

• dance

      forever (or repeat until something happens)
          next costume
          wait .25 seconds
  

  Note when you come to the last of the costumes, the "next" on is the first one. Also, instead of changing costumes you could just turnnbsp;180 degrees. In either case if you offset the center of the costume the animation appears to include "moving".

• jump around

      forever (or repeat until something happens)
      	show
      	wait 1 seconds
          hide
          set  [newX]  to  <x position + (random from -20 to 20)>
          set  [newY]  to  <x position + (random from -20 to 20)>
          goto x:(newX) y:(newY)
          wait .25 seconds
      show
  

• can you think of others?
• I prepared a program to try these out—http://www.cs.uni.edu/~east/teaching/peee/current/notes/samplePrograms/continuousMotion.sb2

Next Time

• Sharing RE Scratch VI work;   Discussing Scratch VII;   Working on Scratch VII

Day 17: Share Scratch VI (lists) experience;   Work on Scratch VII

Logistics

• Roll
• Wonderings? Comments?

Scratch VI Sharing

Any general discussing/sharing before we start on topics I had in mind?

• What do you think about lists and accessing them?

  ?

  Those of you who did parallel lists of multiple choice questions, choices, and answers likely encountered abstraction using the lists and simple variables. Thinking in terms of variables (instead of specific values) is a key idea in computer programming.

• What problems did you encounter (and perhaps overcome)?

  ?

• What did you learn about programming?

  ?

  I want to share a different formula for calculating the location of the answers related to a particular question. We used:

      item * 4 - 3
      item * 4 - 2
      item * 4 - 1
      item * 4
  

  Where "item" was the question number and the result of the calculation provided access to choices A, B, C, & D respectively. There is an equivalent formula that I like because it seems useful for other purposes. That formula is:

      (item - 1) * 4 + 1
      (item - 1) * 4 + 2
      (item - 1) * 4 + 3
      (item - 1) * 4 + 4
  

  This formula is generalizable to:

      (item - 1) * numberOfchoices + 1
      (item - 1) * numberOfchoices + 2
      ...
      (item - 1) * numberOfchoices + numberOfchoices
  

  Or even more generally:

      (item - 1) * numberOfchoices + choice
  

  This last formula lets you calculate the position of any answer and you can do it in a loop. It probably becomes useful when you have about 4 or so choices (i.e., it reduces the lines of code that are needed). It is really useful if you have 10 or 15 or more choices.

  And, it can be generalized into the context of tabular information, i.e., rows and columns. If the first row starts at 1 the last item in the first row would be the number column. The first item in the second row would be 1 more than the number of columns. You could calculate the linear position of any item row and column) with the formula:

      (row - 1) * numberOfcolumns + column
  

  It is a useful formula. Math folks and computer folks will likely find it interesting and useful.

• What did you learn about Scratch?

  ?

• Other questions/comments/wonderings?

Scratch VII (more advanced animation)

This last learning task (there will be a project, you'll probably choose Scratch to do it in) deals with animation. Hopefully you've identified something interesting to work on. I want to provide a chance for questions, then you'll have time to work.

• Questions about topic?
• Any tasks you are having trouble figuring out how to accomplish in Scratch?
• Any debugging issues?

  ?

• Other questions/comments/wonderings?

Next Time

• sharing RE task VII;   talk about projects;   introduce NetLogo

Questions? Comments? Wonderings?   —   See you Thursday.

Day 18: Share Scratch VII (animation) experience;   Project discussion; Introduce NetLogo

Logistics

• Roll
• Wonderings? Comments?

Scratch VII (more advanced animation) Sharing

Any general discussing/sharing before we start on topics I had in mind?

• What did you do for this task?

  ?

• What problems did you encounter (and perhaps overcome)?

  ?

• What did you learn about programming?

  ?

• What did you learn about Scratch?

  ?

• Other questions/comments/wonderings?

Project Discussion

I think we are pretty close to done with Scratch other than doing a project. Your project could be done in Scratch (or in NetLogo if you get excited about that). It will be due the last week of classes. Let's look it over and see if there are any questions (or communication issues). It is located at http://www.cs.uni.edu/~east/teaching/peee/current/project.html".

NetLogo Introduction

See the discussion in the next set of notes.

Next Time

• Read/study Nicholas Bennett's Core Concepts of NetLogo (a PDF). Bring questions to class.
• More NetLogo.