Properties and Variables
Much of programming involves changing properties of objects while the program runs. We will write scripts that do this, but first it is important to know what types of properties there are, and how they can be changed by hand. In the next section, we'll start making things happen automatically.Goals:
- to familiarize yourself with the built-in variables that objects come with (we call these variables "properties").
- to learn how to change the values of the properties by hand
- to learn the different data types (kinds or properties)
- to learn how to use a "watcher" for a property of an object
- to learn about some of the different panes in the viewer of an object
- to learn about special properties that are available for some objects but not others
I have drawn a little character, "Claire". Let's explore the different panes available in the viewer, and in particular, explore the built-in-variables (which we'll call properties) that come automatically with any sketched object. It will help if you are running squeak, and draw your own sketch using the paint tools. I will assume your sketch is also called "Claire", but it is not important that it be as pretty as mine. For now, even a scribble will do fine. Now open up a viewer for Claire, and look at the "basic" pane.
 | The name of the pane |
| A built-in script for making noise | |
| A built-in script for moving forward | |
| A built-in script for turning | |
| A variable giving the current x coordinate | |
| A variable giving the current y coordinate | |
| A variable giving the heading in 360 degrees, with 0=360 being straight up, and increasing clockwise. (90 is right, 180 is down, 270 = -90 = left). |
Squeak exercises
- Draw your own Claire, open a viewer for it, find the "basic" pane.
- Drag Claire around the screen, watching how the x and y variables change values.
- Note Claire's heading (should be 0), click on the yellow explanation mark
next to the tiles that say forward by 5 
, and what happens to the x and y values?
- Change Claire's heading by clicking on the green up or down arrows
next to the number 0, or by clicking on the value so that it is highlighted, then typing in a new number. Remember to hit the return or enter key.
- Change the amount to go forward by to 10 or 20 (by clicking on the up or down green arrow next to the current number 5, or by clicking on the 5 so that it is highlighted green, and typing in a new value, again remembering to hit the return key). Now make Claire move forward again, and see how x and y change.
Numeric Variables
Look again at the property "Claire's x", and notice the small menu icon just to the left of the property name. If you click, you'll find the following options:x (Number)
simple watcher
detailed watcher
decimal places
show categories
The title, "x (Number)", says that the variable x has type Number. That is, it has values that can be numbers. We cannot set x to "hello", or to the color blue. Try typing in "hello" in place of the x coordinate (and hit return). What happens? Squeak knows that this is invalid, and won't accept it. One of the advantages of programming using the tile system is that "data type-checking" is done for you; you cannot enter a value that doesn't make sense for a variable.
Decimal Places
Because x is a number, we can choose how many decimal places we want to display, by selecting "decimal places" from this menu. Try it. Notice that we can now set the x coordinate to 100.65. (Before, we could have typed this in as well, but we wouldn't see the decimal places). Note: for decimals smaller than 1, you need to type 0 to the left of the decimal, thus "0.1" instead of just ".1".Categories
Selecting "show categories" from the menu sbows us which panes a given property appears on. In this case, we'd see "basic", "geometry", and "motion", since "Claire's x" appears in each of these panes for convenience.Watchers
What is a watcher?Click on "detailed watcher" for Claire's x, and deposit the watcher that you obtain onto the background somewhere. Make Claire move forward some, and see how the watcher changes. Drag out a "simple watcher" also, to see how that works.
What good are watchers? Sometimes in a program you will want to have a value observable without having the viewer open. A watcher does that for you. A perfect application is in a game. If a variable called "score" (which you define... more on this in a later section) keeps track of the player's score, then you will want to display that value. Other reasons include program debugging (explanation), or use as part of user-viewable interface that the user can change as input to the program. For example, suppose I write a program using Claire, and I want the user to be able to change Claire's age (because this may affect how she behaves in the program). Or perhaps the goal of the program will be to keep Claire in a good mood... so it would be nice to have a display of the current mood. I could do that with watchers, like this
Recap
- Objects you draw have many built in variables (or "properties")
- Properties are identifiable by the green/purple arrows
- Numeric properties have number values.
- You can change these values manually by either clicking on the small green up or down arrows, or by typing over the value (and remembering to hit "return").
- You can set the number of decimal places shown
- You can bring out a watcher that will display the current value of a numeric variable.
There are several other panes that contain most all of the built-in properties of objects in Squeak. They are:
pen use
geometry
color & border
drag & drop
graphics
Some other panes contain variables that are duplicated in one of the above (for example, "motion" contains x and y coordinates, and heading, which also appear in the basic pane and the geometry pane).
Of the above, the first three are the most useful. You can ignore the last two. We will discuss them at some later section, but feel free to explore.
The Pen Use Pane
We'll first look at the pen use pane in detail to introduce some properties that do not have numeric values. Every object has a "pen" underneath its center, which it can lower or lift, and drag while it moves, thereby drawing on the background.Open up the "pen use" pane for your sketch, and you should see something like the picture below (without the explanations to the right).
 | The name of the pane |
| A built-in script for erasing pen trails made by the object | |
| dotSize | |
| This variable tells the pen's current color. | |
| A variable that is "true" if the pen is down, and "false" if it is up. | |
| A numeric variable giving the width of the pen tip in pixels | |
| This describes the style of the pen trail to be drawn. |
Color and Boolean Valued Variables
So far, we have explored variables like x and y coordinates, or heading, that have numbers as their values. Remember my car? It was 20 feet long, and blue. Sometimes numbers are good at describing things, sometimes colors are. To tell you about my car's length, I must tell you a number. To tell you about what it looks like, in particular it's color, I must tell you something like "blue" or "green", and so on. Since we are programming with objects that appear on the screen, part of the way we describe some of their properties is by using colors. So, some variables have color values. Above, the penColor property has value type color.Change the Color
The current color is probably blue. To change the color, click in the blue colored box and an eyedropper and color palatte will appear. You can choose a color from the palatte, or you can choose any color anywhere else on the screen (for example, the orange color of the navigator tab) by clicking on the color you'd like. Notice that when you do this, the penColor shown changes.
Put the Pen Down
To make Claire draw, the pen must be down. The property "penDown" has two possible values: "true" or "false". This is called a Boolean valued variable. (Named after mathematician George Boole.) You can change from "false" to "true" by either using the green up/down arrows next to "false", or by clicking on false and selecting "true" from the list that pops up. Change Claire's penDown to "true".
Now Draw
Click on the brown icon on Claire's halo, and use it to drag Claire around. Write your name. (You can also "right-click" to drag Claire. The black icon picks Claire up, as does the usual left-click, so that no pen marking is seen if you move her this way.)
Experiment by changing the numeric variable "penSize". Try changing the variable "trailStyle" to a different kind of pen trail.
When you want to erase, click on the yellow exclamation point next to "clear all pen trails".
Click on the menu icon next to penColor, and pull out a watcher for Claire's penColor.
Close Claire's viewer by clicking on the small tab.
You can continue to draw, and you can use the watcher to change colors, by clicking in the small color box of the watcher.
Recap
- Properties of objects are variables that come in different types:
- Numeric variables have number values, and are changed by typing over the value, or by clicking on the green arrows.
- Color variables have colors as values, and are changed by clicking in the color box and then using the eyedropper to pick a new color
- Boolean variables have either "true" or "false" as a value, and are changed by clicking on the green arrows, or by selecting from the list of options.
- You can bring out a watcher that will display the current value of any variable, and use the watcher to set the value instead of setting it in the viewer.
There are other value types beyond numeric, color, and boolean. The two others we will encounter later are string, and player. A string value type is just a sequence of alphabetic characters, for holding text. A player value type is actually another object. We will encounter player-valued variables much later when we tackle advanced techniques.
The Geometry Pane
Open up the geometry pane in Claire's viewer.
Most of these numeric properties are easily understood.
We've already learned about the x, y coordinates, and the heading.
The properties left, right give the x coordinate of Claire's left and right edges. The properties top and bottom give the y coordinates of Claire's top and bottom edges, and the properties length and width are the height (up and down) and width (left and right) in pixels of the object. (So Claire's length = Claire's top minus Claire's bottom).
Try changing the left, right, top, bottom, width, and length.
The scalefactor allows us to grow and shrink an object by a factor of up to ten in either direction. Scalefactor can be any value between 0.1 and 10.0. Try changing it and see what happens. You can always set it back to 1. Notice while you change it how the left, right, top, bottom, length, and width all change. Claire's x and y do not change, because they are the location of the center of the sketch.
Ignore the properties "theta", "distance", and "heading". We will see them in an advanced section.
Color and Border Properties
Open up the pane for Claire's border and color.
There are just two properties. "dropShadow" is Boolean, being true or false depending on whether or not Claire has a shadow. (All objects have a shadow when lifted by the mouse. The dropshadow is one that can appear when they are not lifted by the mouse.) Try toggling it to true. The other is a color-valued property which tells the color of the shadow (if dropShadow is true). Play.
Now we point out the color and border pane is not very useful for sketches, but for an object dragged out of the supplies bin such as ellipses, stars, etc., there are many more options. Drag out a rectangle from the supplies bin, open up a viewer, and look at the color and border pane. You will see something like this:
Play with all of the options. See what they do. Tuck away in the back of your head that these are things that you can control for these objects. The main use of color and border while programming is this:
For simples shapes taken from the supplies bin, you will be able to write a script that will change their colors when the script is run
This might be useful, for example, to make shining stars, a traffic light, etc.
Special Properties for Special Objects
We have looked at most of the properties that all objects have in common. However, remember the joystick from an earlier tutorial? It had a pane called "joystick", and a property called "joystick's leftRight" and "joystick's upDown".In general, different kinds of objects may need special properties that don't make sense for other objects. You will find that when this is the case, there will be some special panes available from the object's viewer. We will introduce these when we use the particular object. You may want to play around with some now. If so, I suggest looking at
- the graphics pane for any sketch that you draw
- the playfields pane
- the slider pane for a slider
- the collections pane for a holder
Link 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