ITC 101 Programming Module

Exploring Computer
Programming with Alice
Middlesex Community College
Introduction to Technology
Fall 2011
Prof. Lori Weir
weirl@middlesex.mass.edu

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
Fall 2011 Middlesex Community College 2

Getting Started with Visual Programming

INTRODUCING ALICE

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

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

<<DRAFT>>

Object Tree World View Event Editor

Details Panel
Code Editor College Control
Fall 2011 Middlesex Community
<<DRAFT>>
Primitives 7

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

<<DRAFT>>

Alice Models
• Main programming data are 3d models
• Many built in and more on web

<<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 arms
keep flying
away?"
<<DRAFT>>

Downloading and Exploring Alice Worlds

ACTIVITY 1

<<DRAFT>>

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

<<DRAFT>>

Exploring Alice Worlds
• Open Alice from the DeskTop
• Load and run a world:
– Octopus (movie)
– Skater (interactive)

<<DRAFT>>

Types of Animation

Movie Interactive

• Passive • User clicks on
• User watches the mouse or types a
animation key on the
keyboard.
• Actions of user
are called events

<<DRAFT>>

Getting Started Programming in Alice

SETTING UP A SCENE IN
ALICE
<<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.
<<DRAFT>>

Creating a New World

<<DRAFT>>

Selecting a Template

<<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
<<DRAFT>>

Adding Objects to the World

<<DRAFT>>

Adding Objects
• Two ways to
add objects:
– Drag and
Drop
– Click on
picture then
click on Add
Instance

<<DRAFT>>

Techniques and Tools

Camera Drop-down
Mouse is used Quadview is
navigation is menu methods
to used to
used to are used to:

Approximately Position one
Set the camera
position objects Resize objects object relative
point of view
in the scene. to another

Precisely
position objects
in the scene

<<DRAFT>>

Mouse Control Tools Kit
Default. Move selected
object left, right, forward, Copy objects.
backwards.

Move selected Resize objects.
object up and down.

Tumble objects.

Turn object forwards and
Turn object left and right.
backwards.
CTRL Z or Undo Button to undo mistakes!
<<DRAFT>>

Camera Controls

Alter position of camera with these controls.
<<DRAFT>>

Alternate Positioning Techniques
• Right click on
object in world on
object tree and
select method
• Drag and drop
method from the
details panel.

<<DRAFT>>

Quad View
• Use world's absolute frame of reference to
view relative position of objects

<<DRAFT>>

Objects Frame of Reference
• Objects in Alice
– Have their own frame of reference
– forward – backwards
– up – down
– left – right

<<DRAFT>>

Frame of Reference
• Clicking on object
brings up its
bounding box
• Can also see
center point
• .. and axes

<<DRAFT>>

Frame of Reference

UP

CENTER
POINT
RIGHT

Fall 2011
FORWARD
Middlesex Community College
<<DRAFT>>
29

Subparts
• Objects often have sub parts
– may have their own frame of
reference
• Clicking affect subparts box
allows selection and
movement of subparts

<<DRAFT>>

Subparts
• Bigger ear

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

<<DRAFT>>

Back to Programming View

• When setup complete
click the green done
button to go back to
the programming
view.

<<DRAFT>>

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
<<DRAFT>>

Creating a World

ACTIVITY 2

<<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 Middlesex Community College 36
<<DRAFT>>

From a storyboard to a program

PROGRAMMING THE WORLD

<<DRAFT>>

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.

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

<<DRAFT>>

Options for Storyboards
• Sketches
• Screen shots from Alice
• Text
– A to-do list of steps

<<DRAFT>>

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.

<<DRAFT>>

Action Blocks in Alice

Sequential Action Block Simultaneous Action Block
Actions occur one after another Actions occur at the same time

<<DRAFT>>

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

<<DRAFT>>

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…

<<DRAFT>>

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.

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

Adding to „My First Method‟

ACTIVITY 3

<<DRAFT>>

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!
<<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 the
camera.

<<DRAFT>>

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
<<DRAFT>>

Test
• Click the play button to see the movie /
output of the program.

• "my first method" will execute.

<<DRAFT>>

Built-in Functions and Expressions

PROGRAMMING: PUTTING
TOGETHER THE PIECES
<<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

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

<<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?

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

• 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)

<<DRAFT>>

• 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.
<<DRAFT>>

Completed Hop Method

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

<<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?

<<DRAFT>>

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
<<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!

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

<<DRAFT>>

Test
• Test function by playing movie
• Test further by changing initial set up of
broccoli to change which broccoli is
closest

<<DRAFT>>

Noticing the Tulip
• Do together
• Bunny turn to face
tulip
• Bunny thinks “Pretty!”
• Tulip orients to bunny.

<<DRAFT>>

Hopping Forward
• Create a new method hopForward
• Parameters for total distance and distance
per hop
– lots of other ways to do this

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

<<DRAFT>>

Testing your Knowledge

ACTIVITY 4

<<DRAFT>>

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.

<<DRAFT>>

Exporting/Publishing
• Animated file
• Web page

<<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
74 2011 Middlesex Community College
<<DRAFT>>

Summary
• Learning Alice helps prepare you for an
object-oriented language:
– C++
– Java

<<DRAFT>>

Adding Detail to the Hop
Method

<<DRAFT>>

Going Forward
• Questions about computer science
• Interest level?
• Help
– Example worlds
– Tutorial
– www.alice.org

<<DRAFT>>

ITC 101 Programming Module

Recommended

Recommended

More Related Content

Similar to ITC 101 Programming Module

Similar to ITC 101 Programming Module (9)

Recently uploaded

Recently uploaded (20)

ITC 101 Programming Module

Editor's Notes