3/18/13
CS101 Lecture 20
Introduction to Alice
Alice is named in honor of
Lewis Carroll s Alice in Wonderland
Slides Credit: Joel Adams, Alice in Action
With thanks to John Magee for his guidance about these
materials
Alice
!   A modern programming tool
!   3-D graphics
!   3-D models of objects
!   Animation
!   Objects can be made to move around the
virtual world (a video game or simulation
implemented in 3-D)
!   Two kinds of animations:
!  Movie: passive user watches the animation
!  Interactive: active user clicks on mouse, types a key
on keyboard …
!  Actions of user are called events
1
3/18/13
Demo: Getting started
!  Starting Alice
!  Load and run a world
!   FairyCourt(movie)
!   HelicopterSimulation(interactive)
! F
irst program: Alice and
WhiteRabbit welcome us to their
world (movie)
Getting and Running Alice
!   Alice software is freely distributed
!   Downloading Alice
!
!
!
!
Go to the website: http://www.alice.org
Click the link Get Alice 2.3
Click download link specific to your operating system
Save Alice.zip (or Alice.dmg) to your PC
!   Installing and running Alice
!  Extract Alice from Alice.zip (or Alice.dmg) file
!  Create desktop shortcut (alias) to Alice.exe
!  Double-click Alice icon to launch Alice application
4
2
3/18/13
The Alice Tutorials (continued)
Go through the
tutorials to learn the
basics of Alice
5
Program Design
!  We don’t start with writing program code,
very much the same as filmmaker don’t
start with filming, rocket scientists don’t start
with building rockets
!  We start with design!
!  Design is very important and affects the
correctness and efficiency of the solution
!  Design needs to revised, improved…
Alice in Action with Java
6
3
3/18/13
Algorithms
!   An algorithm is a sequence of steps to solve a problem or perform a
task
!   Example algorithms:
!
!
!
!
!
!
Driving directions
Cooking instructions
Installation instructions
Algorithms for search of records in phonebook, database, web…
Algorithms for displaying, editing, animating pictures…
The flow of a user story in an animation
!   Algorithms are generally not tied to programming languages
!   Their implementations are
Alice in Action with Java
!   Contain
7
User Stories
!  Basic description of what happens when program
runs
!  Nouns in story (Alice, the White Rabbit) correspond to
objects
!  Verbs correspond to actions, responses to messages
!  Chronological flow describes the sequence of the
actions
When the program begins, Alice and the White Rabbit are facing
each other, Alice on the left and the White Rabbit on the right.
Alice turns her head and then greets us. The White Rabbit also
turns and then greets us. Alice and the White Rabbit introduce
themselves. Simultaneously, Alice and the White Rabbit say
Welcome to our world.
Alice in Action with Java
8
4
3/18/13
Program Design
!  For a given user story
!  plan scenes and shots
! S
cene: a piece of the story usually set in one location
!  Shot: part of scene told with camera in one position
!  Create storyboards
Alice in Action with Java
9
Transition Diagrams
!  Link the multiple storyboard-sketches
!  In a movie, transition diagram is a linear
sequence
!  In the first Alice program, there will be
7 actions
Alice in Action with Java
10
5
3/18/13
The Flow of User Story
A numbered sequence of objects and actions
1. Alice turns her head toward the user
2. Alice greets the user
3. The white rabbit turns toward the user
4. The white rabbit greets the user
5. Alice introduces herself
6. The white rabbit introduces himself
7. Simultaneously, Alice and the white rabbit say
Welcome to our world.
Alice in Action with Java
11
Programming Implementation in Alice
!   Templates provide a basic world environment
!   Sample program is based on the grass Template
!   Areas in the Alice window
!
!
!
!
!
!
!
Menus: includes File, Edit, Tools, and Help
Buttons: includes Play, Undo, and Redo
Object tree: lists all world objects; e.g., ground
Details area: includes properties, methods, functions
World window: displays graphic objects in a program
Editing area: includes editing space and controls
Events area: contains actions responding to events
Alice in Action with Java
12
6
3/18/13
Programming Implementation
in Alice (continued)
Alice in Action with Java
13
Program Style
!   Change program display styles in Preferences
!   How to access Preferences dialog box
!  Click the Edit menu
!  Click the Preferences choice
!   Selecting a display style in Preferences dialog
!  Click next to display my program in General tab
!  Select a style
!   Style recommended for course: Java Style in
Color
Alice in Action with Java
14
7
3/18/13
Program Style (continued)
(We are aware of a problem with this setting. It s ok to
keep it as Alice style.)
Alice in Action with Java
15
Demo: A new world
!   Create a new world
!   File  New
!   Choose template
8
3/18/13
Objects
!  An "object" is
!   any thing that can be identified as unique
from other things
!  How is an object unique?
!   has a name
!   has properties:
!  width, height, color, location
!   can perform actions (methods):
! a
ssociated actions it can perform
!  tasks it can carry out
Object Parts
!   Objects may be composed of parts
9
3/18/13
Class
!   Objects are categorized into classes
peter
paul
Person
mary
spike
!   Each object is
an instance of the class.
scottie
Dogs
fluffy
!   All objects in a class have similar properties
and generally can perform the same tasks.
Adding Objects to Alice
!   Class: blueprint for an object
!   How to populate Alice world with objects
!  Click Add Objects button in world window
!  Locate class specifying the object in the Alice Gallery
!  Right-click class and select Add instance to world
!   Objects in sample world: aliceLiddell and whiteRabbit
!   Naming conventions for objects and classes
!  Class: capitalize all words; e.g., AliceLiddell
!  Object: capitalize all but first word; e.g., aliceLiddell
!   Objects can be renamed from the object tree
Alice in Action with Java
20
10
3/18/13
Demo: Adding objects
Galleries
!   Classes (3D models) are found in the galleries
!   Local gallery (installed with the software)
!  Minimum or complete options
!  Web gallery
11
3/18/13
Adding Objects to Alice (continued)
Alice in Action with Java
23
Demo: 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 every 15 minutes
!  (Or at least every half hour)
!   also save to a backup system
(for example, a zip disk or memory key)
12
3/18/13
Accessing Object Subparts
!   Bounding box: encloses any Alice object
!   Impact of selecting an object in the object tree
!  Bounding box is drawn around object in world window
!  Details area adapts to the selected object
!   First action to program: Alice turns head to user
!   First set of programming steps
!
!
!
!
Select + sign next to aliceLiddell in object tree
Select + sign next to neck subpart
Select head (bounding box is drawn, details change)
Drag doInOrder control to top of editing window
Alice in Action with Java
25
Accessing Object Subparts
(continued)
Alice in Action with Java
26
13
3/18/13
Accessing Object Subparts
(continued)
Alice in Action with Java
27
Sending Messages
!   Alice programs rely on sending messages to
objects
!   Objects methods deliver actions in response to
messages
!   Programming Alice s head to turn
!
!
!
!
!
Select Alice Liddell s head in the object tree
Scan through the methods in the details area
Click on pointAt()
Drag pointAt()to the editing area and drop it
Specify camera as the target
Alice in Action with Java
28
14
3/18/13
Sending Messages (continued)
Alice in Action with Java
29
Testing and Debugging
!  Bug: error interfering with normal program
functions
!  Debugging: process of removing program
bugs
!  Click the Play button to test Alice Liddell
application
!  Alice Liddell s head will turn toward the user
Alice in Action with Java
30
15
3/18/13
Testing and Debugging (continued)
Alice in Action with Java
31
Coding the Other Actions
!   say() message
!  Displays dialog for an object
!  Text can be customized by selecting other…
!   Task: complete first Alice Liddell application
!
!
!
!
Add Alice Liddell s initial greeting
Point the white rabbit to the user
Have Alice Liddell introduce herself
Have the white rabbit introduce himself
!   Customize messages by selecting from more…
!  Example: adjust fontSize of message text to 25
Alice in Action with Java
32
16
3/18/13
Coding the Other Actions (continued)
Alice in Action with Java
33
Statements/Instructions
!   Statement/instruction: a line or control structure
in a program that executes (is carried out by
computer at runtime)
!   Program: a set of instructions that tell the
computer what to do
!   Basic format of a line in an Alice program
!  object.message(value); more...
!   Control structures manage other statements
!  Example: doInOrder contains other statements
Alice in Action with Java
34
17
3/18/13
The Final Action
!   Sequential execution
!  Actions are performed consecutively
!  Example: actions executed in doInOrder structures
!   Simultaneous execution
!  Actions are performed in parallel
!  Example: actions performed in doTogether structure
!   Finishing the first program
!  Add doTogether control structure to application
!  Send say( )to aliceLiddell and whiteRabbit
!  Message value: Welcome to our world
Alice in Action with Java
35
The Final Action (continued)
Alice in Action with Java
36
18
3/18/13
Final Testing
!  First set of actions are performed
separately
!  Final actions are performed
simultaneously
Alice in Action with Java
37
Final Testing (continued)
Alice in Action with Java
38
19
3/18/13
The Software Engineering Process
!   A methodical, disciplined approach to constructing programs
!   Multiple parts
!   (problem specification,) design, implementation, testing (, revising..)
!   Elements of software design
!  Write the user story
!  Organize nouns and verbs into an algorithm
!  Create storyboard-sketches and the transition diagram
!   Elements of software implementation and testing
!  For each noun in the story, add an object to Alice world
!  Match message to verb and send message to object
!  Test message to determine if it produces desired action
Alice in Action with Java
39
Alice s Details Area
!  Reflects attributes and behaviors of
selected object
!  Three panes: properties, methods, and
functions
Alice in Action with Java
40
20
3/18/13
The properties Pane
!   Includes attributes such as color, opacity, visibility
!   Change values to alter object appearance/behavior
!   Example: make the White Rabbit disappear
!
!
!
!
Click opacity in the properties pane
Drag opacity to the editing area
Set opacity to 0
Change the duration to 2 seconds
!   How a program changes when a property is altered
!  New message is added to editing area
!  In the example above, a set () message is added
Alice in Action with Java
41
The properties Pane (continued)
Alice in Action with Java
42
21
3/18/13
The methods Pane
!   Provides a list of behavior-generating
messages
!   In Object Oriented Programming, an
instruction targeting an object is said to be
a method.
!  To get an object to perform a behavior, send
that object a message that asks it to produce
that behavior
!  E.g. aliceLiddle.say(…)
Alice in Action with Java
43
Methods
!  Alice Objects have predefined
methods for basic tasks
!  Additional methods may also be
created by Alice developers
!  Two reasons for building your own methods
!   To organize your story into more manageable pieces
!  To provide an object with additional behaviors
Alice in Action with Java
44
22
3/18/13
The methods Pane
Alice in Action with Java
45
The functions Pane
!   Provides list of information returning messages
!   Differentiate functions from methods
!  Functions return data, messages produce behavior
!   Type of information returned by functions
!
!
!
!
!
Proximity to another object
Size in terms of height, width, or depth
Spatial relation to another object
Point of view (position and orientation in the world)
Subparts
!   world object responds to different set of functions
Alice in Action with Java
46
23
3/18/13
The functions Pane (continued)
Alice in Action with Java
47
Alice Tip: Positioning Objects
Using Quad View
!   Actions performed after pressing ADD OBJECTS
!  Navigate the Alice Gallery
!  Locate classes
!  Use classes to add objects to the world
!   Two views: single view and quad view
!   quad view
!
!
!
!
World window
View from the top
View from the right
View from the front
Alice in Action with Java
48
24
3/18/13
Alice Tip: Positioning Objects Using
Quad View (continued)
Alice in Action with Java
49
Techniques and Tools
!   Mouse is used to
!  approximately position objects in the scene
!   Camera Navigation is used to
!  set the camera point of view
!   Drop-down menu methods are used to
!  resize objects
!  more precisely position objects in the scene
!   Quadview is used to
!  position one object relative to another object
25
3/18/13
Summary
!   Alice: software tool used to create virtual worlds
!   User story: prose description of program form the user s
point of view
!   Shot: component of a scene with the camera at one
viewpoint
!   Algorithm: flow of actions that solves a problem
!   Storyboard-sketch: drawing of a distinct screen in a
computer application
Alice in Action with Java
51
Summary (continued)
!   Alice window: menus, buttons, object tree, details
area, world window, editing area, and events
area
!   Class: blueprint for an object
!   Method: behavior-producing message
!   Function: message that returns information
!   Software engineering encompasses software
design, and implementation and testing
Alice in Action with Java
52
26