Exploring Visual Programming

Exploring Visual
Programming
Stagecast Creator Tutorial, Activity I:
Kids Smoking on the Playground
Visual Programming Group
Center for Human-Computer Interaction
Virginia Tech
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].
Introduction


Stagecast Creator is used to build visual simulations,
animated worlds. You will learn to use and change
example worlds, and eventually build your own.
We are interested in how Creator might be used to build
simulations interesting the Blacksburg community.

No programming experience is required to use Creator.

A Quick Reference Sheet is provided as a help aid.
Explore the Smoking Kids

Open the Stagecast Creator program.



Browse the list of worlds and select Smoking Kids.
Click Open
Play the smoking kids simulation.



on the screen.
Open a world; click on


Double click on the
Watch what happens. How do the kids change? Why?
Stop the simulation when you have watched it a few times.
Reset the world using the Creator menu
in the upper left corner.
Smoking and Sickness

Let’s see how smoking and sickness work. Double click on the girl
 A window with her possible behaviors or rules opens.
 Click on the orange tab
at the bottom of the window.
After you click
it will change to look like this.

What value does the sickness variable have? Why?
Smoking and Sickness
Each kid has a characteristic called
We call this characteristic a variable.
Every time a kid puffs, their
.
variable increases.
The Rules for Sickness
When sickness equals 5, the kid turns gray.
When sickness equals 10, the kid falls down.
While the kid lies down, sickness gradually decreases.
When sickness gets back to 0, they stand up.
Step through the simulation one step at a time until the girl collapses.
What happens to the girl at each step? What is her sickness variable after 3 steps?

Step1 ____________________________________
Sickness ___________
Step2 ____________________________________
Sickness ___________
Step3 ____________________________________
Sickness ___________
Close the variable list by clicking again on
.
How Does Sickness Work?


Double click on the

Creator rules are set up as before-after pairs.
IF the before part matches a situation in the world;
Then the after part of the situation is changed.

What is the before situation for this rule? The after part?
BEFORE ___________________
AFTER ________________
To see how sickness works, look at the details of the before part.
 Click on the
“show the tests” on the left of the rule maker window.


How is sickness tested?
Now let’s change how the sickness variable is used.
 Click on
in the rule maker. Change the sickness test to be 10, then
click
.
Run the simulation to test your changes.



rule.
Do you see a difference between the two kids now?
Stop and Reset the simulation before continuing.
Making a More Realistic Simulation



It seems odd that the kids just fall down without sitting first. Why don’t we add
this in?
 If the girl’s rule maker is not open, double click to open it.
Open and
the girl’s Collapse rule.
 What actions does she take when this rule fires? (check the right
 What test decides whether she will collapse? (check the left
)
Examine the girl’s appearances by using a right click
after part of the rule.
)
on the girl in the
When would you
use the different
appearances?

How should she
look before falling
to the ground?

Making a More Realistic Simulation

Use the appearance menu to select the sit-puff appearance, then do the
same thing to select sit-hold.
 Look the list of actions for this rule. What has changed?

Make sure the actions are in the order you want, so that the girl sits before
she collapses.

First she sits and puffs, then she sits and holds, and finally she collapses.
If the actions are out of order, select one and drag it to a new location (this will
be shown by a black line).

Run the simulation to test your changes then make the same changes for the
boy.
Add a Character


Click the ‘create a character’
button and then click on a clear
space on the stage. A blob should appear.
Now we want to make the blob into a new character.




Click ‘draw an appearance’ button
and then on the blob. The
picture painter window will appear.
Click
and then use one of the drawing tools to make a cloud.
Note: the second color on the top left hand side works best.
When you are finished click
.
the simulation. What happens? What does the cloud do?
Adding Rules to a New Character



Now we are going to make rules so that the cloud can move.
Let’s make it move right first.
Click on the ‘make a rule’ button
and then on the smoke. The rule
maker opens and a yellow spotlight appears around the cloud.
Stretch the spotlight over one block to the right. Move the cloud to the
new highlighted box.
Before:
After:

Name this rule Move Right. When your finished click
. Now make two
more rules, one to make the cloud go up and another one to make it go down.

the simulation. What does the cloud do now?
Is it moving the way you expected?
Double click on the cloud and open it’s rule window.
again. Rule
ordering counts. The first rule available that works will be done even if there
are others that also work.

Change the order of the rules so that the Move Right rule is first.
one more time to see how it works.


Click on the copy tool
and then click the cloud character. Make about 5
more and place them at the top of the screen.
and see how they interact.