Exploring Visual
Programming
Squeak SimBuilder Tutorial
Implementing a Model of the Water Cycle
Human Computer Interaction
@
Virginia Polytechnic Institute and State
University
This tutorial is a draft of materials being developed as part of
behavioral research underway in the Computer Science
Department at Virginia Tech. It is provided on an "as-is" basis;
however, we welcome comments and suggestions. Please
direct any feedback to [email protected]
SimBuilder Tutorial © Virginia Tech Visual Languages Group
Preliminaries





The purpose of this document is to introduce you to
SimBuilder by helping you create a small project.
SimBuilder is designed for building simulations, such as a
model of the water cycle.
No programming experience is required.
In this experiment we want to evaluate the usefulness of this
tool to a science teacher to simulate environments or lab
experiments as curricula aids in their classrooms with
SimBuilder.
The last page of this document contains an interaction guide.
Squeak SimBuilder Tutorial © Virginia Tech Visual Languages Group
Exploring the Water Cycle Model

Double click to open the Squeak environment.
Squeak

Select Water Cycle


Now, Press



This will open your first example of a simulation.
to start this model.
Watch the Simulation.
What actions are taking place?
Press
after a few minutes of observing the model.
Squeak SimBuilder Tutorial © Virginia Tech Visual Languages Group
Exploring The Sun
Let’s investigate the players
To investigate the Sun

<Alt> Click or <Middle button> Click the Sun and it’s Halo will appear.

Select the purple eyedropper Change color tool to
and change the Sun from yellow to bright orange.

To investigate the rules or
that govern the sun’s behavior,
Select the blue eyeball to Open a Viewer of me.
This will show you the set of graphical rules for this player.

What does the Sun do?

You program by simply selecting a rule, then dragging and dropping the
out of the scripting window and placing it somewhere in the world other than the
green playground.
(Take a few minutes to explore scripts in the viewer…)
Squeak SimBuilder Tutorial © Virginia Tech Visual Languages Group
Changing The Behavior of Clouds


Examine some of the more complicated behaviors by
selecting the Cloud and reviewing its behavior.
Take a moment to review the interaction guide to gain a better
understanding of the interactions between agent’s behaviors
Make Clouds more active.
Currently the behavior of the cloud is to move forward 5 spaces. Find the script
that causes this behavior. Let’s make the clouds move a lot more.

Click on the desired script

Increase the value to 10 for moving forward.

Press

Press
to see how your changes affect the simulation.
and try another change.
Make the clouds move vertically.
Currently the behavior of the cloud is to move horizontally across the sky. Let’s try to
change the behavior of the cloud so that it will move vertically.

<Alt> Click or <Middle button> Click your cloud and it’s Halo will appear.

Select Rotate and move your cloud just a tiny bit for it’s direction arrow to appear.

In order to change the direction that the player moves
Click on the green arrow and change its direction so that it points to the right.

Press
to see how the simulation has changed.
Squeak SimBuilder Tutorial © Virginia Tech Visual Languages Group
Creating a Bird
A simulation in Agentsheets is simply a set of agents that work together to create
visual effects.
A key aspect of creating new simulations is to build new agents. We will begin with
the small task of adding a new agent to the Water Cycle project.

Drawing a bird

Select

Use a brush and the color palette to draw something that looks like a bird.
.
Refer to the interaction guide for Gallery Tools if you need to refresh your memory.
This is just for fun. Do not worry if you are not a good artist.

Once finished Press

Your bird has been added to the playground. It’s just as easy as that !!!
.
Squeak SimBuilder Tutorial © Virginia Tech Visual Languages Group
Giving the Bird Behaviors
In this playground, we want the bird to be able to fly through the sky.

Double click on your bird and it’s viewer will appear.
 The viewer is a window to select behaviors for your agent.
 Let’s add the behavior that your agent will move in one direction.
 Select


and Drag it out of the viewer and place it anywhere, preferably not in the playground.
Press
to see how your bird acts within the playground. Your bird should fly across the
playground. If it doesn’t you may need to check out which direction your bird is flying.

<Alt> Click or <Middle button> Click your bird and it’s Halo will appear.

Select Rotate and move your bird just a tiny bit for it’s direction arrow to appear.

Click on the green arrow and change its direction so that it points to the right.
Try putting a bird on the ground. Does it move? What would you need to make it move?
Now you have all the basic tools you need to create your own Simulations!!
Squeak SimBuilder Tutorial © Virginia Tech Visual Languages Group
Creating a Volcano Simulation
A sample environment that you could simulate is a volcano
erupting. A volcano involves the interaction of several complex
factors. Pressure is built up over a period of time. Once the
pressure reaches a certain level the pressure is released as
sparks, smoke, lava, and heat.The lava causes the earth and the
mountain to become larger as a by-product. After the volcano has
erupted the pressure has been released and the Volcano becomes
quiescent.

On the next sheet Draw a simple picture of what you would expect
a volcano to look like. Also identify candidate agents for your
volcano simulation.
(Take 2-5 minutes brainstorming and drawing.)
Squeak SimBuilder Tutorial © Virginia Tech Visual Languages Group-Draft
Volcano Simulation
Squeak SimBuilder Tutorial © Virginia Tech Visual Languages Group-Draft
Creating a Volcano Simulation

To Leave WaterCycle
Select Navigator and Press PREVious project.
 Now that you are back in the Welcome page.
Select Navigator and Press NEW project at the end of Navigator.

Click Unnamed1 at the bottom of the new window and
Replace it with volcano_yourInitials.

Click

Once you have an idea of the new environment you want to
create, begin by creating new players. You can use a your
to paint whatever you like.

You can create a mountain, sparks(that fly out of the volcano),
lava and any other players that will improve the aesthetic view of
your playground. Perhaps you would like to include a sky for
background, or trees, etc. If you need help drawing a player,
refer to the interaction guide.
to begin a New Project.
Squeak SimBuilder Tutorial © Virginia Tech Visual Languages Group-Draft
Adding Behaviors to Volcano Simulation

To make your volcano erupt, the players need to interact with each other. To add
actions and behaviors to your simulation in your next session, we would like you
to think about the possible behaviors that your players can possess.
For example, in the simulation that you reviewed, a cloud moves from place
to place, produces rain and changes itself to a rain cloud.


Think of interactions that happen to cause a volcano to erupt. The eruption
of a volcano is caused by pressure within the earth crust that needs to be
released.
Have fun trying to get your agents to collaborate in interesting ways.
When finished Save your project.
Press
Press
in the Navigator and then
project and you should be back at the Welcome page.
Squeak SimBuilder Tutorial © Virginia Tech Visual Languages Group
Exploring Visual
Programming
Section II
Reusing Starter World
to Create
Erosion and Ocean World Simulation
The new environment that you could simulate is an Ocean
biosphere. This simulation will involve the interaction of
several complex factors. There will be an ocean, the
ocean produces waves, the waves hit the beach, and
after they hit the beach they cause the amount of the
sand on the beach to decrease from erosion…

On the next sheet draw a simple picture of what you
would expect an Ocean World Simulation to look like.
Also identify candidate players for your Ocean World
simulation.
(Take 2-5 minutes brainstorming and drawing.)
Ocean World Simulation
Reusing the Starter World
The Starter World is a simulation that contains some of the basic
functionality of SimBuilder programs. It contains players that move,
erase, emit other players, and change themselves into other forms.

Open the Starter World Simulation.

Now,

Press
to start this model.
Investigate each player to discover its’ behavior.
The Mover just moves in one direction.
The Emitter produces another agent.
The Eraser erases other agents that it contacts.
The Replacer replaces the Mover with another agent.
The Changer will change another player into a new player when it
comes in contact with it.

Press
after a few minutes of observing the model.

Refer to interactions guide for Help.
Creating new agents and
Adding behaviors to create Ocean World Simulation.
A simulation in SimBuilder is simply a set of players that work together
to create visual effects.
A key aspect of reusing a simulation is to reusing existing players and adding new agents.
We will begin with the small task of reusing a new player from the Starter World.
Task 1. Create a new project
In the Navigator and Press
project.
 Click Unnamed1 at the bottom of the new window and
 Rename it OceanWorksheetYourInitials
Click the Ocean Project to enter it.
Task 2.
new players
Refer to interactions guide if you need Help.
Task 3. Reusing and creating new behavior for your new player
 Some player already have behavior scripts. You may need to look at their behaviors to
get started. You can also reuse the player by just using the
grey repaint brush to change their look and just reusing their behavior

Add behaviors for new players you create.
Refer to interactions guide for Help.
Think of other interactions to make your Ocean World simulation interesting.
Save your project.
Press

Press
in the Navigator and then
and return to the Welcome page.
Reusing Ozone World
to Create
Photosynthesis World Simulation
The new environment that you could simulate is an instance
of Photosynthesis. This simulation will involve the
interaction of several complex factors. There will be a
sun, the sun produces solar energy energy as sunrays,
the sunrays shine on plants, and after they hit the
plants, the plants grow bigger because the sun’s energy
causes photosynthesis to occur.

On the next sheet draw a simple picture of what you
would expect a Photosynthesis Simulation to look like.
Also identify candidate agents for your simulation.
(Take 2-5 minutes brainstorming and drawing.)
Reusing Ozone World
In the Ozone depletion Cycle a factory emits CFC into the atmosphere and a
heterogeneous reaction takes place. This reaction converts the inactive
chlorine and bromine reservoirs to more active form. No ozone loss occurs
until sunlight initiates the catalytic ozone destruction.


Open the Ozone Depletion Simulation.
Now, Press
to start this model.

Investigate each agent to discover its’ behavior.
The Smoke_stack agent emits chemicals into the atmosphere.

The Chemicals are emitted by the smoke stack and move up into the
atmosphere. They are changed into active BrCl when contacted by the sun.


The Sun agent replaces the inactive chemicals with active BrCl.

The BrCl agent moves randomly until it contacts an ozone agent.

The ozone absorbs (erases) BrCl and is changed into a weaker ozone agent

Press
after a few minutes of observing the model.
Refer to interactions guide for Help.
Creating new agents and
Adding behaviors to create Photosynthesis Simulation.
A simulation in Agentsheets is simply a set of agents that work together to create visual effects.
A key aspect of reusing a simulations is to specialize existing agents and adding new agents. We
will begin with the small task of reusing a new agent from the Ozone World.
Task 1. Click on Gallery

Click on File  Save.

Name this gallery as Photosynthesis_Gallery_YourInitials
Create a new Worksheet

Click on File  New Worksheet.

Name this worksheet as Photosynthesis_Worksheet_YourInitials
Task 2. Draw a new agent
Refer to interactions guide for Gallery/Worksheet Tools and more help.
Task 3. Reusing and creating new behavior for your new agent

Some agents already have behaviors. You may need to look at there behaviors to get
started. You can reuse their behavior by just dragging the entire rule that you would
like to reuse into your agent’s behavior palette.

Add new behaviors.
Refer to interactions guide for more Help.

Think of other interactions to make your Photosynthesis World simulation an
interesting representation.

Save and close your new world when complete.
Reusing Ozone World
to Create
Erosion and Ocean World Simulation
The new environment that you could simulate is an Ocean
biosphere. This simulation will involve the interaction of
several complex factors. There will be an ocean, the
ocean produces waves, the waves hit the beach, and
after they hit the beach they cause the amount of the
sand on the beach to decrease from erosion…

On the next sheet draw a simple picture of what you
would expect an Ocean World Simulation to look like.
Also identify candidate players for your Ocean World
simulation.
(Take 2-5 minutes brainstorming and drawing.)
Creating new agents and
Adding behaviors to create Ocean World Simulation.
A simulation in SimBuilder is simply a set of players that work together to create visual effects.
A key aspect of reusing a simulation is to specialize existing agents and adding new agents. We
will begin with the small task of reusing a new agent from the Ozone World.
Task 1. Click on Gallery

Click on File  Save.

Name this gallery as Ocean_Gallery_YourInitials
Create a new worksheet

Click on File  New Worksheet

Name this worksheet as Ocean_Worksheet_YourInitials
Task 2. Draw a new agent
Refer to interactions guide for Gallery/Worksheet Tools and more help.
Task 3. Reusing and creating new behavior for your new agent

Some agents already have behaviors. You may need to look at there behaviors to get
started. You can reuse their behavior by just dragging the entire rule that you would
like to reuse into your agent’s behavior palette.

Add new behaviors.
Refer to interactions guide for more Help.

Think of other interactions to make your Ocean World simulation an interesting
representation.

Save and close your new world when complete.
Reusing Starter World
to Create
Photosynthesis World Simulation
The new environment that you could simulate is an instance
of Photosynthesis. This simulation will involve the
interaction of several complex factors. There will be a
sun, the sun produces solar energy energy as sunrays,
the sunrays shine on plants, and after they hit the
plants, the plants grow bigger because the sun’s energy
causes photosynthesis to occur.

On the next sheet draw a simple picture of what you
would expect a Photosynthesis Simulation to look like.
Also identify candidate players for your simulation.
(Take 2-5 minutes brainstorming and drawing.)
Creating new agents and
Adding behaviors to create Photosynthesis Simulation.
A simulation in Agentsheets is simply a set of agents that work together to create visual effects.
A key aspect of reusing a simulations is to specialize existing agents and adding new agents. We
will begin with the small task of reusing a new agent from the Starter World.
Task 1. Click on Gallery

Click on File  Save.

Name this gallery as Photosynthesis_Gallery_YourInitials
Create a new Worksheet

Click on File  New Worksheet.

Name this worksheet as Photosynthesis_Worksheet_YourInitials
Task 2. Draw a new agent
Refer to interactions guide for Gallery/Worksheet Tools and more help.
Task 3. Reusing and creating new behavior for your new agent

Some agents already have behaviors. You may need to look at there behaviors to get
started. You can reuse their behavior by just dragging the entire rule that you would
like to reuse into your agent’s behavior palette.

Add new behaviors.
Refer to interactions guide for more Help.

Think of other interactions to make your Photosynthesis World simulation an
interesting representation.

Save and close your new world when complete.
Interaction Guide(Worksheet & Gallery Tools)
Create a new Project
Open an existing file
Condition Palette
Action Palette
The Cursor Tool allows users to drag agents around within a worksheet.
The Pencil Tool allows users to add agents to a worksheet. To use the Pencil Tool an agent in the current
gallery must be highlighted. When you then click in a worksheet, an instance of the highlighted agent is
placed in the worksheet where you click.
The Eraser Tool erases agents in a worksheet. Click on an agent with the Eraser Tool to make it disappear.
The Finger Tool ,Whack Tool, Link Tool, Unlink Tool have no preset behavior associated with it. It can be
programmed by users through the use of Tool Triggers.
The Block Draw Tool allows users to place multiple agents in a worksheet. Like the Pencil Tool, the Block
Draw Tool requires that an agent in the current gallery be highlighted. The Block Draw Tool creates a
bounding box that expands as a user clicks and drags within a worksheet. After the mouse is released, all
cells in the block bounded by the bounding box will be filled with instances of the previously highlighted
agent. This Block works for agents on the worksheet and is a Block fill that you can use when creating an
agent.
The Fill Tool fills in any closed and empty region of a depiction with the color indicated in the Ink Color box.
The Color Sampler Tool looks like an eyedropper and acts like one metaphorically. You can use the Color
Sampler to grab colors from pixels anywhere in the depiction window. Choose the Color Sampler and
sample from colors in the Ink Color Palette.
Attributes can be defined for any AgentSheets agent. Clicking on an agent in a worksheet with the Attribute
Query Tool brings up an attribute window showing the agent's attributes and their values.
Gallery Tools
To create a new depiction press
. To change look press
To Edit Behavior or change rule press
.
To get an alternative look for an agent press
.
. See page 6 for details.
After creating a new depiction or agent you always want to define a Mask Color for it. Masks are like filters
or films of a given color that cover the cell a depiction inhabits. For a transparent mask select
Color  Mask Color  upper left pixel (is the most common mask).
Interaction Guide (Creating Agents)
To inspect an agent more closely double click on it and you will see its 32x32-pixel representation.
If you don’t get a larger view of the agent that is editable, you are in the wrong view.

Select Gallery  Designer Views to get the correct view.
Drawing an agent

Click on Gallery  New Agent and add a agent by entering it in the dialog box.

Double click on agent at the bottom of the gallery to select it. Use the pencil and color palette to draw
your new agent.
After creating a new depiction you always want to define a Mask Color for it. Masks are like filters or films of a
given color that cover the cell a depiction inhabits. The reason you may need this is the following example:
When a cloud floats through the sky it may float in front of the sun. Instead of blocking out the sun you
can still see portions of the sun this is caused by having a transparent background. If the background
were not transparent the sun would be obscured from view completely when a cloud passes over it.
For a transparent background mask

Click on Gallery  Mask Color and then select upper left pixel (is the most common mask).
To test one rule at a time you can grab the whole rule and drag it on top agent in the worksheet. If you do this
correctly the area around the agent will be highlighted with a red box.
You can use
to test the simulation, but to incrementally run the simulation one step at a time you should
use the step button
instead.
AgentSheets Tutorial © Virginia Tech Visual Languages Group-Draft
Interaction Guide (Creating & Testing Rules)
What are Rules?
Rules are the things that define agent behavior. A Rule is made up of a condition/action pair. When an
agent’s behavior has more than one rule, the rules are evaluated in order. The first condition satisfied
will cause that action to be executed. Condition/Action pairs are color coded with conditions in Blue and
actions in red.
Adding Behaviors to an agent

Click on Gallery  Edit Behavior.

This will bring up the window to add behaviors to your agent. Let’s add the behavior that your agent
will move in one direction.

You must open the Condition and Action Palette and use them in creating your rules.
Select Tools  Condition Palette and Tools  Action Palette
Shortcut: You can also open Condition and Action Palette by double clicking in the center of IF to
open Condition Palette and by double clicking in center of Then to open Action Palette
You can change and create agent behaviors with rules.

Rules can be viewed by clicking Tools  Condition Palette and Tools  Action Palette.
You program by simply clicking on a rule, then dragging and dropping conditions and actions into the agent’s
behavior.
To delete a rule or method from an agent’s behavior, simply drag it to the trash.
To reuse a set of rules from another agent is a two step process. Step1: Look at the behavior of an agent that you
would like to reuse. Select Gallery  Edit Behavior. Step2: Drag the rule set that you would like to reuse into
your new agent’s behavior palette. Hint:You must grab the rule on the then section to move the complete rule.
To test one rule at a time you can grab the whole rule and drag it on top agent in the worksheet. If you do this
correctly the area around the agent will be highlighted with a red box.
You can use
to test the simulation, but to incrementally run the simulation one step at a time you should use
the step button
instead.
Interaction Guide
Behavior Interactions
(Condition Commands)
The See condition command looks at any of its eight immediate neighbors (at a depth of 1 cell away) and
perhaps itself to see if the indicated cell contains the depiction shown in the depiction window of the
command.
The See a condition command looks at any of its eight immediate neighbors and itself to see if the cell
indicated by the direction operator contains an agent of the class specified in the class menu of the
command. This command picks out all the depictions of a given agent class. For example, in the
Gallery below, all 4 depictions shown are members of the class Auto. The name of an agent class
is the same as the name of the base agent depiction of that class.
The Next to condition command contains a comparator menu, a number field, and a depiction menu, in
that order. These fields combine with the title of the command to form a coherent phrase: "next to
greater than 3 north-facing auto(s).
The Empty condition command checks to see if its immediate neighbor or itself (as specified by the
direction operator) is empty.
The % Chance condition command as shown above returns a value of T or True 50% of the time. The %
Chance command chooses a random number between 1 and 100 inclusive whenever it is executed.
If this number is less than the number indicated in its number field the command returns a value of T
or True, indicating the condition was met. If the random number chosen is greater than or equal to
the number shown in the command's number field, the command returns a value of NIL or False,
indicating the condition was not met. You type in the %chance of the command returning true in the
command's number field.
The Once every {number} Secs command as shown to the left checks to see if 3 seconds has passed
since it was last checked.
(Action Commands)
The Move action command tells the executing agent to move one cell in the direction indicated by the
direction operator.
The Change action command changes the depiction of the agent in the cell indicated by the direction
operator to the depiction displayed in the command's depiction window.
The New action command makes a new agent in the cell indicated by the direction operator.
The Erase action command erases the agent located in the cell indicated by the command's direction
operator.
Interaction Guide
Agentsheet Tools
Create a new Project
Open an existing file
Condition Palette
Action Palette
Worksheet Tools
The Cursor Tool allows users to select or drag agents around within a worksheet.
The Pencil Tool allows users to add agents to a worksheet. To use the Pencil Tool an agent in the current gallery
must be highlighted. When you then click in a worksheet, an instance of the highlighted agent is placed in the
worksheet where you click.
The Eraser Tool erases agents in a worksheet. Click on an agent with the Eraser Tool to make it disappear.
The Finger Tool has no preset behavior associated with it. It can be programmed by users through the use of Tool
Triggers.
The Whack Tool has no preset behavior associated with it. It can be programmed by users through the use of Tool
Triggers.
The Block Draw Tool allows users to place multiple agents in a worksheet. Like the Pencil Tool, the Block Draw Tool
requires that an agent in the current gallery be highlighted. The Block Draw Tool creates a bounding box that
expands as a user clicks and drags within a worksheet. After the mouse is released, all cells in the block bounded
by the bounding box will be filled with instances of the previously highlighted agent.
The Block Erase Tool allows user to erase multiple blocks by dragging across the worksheet until mouse is released.
The Fill Tool fills in any closed and empty region of a depiction with the color indicated in the Ink Color box.
The Color Sampler Tool looks like an eyedropper and acts like one metaphorically. You can use the Color Sampler
to grab colors pixels anywhere on the screen. Choose the Color Sampler and sample from colors in the Ink
Color Palette. You can also grab colors from anywhere on your desktop, even outside of the depiction editor.
Clicking on an agent in a worksheet with the Attribute Query Tool brings up an attribute window showing the agent's
attributes and their values.
Gallery Tools
To create a new depiction press
. To change look press
To Edit Behavior or change rule press
.
To get an alternative look for an agent press
.
. See page 6 for details.
After creating a new depiction or agent you always want to define a Mask Color for it. Masks are like filters or films of
a given color that cover the cell a depiction inhabits. For a transparent mask select
Color  Mask Color  upper left pixel (is the most common mask).
AgentSheets Tutorial © Virginia Tech Visual Languages Group-Draft
Descargar

Exploring Visual Programming