Squeak How-To

Our Goals

• Add to this list as needed
  
• Expand and revise exposition to make sense,
  eventually to beginning programers
  
• Create images to go with the explanations
  
• Make the lessons look like this: http://www.dmu.com/squeak, a very nice presentation indeed. The only problem is that a lot of it uses the underlying smalltalk, instead of etoys. Will somebody please give two-line summaries of contents of individual lessons, and indicate which are etoys-only (or etoys-mostly) and good for us, providing links directly to the pages? We can include the links under the appropriate headings here, and avoid working on things that have already been done.
  DMU Tutorials
  
• Create mini-squeak-tutorials that take people through all of these
  tips. It would be nice to think of mini-projects that chains several together.
  

1. motion bounce
2. pen control: {pen down true/false line,dot,arrow, arrowhead, pensize, pen color}
3. how to draw basic things: circles, triangles, squares, penta, hexa, octagons.One of my first grade students was experimenting in this area and the trail she happened to make reminded her of the flight of a bee but we ran out of class time before she could go back into paint and draw one. Maybe next week.
4. Playfield use
5. Supplies flap: the "all scripts" button, joystick, sound recorder,
6. Object catalog: basic, useful,
7. Object catalog: graphics, demo, 3D, connectors

How-To Directory

Technical Problems

CS Concepts in Squeak

Squeak Supplies

Other Techniques

Bugs and other Weird Things

Squeak Technical Issues...

Publishing and Saving

• If publishing hangs, you can sometimes fix it by alt-clicking (or
  cmd-clicking if on a mac) on the "Publishing" notification window, and
  simply deleting it.
  
• Alt-period works sometimes also.

Flaps

Tiles

Scripts, panes, variables

• First, make sure that you have hit "return" after changing the script name.
• Second, you can close the scripting pane, then re-open it.
• Finally, you can close the viewer for the object, and then open a new viewer. Often this updates the list of scripts that will show up.

Importing Images

CS Concepts in Squeak

Creating an Array

1. Create a holder which is the array.
2. The object to go into the array can be anything, as there is a property called "number at cursor" that will hold the value. But you want to be able to see the value. The easiest way to get the object to be identified with the number at cursor is to have the object be a piece of text.
3. So: drag some raw text out as your prototype newarrayelement.
4. Then to add an item to the array, use holder include newarrayelement copy
5. Then use holder number at cursor -- desired value.
6. The desired value can be a number passed in as a parameter to the "include new element" script.

Squeak Supplies

An Introduction to Squeak

• http://www.dmu.com/squeak/sq1.html
• http://www.dmu.com/squeak/sq1.html

Using the Paint tool

Using the joystick

 

car forward by joystick's upDown.  

For example, if you have "car turn by joystick's leftRight", and the car is doing down the screen, then moving the joystick to the right will cause the car to turn right - which means head to the left on your screen. This will be fine when the user is comfortable projecting themselves into the game, imagining being the car.

Instead of the above command, you might have used

car's x increase by joystick's leftRight

 

pacman's x increase by joystick's leftRight 

TEST joystick's leftRight > 0 

    YES pacman's heading -- 90 

     NO pacman's heading --> -90 

Using a Button

1. create a new script
2. open the "scripting" category pane in the object's viewer
3. drag "Object start script emptyScript" into your new script
4. on the tile you just dragged in, change "emptyScript" to the script you want to run continually

Using a Button button

Using a Holder

• http://www.dmu.com/squeak/sq24.html

• http://www.dmu.com/squeak/sq25.html and http://www.dmu.com/squeak/sq26.html

Using a ListBox

Other Techniques

Simple Collision Detection

Cannon Ball Shoot
	Test Cannon ball overlaps Ship
	   YES  Ship start script StartGameOver
		Cannon Ball make sound Splash
	   No   Cannon ball forward by 5

Cannon Ball Shoot
	Test Cannon Ball XCOLOR sees YCOLOR     
	   YES  Ship start script StartGameOver
		Cannon Ball make sound Splash
	   No   Cannon ball forward by 5

Cannon Ball Shoot
	Test Cannon ball [black] sees [blue]
	   YES  Ship start script StartGameOver
		Cannon Ball make sound Splash
	   NO   Cannon Ball forward by 5
	Test Cannon ball [black] sees [red]
	   YES  Cannon Ball make sound Motor
		Cannon Ball forward by 5
	   No   Cannon Ball forward by 5

• http://www.dmu.com/squeak/sq20.html and
• http://www.dmu.com/squeak/sq22.html

Implement scoring

If you don't like the way that looks, you can instead select a "simple watcher", which gives you just the value of the score. You can increase the font size, style, etc., and embed it into any object or graphic that you want.

Read about *Tests* and assigning values of variables to figure out how to change the score when you want to.

Get things to reset to a home position.

• Create variables for the car called "homeX" and "homeY".
• Set the car where you want it to be at the start.
• Set the variable homeX to be what the current car's x position is.
• Set the variable homeY to be what the current car's y position is.
• Create a script "goHome" which does this:

   
  car's x <-- car's homeX 
  car's y <-- car's homeY 
  

1. If you want to change the home location, you don't need to find the script and open it. You just change the variables homeX and homeY in the viewer. This is a cleaner way to plan for possible changes. All "constants" that affect your objects behavior can be set within the variables pane for the object, rather than searching through scripts.
2. More importantly: if you have multiple versions of your object, then you must use variables, so that each of the cars will have its own particular homeX and homeY. Remember, all siblings share the same scripts, and the only way to get them to behave differently is to use variables that you've defined for them within the script. To get them all to go home, you'd then simply fire "car send to all goHome" available on the scripting pane for any of the cars. You could do this manually, or you might want that command as part of another script that reset various things to begin again.

Make something happen "once in a while"

This is achieved in a manner similar to the traffic light delay that built. As an example, suppose we'd like apples to fall from a tree once in a while. We might have many apples, and we'd like them all to fall at different times, randomly. Assume that they are siblings, so that they can all execute the same scripts. We'll use the following for each apple:

• Variable delay, which will indicate how much time to wait before the apple is dropped.
• Variable timer, which will be used to count up to the delay
• Script decideDelay, which will set the delay time randomly, and set the counter to 0. This will execute once, and start script wasteTime.
• Script wasteTime, which will be a "ticker" that counts up to delay.
• Script fall, which will start ticking and moving the apple down the screen once wasteTime is finished.

 
apple decideDelay apple's delay <-- random 50 
apple's timer <-- 0 
apple start script wasteTime

apple wasteTime
  TEST apple's timer < apple's delay
      YES  apple's timer increase by 1
       NO  apple start script fall
           apple stop script wasteTime

The fall script moves the apple down the screen (either by apple's y decrease by 1, or apple forward by 1, aassuming the heading was 180)). It may also test for when it hits the ground (using a color test, or testing it's y-value.) At that point, it should stop script fall. If you want to recycle the apple for another round, then you'll need to send the apple back to its home position, and then run decideDelay again.

Notice that when all siblings execute the script, they each will choose a random number and set it to their own variable "delay", so they will each count up to a different amount before starting to fall. You can control the rate by choosing a smaller or larger range for the random number.

1. Create a script that will position the bubble at the gun and heading in the right direction just before it shoots.

   bubble findGun
     bubble hide
     bubble's x <- gun's x
     bubble's y <- gun's y
     bubble's heading <- gun's heading
     bubble forward 20
     bubble show
   

   Above, "forward 20" is used to position the bubble at the tip of the gun, instead of over it. You will need to adjust this, and/or the x,y coordinates of the bubble, depending on your drawing.
2. Create a script that when ticking will make the bubble fly forward until it hits reaches the edge of the screen.

   bubble fly
    TEST bubble obtrudes
         YES bubble hide
             bubble stop script fly
         NO  bubble forward by 3
   

   The test "bubble obtrudes" is found in the "tests" pane of the viewer for the bubble. You might instead want the bubble to stop after a fixed distance. In this case you'd need to create a counter as a variable and count as the bubble moved forward 1 at each tick of the clock. Once the counter reached the right value, you'd stop script fly.
3. We need some way to fire the gun. We'll script a button to do it. Drag a button (or just a shape) from the supplies or widgets flap.
4. Change the text in the button to read what you'd like. (If you dragged a shape, you can put some text into it by dragging text from the supplies flap, and "embedding it" into the shape (see the red menu icon from the halo of the text).
5. Create a script for the button called "shoot", for example.
6. Decide when you want the shooting to occur: when you click on the button, or when your mouse just passes over the button. (These, and other options, are available by clicking on "normal" in the script window title.
7. What should happen once, and what will have to happen over and over? The findGun script should fire just once. If it were ticking, then the bubble would never be able to escape the position at the gun. The fly script should happen over and over, as it advances the bubble a little bit at each step. Thus, we put the following in the "shoot" script:

   button shoot
      bubble findGun
      bubble start script fly
   

8. That's it. Now when the button is pressed, the bubble should first appear at the tip of the gun, and then start flying. It should stop and disappear when it reaches the edge of the screen. If it does not disappear, it may be because it never "obtrudes" - which means hangs over the edge of its container. This may not occur because the world (or playfield, if you are on one) has the option "fence enabled" checked. You can change this setting by clicking ont the red halo for the world, then selecting "playfield options", where you'll find fence enabling along with other behaviors that you can modify.
9. Oh - wait! What if you wanted some other object, like a person you drew, to get all soapy and fall down if a bubble hits them? You could do this in a couple of ways. Somewhere you need a test that checks if the person is hit by a bubble. Once place you could check is in the bubble's fly script. This makes the most sense, since you do not want to be checking unless the bubble is actually flying.

   bubble fly
    TEST bubble obtrudes
         YES bubble hide
             bubble stop script fly
         NO  bubble forward by 3
    TEST bubble overlaps person
        YES  person start script getAllSoapyAndFallDown
             bubble hide
             bubble stop script fly
         NO  bubble forward by 3
   

   Notice that in this script, we really could've used an "OR" statement:

   TEST bubble obtrudes OR bubble overlaps person
      YES ...
       NO ..
   

   But since there are no such tiles available in Etoys, we simply do a separate test.

To shoot something A simple project that you might like to try, that
may come in handy in some game that you might write, involves getting
one object to launch or shoot out of another. Challenge: Draw a
picture of somebody eating watermelon, and write a "spitseed" script
that has them spit watermelon seeds. What is involved? Draw a
person in profile as one object, and draw a watermelon seed. What
has to happen when the spitseed script fires? The watermelon seed
should move to the right place on the screen relative to your drawing
(i.e., at the person's mouth). (Spitseed Simply sets the x and y
coordinates of the seed). It should then appear ("show", available
under scripting pane). The spitseed script should then start a
separate script whose only function is to make the seed move foward a
little at each tick. (Make sure the heading is correct.)

Bonus fun: create a controller that changes the heading of your
person, and now you can direct the seeds. Add moving targets, and
have points score when they are hit.

• bullet hides
  
• sets x and y to shooting object's x and y, plus offset
  
• show and trigger flying ticker
  
• flying ticker tests for obtrudes to know when to vanish
  
• can erase (which means need to create a bullet on each shot) or
  hide (which means only one bullet at a time)
  

dart's checkHit
TEST  dart isover [red] (you'd put the actual color here)
    YES  dart balloonHit
         dart stop script checkHit
    NO

     TEST dart's [yellow] sees [red]

TEST dart overlaps balloon

balloon's pop
  balloon hide

dart's checkHit
TEST  dart isover [red] (you'd put the actual color here)
    YES  dart balloonHit
         balloon pop
         dart stop script checkHit
    NO

TEST dart overlaps balloon1...
     YES balloon1 pop

..

TEST dart overlaps balloon37...
    YES balloon37 pop

balloon's checkHit
TEST  dart's [yellow] sees [red]
    YES  dart balloonHit
         balloon pop
         balloon stop script checkHit
    NO

dart's checkHit
TEST  dart's [yellow] sees  [red] 
    YES  dart balloonHit
         balloon sendtoall checkHit
         dart stop script checkIfHit
    NO

balloon's checkIfHit
TEST  dart overlaps balloon
   YES pop
    NO

dart's checkHit
TEST  dart's [yellow] sees  [white]   (the background color)
    YES  
    NO   dart balloonHit
         balloon sendtoall checkHit
         dart stop script checkIfHit

Handle interaction between one of many, and one of many other objects

This is for another day.

---

To make a delay

• set counter in pre-script, call "while ticker"
• "while ticker" waits for end condition, then triggers post-script.

Button to fire things

• (widgets/supplies button bar (tickers only... "paused")
• script the button to do what you want

---

Finding the Mouse's location

You can get the mouse's current X and Y position to any object that has a Playfield tab in the viewer window. Some objects that contain this tab include the world, playfields, holders, and the pages of books.

The lower left hand corner of the playfield is where X and Y are both 0. If you move the mouse up on the screen, the Y value will increase, similarly by moving the mouse right, the X value will increase. If you move the mouse below or to the left of the playfield, you will get negative numbers.

These variables can be used for many things. One basic example of what you can do with the location of the mouse is to control the location of an object, such as a paddle in a game like pong or breakout. The following tiles would be used to set the X position of the mouse.

Extension:

Using the above tiles, how could you make an object move towards the mouse? Solutions (mouse)

---

Making a ball bounce correctly off of a flat bar that is at an angle.

• set the heading to 360 - heading - 2flat-bar's heading.

---

Using keyboard controls

To allow input through the keyboard, go to the world's viewer and under the input tab you will find lastKeystroke. Then, in a script, put lastKeystroke in a Test statement.

TEST lastKeystroke=w

     YES object forward by 5

However, if you do not press another key after the w, it will continue testing true and the object will continually go forward. To get around this, manually change lastKeystroke within the Yes area.

TEST lastKeystroke=w

     YES object forward by 5

         world's lastKeystroke=stop

---

Sequential vs Concurrent in squeak.

script A:



  start script B (ticking)



script B:

  stop script B

  (call) script A

Question 1: If we execute A, will this infinite loop, or stop?

• Thought: it seems like it should all stop.
• The correct answer, explained below, is that it is an infinite loop.

Now suppose A is the same, but we replace B with

script B:

  (call) script A

  stop script B

Question 2: will this infinite loop, or stop?

• Thought: it is an infinite loop.
• The correct answer is that it will stop.

Explanation

When you read the code, it looks like it makes no sense... why would
you need to stop a script before doing something that you wanted to
happen before the script was stopped? It is natural to do the
opposite!

Yet the above is what happens, and this is consistent with our
model of how squeak schedules.

FIRST CASE:

tick 1:
B is schedule to start next tick
tick 2:
B starts
B is scheduled to stop next tick
A called, so B is schedule to start next tick.

tick 3:
B stops
B starts (in order of queued schedule above

SECOND CASE:

same as above, but on tick 2, B is scheduled to start via call to A

before B is scheduled to stop. Thus, on tick 3, B starts, then stops.

---

Tail Recursion

When you want to program a multi-step algorithm in squeak it can be difficult getting deterministic behavior using features like ticking or (shudder) tellAllSiblings, sendToAll. One option is to call scripts using normal function calls, but that may be undesireable if you want to visually see the algorithm's progress. Another option is to use the "do" feature from the Scripting pane. This tile does exactly what the bubble help says it does. It tells squeak to run a particular script on a particular object once, during the next tick.

This is useful simply for the fact that you know what is going to happen when you call it, but it doesn't really get interesting until you consider what happens when multiple objects/scripts call "do" during a particular tick. The requested scripts will be called on the requested objects, but not until the current tick is done. In terms of recursive functions this means that if you branch into several subcases each case in the current level of recursion completes before the next level starts.

Of course, you should also note that since you're not using function calls when you use "do" there really isn't any implicit recursion going on. When you call "do" nothing happens until the next tick, so you can't use the results of the called script in the currently executing script. What you do get is tail recursion, which means that you do something and then tell another object/script to take over where you left off. This can be used to program explicit loops. To program recursion with it you need to explicitly return control by having the script calling "do" save itself in a variable of the object being called and then having the script on the called object call a script on the object that called it.

I know, I need to explain this better, but I wanted to get the idea out there since using this programming style has helped me a lot to get things working like Game of Life and Merge Sort.

---

Bugs

Object not moving straight

If your object is gradually drifting from where it is supposed to go, find its Heading variable under the Basic tab. The value displayed is an integer rounded from the actual heading. For instance, if the object's heading is 89.7 degrees, it will display 90.

To fix this, type in the value you want directly into the field.

---

I lost an object

If one of your objects has become hidden and you do not have the viewer available for it, go to the World menu -> playfield options -> show all players, and you will be able to see it.

Another way to find a lost object is:
On the right side of the Squeak screen, thumbnails of all the objects (except the World) should exist. If you lose an object or cannot find it, click on the desired objects thumbnail.

At the top of the object viewer, there is rectangular box that displays the objects menu. Click on the Menu button. There are now two options.

1) Reveal me - click this option and your object will start flashing on the screen
2) Grab me - this option will move the object to wherever your mouse is

---

Links to this Page

• A Squeaky Introduction to Programming last edited on 6 August 2005 at 8:43:17 am by 12-221-97-163.client.insightBB.com
• Control last edited on 6 February 2005 at 3:24:05 pm by 12-221-97-163.client.insightBB.com
• Pedagogy Place last edited on 30 March 2005 at 5:19:17 pm by csil-cbt6.cs.uiuc.edu
• hw-2-02 last edited on 6 February 2005 at 2:34:56 pm by 12-210-160-251.client.insightBB.com
• Beginning Tutorials last edited on 6 July 2005 at 4:29 pm by vpn82-7e-92-97.near.uiuc.edu
• Squeak Troubleshooting last edited on 9 February 2005 at 9:12:57 pm by 12-221-97-163.client.insightBB.com
• notes-3-09 last edited on 11 March 2005 at 9:10:52 pm by hh-1-213.flexabit.net
• Concept Nuggets Listing last edited on 11 May 2005 at 1:23:16 pm by hh-1-213.flexabit.net