Exploring Computer Programming with Alice
Middlesex Community CollegeIntroduction to Technology
Fall 2011Prof. Lori Weir
Fall 2011
Student Learning Outcomes
• Introduction to Computing Careers• Introduction to Alice• Setting up an initial scene in Alice• Designing an animated scenario• Implementing a design• Programming• Summary• Going forward
2Middlesex Community College
Middlesex Community College <<DRAFT>>
INTRODUCING ALICEGetting Started with Visual Programming
Fall 2011 3
Middlesex Community College <<DRAFT>>
What is Alice?
• Alice is a visual programming language.• Alice is an object based language. The
objects in Alice are 3 dimensional models.• The output of Alice programs is an
animation.– Objects can be made to move around the
virtual world:• A video game• A simulation
Fall 2011 4
Middlesex Community College <<DRAFT>>
The Alice Software
• A 3D interactive animation environment• http://www.alice.org/• A tool for teaching fundamental programming
concepts– object based
• System developed at Carnegie Mellon
Fall 2011 5
Middlesex Community College <<DRAFT>>
Visual Programming
• Programming tasks are performed in an Integrated Development Environment(IDE).
• Programming is done by pointing and clicking, dragging and dropping, selecting from menus, and some typing.
• Syntax errors removed from the equation– no braces, no semi colons
Fall 2011 6
Middlesex Community College <<DRAFT>>
Object Tree World View Event Editor
Details PanelCode Editor Control
PrimitivesFall 2011 7
Middlesex Community College <<DRAFT>>
Object-Based Programming
• Built in library of models.• More available on the web.• All objects have certain methods and
behaviors – move, turn, say, roll, resize
• New methods can be added to an object
Fall 2011 8
Middlesex Community College <<DRAFT>>
Alice Models
• Main programming data are 3d models• Many built in and more on web
Fall 2011 9
Middlesex Community College <<DRAFT>>
Output
• Output is a 3d movie– run the program, play
a movie– can also add sound to
programs
• Much easier to recognize logic errors– "Why do my
ninja's armskeep flyingaway?"
Fall 2011 10
Middlesex Community College <<DRAFT>>
11
ACTIVITY 1Downloading and Exploring Alice Worlds
Fall 2011
Middlesex Community College <<DRAFT>>
Fall 2011
Downloading Alice
• From your browser, navigate to the Alice download page:http://www.alice.org/index.php?page=downloads/download_alice
• Follow the instructions for your platform (Windows, Linux, or MAC).
12
Middlesex Community College <<DRAFT>>
Fall 2011
Exploring Alice Worlds
• Open Alice from the DeskTop• Load and run a world:
– Octopus (movie)– Skater (interactive)
13
Middlesex Community College <<DRAFT>>
Fall 2011
Types of Animation
Movie
• Passive• User watches the
animation
Interactive
• User clicks on mouse or types a key on the keyboard.
• Actions of user are called events
14
Middlesex Community College <<DRAFT>>
15
SETTING UP A SCENE IN ALICE
Getting Started Programming in Alice
Fall 2011
Middlesex Community College <<DRAFT>>
Alice Programming
• Problem solving and programming in Alice– given a scenario create program to enact the
story• Example scenario:
– A bunny is hopping in a field of fern and one tulip.
– The bunny notices the tulip.– The bunny hops over to the tulip.– Accidentally, the bunny knocks the tulip.
Fall 2011 16
Middlesex Community College <<DRAFT>>
Creating a New World
Fall 2011 17
Middlesex Community College <<DRAFT>>
Selecting a Template
Fall 2011 18
Middlesex Community College <<DRAFT>>
Objects in The World
• An object is:– Any thing that can be identified as unique
from other things.• How is an object unique?
– Name– Properties
• Width, height, color, location
– Can perform actions• Referred to as methods
Fall 2011 19
Middlesex Community College <<DRAFT>>
Adding Objects to the World
Fall 2011 20
Middlesex Community College <<DRAFT>>
Adding Objects
• Two ways to add objects:– Drag and
Drop– Click on
picture then click on Add Instance
Fall 2011 21
Middlesex Community College <<DRAFT>>
Fall 2011
Techniques and Tools
Mouse is used to
Approximately position objects in the scene.
22
Middlesex Community College <<DRAFT>>
Mouse Control Tools Kit
Default. Move selectedobject left, right, forward, backwards.
Move selectedobject up and down.
Turn object left and right.Turn object forwards andbackwards.
Tumble objects.
Resize objects.
Copy objects.
CTRL Z or Undo Button to undo mistakes!Fall 2011 23
Middlesex Community College <<DRAFT>>
Camera Controls
Alter position of camera with these controls.Fall 2011 24
Middlesex Community College <<DRAFT>>
Alternate Positioning Techniques
• Right click on object in world on object tree and select method
• Drag and drop method from the details panel.
Fall 2011 25
Middlesex Community College <<DRAFT>>
Quad View
• Use world's absolute frame of reference to view relative position of objects
Fall 2011 26
Middlesex Community College <<DRAFT>>
Fall 2011
Objects Frame of Reference
• Objects in Alice– Have their own frame of reference– forward – backwards– up – down– left – right
27
Middlesex Community College <<DRAFT>>
Frame of Reference
• Clicking on object brings up its bounding box
• Can also see center point
• .. and axes
Fall 2011 28
Middlesex Community College <<DRAFT>>
Frame of Reference
UP
RIGHT
FORWARD
CENTERPOINT
Fall 2011 29
Middlesex Community College <<DRAFT>>
Subparts
• Objects often have sub parts– may have their own frame of
reference• Clicking affect subparts box
allows selection and movement of subparts
Fall 2011 30
Middlesex Community College <<DRAFT>>
Subparts
• Bigger ear
Fall 2011 31
Middlesex Community College <<DRAFT>>
Finding Objects
• To reposition in a quad view– select zoom in and out
from mouse controls– zoom way out– select scroll from
mouse controls to center objects
– zoom back in
Fall 2011 32
Middlesex Community College <<DRAFT>>
Back to Programming View
• When setup complete click the green done button to go back to the programming view.
Fall 2011 33
Middlesex Community College <<DRAFT>>
Fall 2011
Saving a World
• Writing and testing an animation is an intense load on the computing system – a crash can occur.
• Best solution– Save your world very 15 minutes (or at least
every half hour).– Also, save to a backup device
• Zip drive• Memory key
34
Middlesex Community College <<DRAFT>>
35
ACTIVITY 2Creating a World
Fall 2011
Middlesex Community College <<DRAFT>>
Setting Up the Initial Scene
• From the Alice programming environment:1. create a new world.
2. Add bunny
3. Add fern and flower• local gallery -> nature
– Fern– Tulip
4. Resize bunny to make her smaller• Use the drop down menus
or drag and drop
October 16, 2011 36
Middlesex Community College <<DRAFT>>
37
PROGRAMMING THE WORLD
From a storyboard to a program
October 16, 2011
Middlesex Community College <<DRAFT>>
Fall 2011
Step 1: Design
• A program is a solution to a problem.• Determine the problem to be solved.• Design a solution to the problem.
– We will use a storyboard design technique.– Commonly used in the film and gaming
industries.
38
Middlesex Community College <<DRAFT>>
Example Story
• A bunny is sitting in a field of fern.• The bunny notices a beautiful tulip.• The bunny hops over to tulip.• The bunny accidentally knocks over the
tulip.• Let's add some detail at the start of the
movie. – The bunny first turns to face the camera. – Then the bunny hops up and down.
Fall 2011 39
Middlesex Community College <<DRAFT>>
Fall 2011
Options for Storyboards
• Sketches• Screen shots from Alice• Text
– A to-do list of steps
40
Middlesex Community College <<DRAFT>>
Fall 2011
Step 2: Implementation
• To implement the storyboard, translate the actions in the storyboard to a program.
• Program (a.k.a. script)– A list of instructions to have the objects
perform certain actions in the animation.
41
Middlesex Community College <<DRAFT>>
Fall 2011
Action Blocks in Alice
42
Sequential Action BlockActions occur one after another
Simultaneous Action BlockActions occur at the same time
Middlesex Community College <<DRAFT>>
Fall 2011
Concepts in this First Program
• Program instructions may have arguments– Example: for the move instruction, the
arguments we used where:• Direction• Distance
– Do Together and Do In Order blocks can be nested one inside the other
43
Middlesex Community College <<DRAFT>>
Fall 2011
Testing
• An important step in creating a program is to run it – be sure it does what you expect it to do.
• We recommend you use an incremental development process:– Write a few lines of code, then run it– Write a few more lines of code, then run it– Write a few more lines or code…
44
Middlesex Community College <<DRAFT>>
Fall 2011
Comments
• While Alice instructions are easy to understand, a particular combination of the instructions may perform an action that is not immediately obvious.
• Comments document the code – explain the purpose of a particular segment of the program to the human reader.
45
Middlesex Community College <<DRAFT>>
Methods
• Select the world object from the object tree and the methods tab in the details panel.
• The world starts with a single method, "my first method"
• Like main in a Java or C++ program.
Fall 2011 46
Middlesex Community College <<DRAFT>>
47
ACTIVITY 3Adding to ‘My First Method’
October 16, 2011
Middlesex Community College <<DRAFT>>
Fall 2011
Adding Commands to a Method
• If the "my first method" is not displayed in the code editor click the edit button next to the method in the detail panel.
• Commands are added by dragging and dropping them into a method.
• Select the bunny from the object tree.• Drag the turn to face command into the
code editor.• TEST!
48
Middlesex Community College <<DRAFT>>
Adding Commands• turn to face is a method• When adding a method to
the code editor if any parameters are required a menu pops up to select the arguments.
• Select thecamera.
Fall 2011 49
Middlesex Community College <<DRAFT>>
Fall 2011
More Parameters
• After adding the bunny.turn to face command the "my first method" will look like this:
• Click on the "more" option to see what other parameters can be changed– duration, style, asSeenBy– change duration to 3 seconds
50
Middlesex Community College <<DRAFT>>
Test
• Click the play button to see the movie / output of the program.
• "my first method" will execute.
Fall 2011 51
Middlesex Community College <<DRAFT>>
PROGRAMMING: PUTTING TOGETHER THE PIECES
Built-in Functions and Expressions
Fall 2011 52
Middlesex Community College <<DRAFT>>
Adding Behaviors
• Next we want the bunny to hop. • Methods can be world level or class
level.– world level methods belong to the world.
• a method should be world level method if it involves two or more objects
– class level methods belong to a particular class / object.• a method should be a class level method if it
involves only one object
Fall 2011 53
Middlesex Community College <<DRAFT>>
Creating a Hop Method
• The bunny does not have a hop method so we will create one.
• Select the bunny from the object tree and click on the create new method button in the details panel.
Fall 2011 54
Middlesex Community College <<DRAFT>>
Creating a Hop Method• A window pops up asking for the name
of the method– try various names to see what is a legal
identifier and what is not• After giving the new method a name a
new tab pops up in the code editor• Should hop be one hop or
parameterized? • Should parameter be time to hop or
number of hops to make?• Any other way to make it more general?
Fall 2011 55
Middlesex Community College <<DRAFT>>
Adding Parameters
• Let's add parameters for distance to hop up and the time to do the hop
• Click the create new parameter button in the code editor.
Fall 2011 56
Middlesex Community College <<DRAFT>>
Adding Parameters
• Give the parameter a name and pick the data type– distance -> a Number– time -> a Number
• When called the hop method now requires two parameters
Fall 2011 57
Middlesex Community College <<DRAFT>>
Adding Commands to Hop
• To hop the bunny will move up and then down.
• Drag the move command into hop and fill in the parameters.
• Drag another move command into hop and fill in the parameters.
Fall 2011 58
Middlesex Community College <<DRAFT>>
Adding Commands to Hop
• To change the duration of moving up select the more option from the move command.
• Select duration then expressions then time (or the name of your parameter for time)
Fall 2011 59
Middlesex Community College <<DRAFT>>
Fall 2011
Adding Commands to Hop
• To change the duration of the move to half of the time parameter click on the triangle to open the drop down menu.
• Select math and divide time by 2.• Do the same for the move down.
60
Middlesex Community College <<DRAFT>>
Completed Hop Method
Fall 2011 61
Middlesex Community College <<DRAFT>>
Back to my first method
• Now that the bunny can hop and the broccoli can grow we can complete the first part of the story board
• After the bunny turns to face the camera we want the bunny to hop.
Fall 2011 62
Middlesex Community College <<DRAFT>>
Hopping
• We want the bunny to hop for 5 seconds.• Back to my first method• Have rabbit hop up and down .25 meters
at 0.5 seconds per hop• How many hops?
Fall 2011 63
Middlesex Community College <<DRAFT>>
Fall 2011
Looping
• A counted loop is used when the number of repetitions can be calculated
• Drag a Loop primitive into the Do together block
• Number of times to loop is 10
64
Middlesex Community College <<DRAFT>>
Hopping
• After Loop is added to Do together• drag and drop the
bunny hop method into the loop
• Select 0.25 meters for distance to hop and 0.5 seconds for time
• Test!
Fall 2011 65
Middlesex Community College <<DRAFT>>
Noticing the Tulip
• Now we want the rabbit to – turn to face the tulip, – Think “Pretty!”– hop over to the tulip– Accidentally knock over the tulip.
Fall 2011 66
Middlesex Community College <<DRAFT>>
Test
• Test function by playing movie• Test further by changing initial set up of
broccoli to change which broccoli is closest
Fall 2011 67
Middlesex Community College <<DRAFT>>
Noticing the Tulip
• Do together• Bunny turn to face
tulip• Bunny thinks “Pretty!”• Tulip orients to bunny.
Fall 2011 68
Middlesex Community College <<DRAFT>>
Fall 2011
Hopping Forward
• Create a new method hopForward• Parameters for total distance and distance
per hop– lots of other ways to do this
69
Middlesex Community College <<DRAFT>>
Completing the Hopping
• Back in my first method call the hopForward method.
• Pick a dummy value for totalDistance.
• Replace dummy value with distance from bunny to tulip minus some offset. (no collision detection)
Fall 2011 70
Middlesex Community College <<DRAFT>>
71
ACTIVITY 4Testing your Knowledge
Fall 2011
Middlesex Community College <<DRAFT>>
72
Testing your Knowledge
• Working with a partner, make the flower shake and fall after the bunny stops hopping.
• What programming constructs do you need?
• Which methods will you use?
• What will the bunny say?
• Experiment with your closing camera position.
Fall 2011
Middlesex Community College <<DRAFT>>
Fall 2011
Exporting/Publishing
• Animated file• Web page
73
74Middlesex Community College <<DRAFT>>
What Next?
• Expand by adding more flowers– lists and variables to manage
• Add sounds• Add scenery• Add events
– Interactive programs can be created by adding events that program responds to.
Fall 2011
Middlesex Community College <<DRAFT>>
Fall 2011
Summary
• Learning Alice helps prepare you for an object-oriented language:– C++– Java
75
Middlesex Community College <<DRAFT>>
Adding Detail to the Hop Method
Fall 2011 76
Middlesex Community College <<DRAFT>>
Fall 2011
Going Forward
• Questions about computer science• Interest level?• Help
– Example worlds– Tutorial– www.alice.org
77