1. 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 seals@csgrad.cs.vt.edu. SimBuilder Tutorial © Virginia Tech Visual Languages Group

2. Preliminaries n The purpose of this document is to introduce you to SimBuilder by helping you create a small project. n SimBuilder is designed for building simulations, such as a model of the water cycle. n No programming experience is required. n 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. n The last page of this document contains an interaction guide. Squeak SimBuilder Tutorial © Virginia Tech Visual Languages Group

3. Exploring the Water Cycle Model n Double click to open the Squeak environment. n Select Water Cycle  This will open your first example of a simulation. n Now, Press to start this model.  Watch the Simulation.  What actions are taking place? n Press after a few minutes of observing the model. Squeak SimBuilder Tutorial © Virginia Tech Visual Languages Group AgentSheets Tutorial © Virginia Tech Visual Languages Group-Draft Squeak

4. Exploring The Sun Let’s investigate the players To investigate the Sun n Click or 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

5. Changing The Behavior of Clouds n Examine some of the more complicated behaviors by selecting the Cloud and reviewing its behavior. n 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 to see how your changes affect the simulation.  Press 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. n Click or Click your cloud and it’s Halo will appear. n 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 n Click on the green arrow and change its direction so that it points to the right. n Press to see how the simulation has changed. Squeak SimBuilder Tutorial © Virginia Tech Visual Languages Group

6. 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. n 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

7. 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. u The viewer is a window to select behaviors for your agent. u Let’s add the behavior that your agent will move in one direction. u Select u and Drag it out of the viewer and place it anywhere, preferably not in the playground. n 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. n Click or Click your bird and it’s Halo will appear. n Select Rotate and move your bird just a tiny bit for it’s direction arrow to appear. n 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

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

9. Volcano Simulation Squeak SimBuilder Tutorial © Virginia Tech Visual Languages Group-Draft

10. 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 to begin a New Project.  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. Squeak SimBuilder Tutorial © Virginia Tech Visual Languages Group-Draft

11. Adding Behaviors to Volcano Simulation n 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. n 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. n Have fun trying to get your agents to collaborate in interesting ways. When finished Save your project. Press in the Navigator and then Press project and you should be back at the Welcome page. Squeak SimBuilder Tutorial © Virginia Tech Visual Languages Group

12. Section II Exploring Visual Programming

13. 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.)

14. Ocean World Simulation

15. 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. n Open the Starter World Simulation. n Now, Press to start this model. n 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. n Press after a few minutes of observing the model. n Refer to interactions guide for Help.

16. 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 in the Navigator and then  Press and return to the Welcome page.

17. 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.)

18. 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. n Open the Ozone Depletion Simulation. n Now, Press to start this model. n Investigate each agent to discover its’ behavior. The Smoke_stack agent emits chemicals into the atmosphere. n 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. n n The Sun agent replaces the inactive chemicals with active BrCl. n The BrCl agent moves randomly until it contacts an ozone agent. n The ozone absorbs (erases) BrCl and is changed into a weaker ozone agent n Press after a few minutes of observing the model. Refer to interactions guide for Help.

19. 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 n Click on File  Save. n Name this gallery as Photosynthesis_Gallery_YourInitials Create a new Worksheet n Click on File  New Worksheet. n 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 H 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. H Add new behaviors. Refer to interactions guide for more Help. H Think of other interactions to make your Photosynthesis World simulation an interesting representation. H Save and close your new world when complete.

20. 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.)

21. 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 n Click on File  Save. n Name this gallery as Ocean_Gallery_YourInitials Create a new worksheet n Click on File  New Worksheet n 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 H 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. H Add new behaviors. Refer to interactions guide for more Help. H Think of other interactions to make your Ocean World simulation an interesting representation. H Save and close your new world when complete.

22. 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.)

23. 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 n Click on File  Save. n Name this gallery as Photosynthesis_Gallery_YourInitials Create a new Worksheet n Click on File  New Worksheet. n 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 H 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. H Add new behaviors. Refer to interactions guide for more Help. H Think of other interactions to make your Photosynthesis World simulation an interesting representation. H Save and close your new world when complete.

24. Interaction Guide (Worksheet & Gallery Tools) 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. See page 6 for details. To Edit Behavior or change rule press. To get an alternative look for an agent press. 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). Create a new Project Open an existing file Condition Palette Action Palette

25. 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. n Select Gallery  Designer Views to get the correct view. Drawing an agent n Click on Gallery  New Agent and add a agent by entering it in the dialog box. n 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 n 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

26. 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 n Click on Gallery  Edit Behavior. n 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. n 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. n 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.

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

28. 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. See page 6 for details. To Edit Behavior or change rule press. To get an alternative look for an agent press. 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