Transcript Lecture notes (2-2

CS329e – Elements of Visual
Programming
Implementing Programs
Mike Scott
(Slides 2-2)
What We Will Do Today
• Cover how to implement a program after
the storyboard is created
• Work on examples in the lab:
– Exercise 2.4 on page 48. Circling Fish
– Exercise 2.5 on page 48. Tortoise Gets
Cookie
• Answer questions about assignment 1
Elements of Visual
Programming
Implementing Programs
2
Last Time
• Given a problem we want to solve it by
creating an animation
• Create storyboard / script
– snowman example
– bike race example
Elements of Visual
Programming
Implementing Programs
3
Initial Scenes
Elements of Visual
Programming
Implementing Programs
4
Initial Scenes
Elements of Visual
Programming
Implementing Programs
5
Techniques and Tools
• Mouse used to
– set up the initial scene
– approximately position objects in the scene
– resize and rotate objects
• Camera Navigation is used to
– set the camera point of view
• Drop-down menu methods are used to
– resize objects and rotate objects
– more precisely position objects in the scene
• Scene Editor's Quad View is used to
– obtain specific alignments
– position one object relative to another object
Elements of Visual
Programming
Implementing Programs
6
Writing A Program
• "Writing" a program (script)
– a list of instructions to have the objects perform
certain actions in the animation
• Our planned story board (to do list) is
Snowman turns to face snowwoman
Snowman blinks and addresses snowwomen
Snowwoman turns around
• Now translate design steps into program
instructions
Elements of Visual
Programming
Implementing Programs
7
Translating the Design
• Some steps in the storyboard can be
written as a single instruction
– The snowman turns to face the snowwoman
• Other steps are composite actions that
require more than one instruction
Snowman blinks and addresses
snowwomen
• blinks -> Snowman raises and lowers
his eyes
• addresses -> Snowman says “ahem”
Elements of Visual
Programming
Implementing Programs
8
Actions
• Sequential
– Some actions occur one after the other
• first step (snowman turns to face snowwoman)
• second step (snowman tries to get snowwoman’s attention)
• Simultaneous
– Other actions occur at the same time
• Snowman says "Ahem" and while simultaneously
blinking his eyes
Elements of Visual
Programming
Implementing Programs
9
Action Blocks in Alice
Sequential Action Block
Simultaneous Action Block
Elements of Visual
Programming
Implementing Programs
10
Writing the Program
• In Simple Animations notice the only event
•
world.my first method
• world is an object (contains all other objects)
• my first method is a method. A behavior of a certain objects
• methods consist of a series of instructions and commands
(some of which may be other methods…)
– big rocks into little rocks
Elements of Visual
Programming
Implementing Programs
11
Adding Instructions to world.my
first method
• The method should be open in the method editor
window of Alice. (bottom right)
– if not select the world from the object tree, the method
tab, and click the edit button next to my first method
Elements of Visual
Programming
Implementing Programs
12
Method Editor Window
Elements of Visual
Programming
Implementing Programs
13
Step 1 – Snowman turns
• Select the object you want to
perform the object
• Select the method / action you
want the object to perform
– could use turn or turn to face
– often many ways to accomplish
the same task
• Click and drag it to the method
editor window
Elements of Visual
Programming
Implementing Programs
14
Snowman Turns
• Can adjust aspects of how the snowman
turns to face the snowwoman
– click the more option
– right now duration and style are the only
things you should alter
Elements of Visual
Programming
Implementing Programs
15
Step 2 – Combined Action
• We want the snowman to say “ahem” and
blink at the same time
• actions are normally sequential
• to do actions together, at the same time,
use a “Do together” block
• Click and drag “Do
together” block into
the method
Elements of Visual
Programming
Implementing Programs
16
Step 2 – Combined Actions
• Now drag the things we want to happen
together into the “Do together” block
• Snowman say ahem
• Snowman blink – raise and lower eyes
Elements of Visual
Programming
Implementing Programs
17
Affecting subparts
• The snowman does not have “blink
eyes” method
• Can accomplish a blink by affecting
subparts
• Select snowman object from object tree
and expand subparts
– expand the head
– now we can give commands to individual
parts, in this case the eyes
– have eyes move up and down
– specify direction and distance of move
Elements of Visual
Programming
Implementing Programs
18
Step 2 – First Attempt
• world.my first method looks like this
• TEST the method
– play the movie. Does it do what we want?
Elements of Visual
Programming
Implementing Programs
19
Logic Error
• The program works, but does not do what
we intended.
– This is an example of a logic error
– very easy in Alice to see logic errors
– the movie does not do what we wanted
• What’s the problem?
Elements of Visual
Programming
Implementing Programs
20
Do together and Do in order
• All commands in the Do together block are
executed simultaneously
• So what is the result if you move an eye up .1
meters and down .1 meters at the same time?
– Apparently nothing
• So while we want the eyes to move together and
to say “ahem” we want the eyes to first move up
and then down
• Use a Do in order block inside the Do together
block
Elements of Visual
Programming
Implementing Programs
21
Corrected Do Together
Elements of Visual
Programming
Implementing Programs
22
Testing
• An important step in creating a program is to run
it – to be sure it does what you expect it to do.
• We recommend that you use an incremental
development process:
• write a few lines of code and then run it
• write a few more lines and run it
• write a few more lines and run it…
– This process allows you to find any problems
and fix them as you go along.
• As you go you may alter your design /
storyboard
• design a little, code a little, test a little…
Elements of Visual
Programming
Implementing Programs
23
Comments
• While Alice instructions are easy to
understand, it is often desirable to be able
to explain (in English) what is going on in a
program
• We use comments to explain to the
human reader what a particular
section of code does
Elements of Visual
Programming
Implementing Programs
24
Comments
Notes:
1) Comments
appear in green
2) Alice ignores
comments.
3) Comments
make the
program easier to
read.
Elements of Visual
Programming
Implementing Programs
25
Extra – Moving Together
• To move things together can sometimes
be a pain
• Tell two objects to move “forward”
– directions are relative to the objects
– may get motion in different directions
• can use the “orient to” method to synch
frames of reference
Elements of Visual
Programming
Implementing Programs
26
Vehicles
• Each object has a vehicle property
• Initially the world is the vehicle for objects
• can change this by altering the vehicle
property for an object
• Give the snowman an instrument
• Change “ahem” to “toot”
• What happens when
movie played?
Elements of Visual
Programming
Implementing Programs
27
Alter the Vehicle Property
• Select sax from object tree
• Select properties tab
• Change vehicle from world to snowman
Elements of Visual
Programming
Implementing Programs
28