CS320n –Visual Programming
Introduction to Alice
Mike Scott
(Slides 2)
Visual Programming Animation Programs 2
What We Will Do Today• Discuss building animation programs
• Do an example
• Friday, mostly lab work
Visual Programming Animation Programs 3
Top Nine List – Succeeding in CS320n
9. Ask questions
8. Read the books
7. Visit instructor and TA during office hours
6. Work the exercises from the schedule
5. Don’t give up. (Keep working until it is right)
4. Read the book
3. Start assignments early
2. Get help when stuck. (1 hour rule)
1. Ask questions
Visual Programming Animation Programs 4
Animation Programs:Scenarios and Storyboards
• Recall animation programs are movies with no interaction with a user
• 2 step process for creating animations.– Step 1: Design– Step 2: Implementation
Visual Programming Animation Programs 5
Step 1: Design• “Ready, fire, aim”
– the fast approach to software development. • Ready, aim, aim, aim, aim ...
– the slow approach to software development.
• Clarify/Define the problem to be solved– often the problem is given to you
• by instructor or leader or team– other times, you decide on it yourself– in this class we will do both.
• some times problem well defined by instructor• some times you decide what problem to solve
• Design solution to problem
Visual Programming Animation Programs 6
Example problem (Scenario)• The scenario is:
– Several snow-people are outdoors, on a snow-covered landscape. A snowman is trying to meet a snowwoman who is talking with a group of her friends (other snowwomen.) He says "Ahem" and blinks his eyes, trying to get her attention
• The problem is:– How can we create this animation?
Visual Programming Animation Programs 7
Designing a Solution• First. Decide on the objects for the scene
• Second. Create a storyboard– a list of actions
• Several options for the form a storyboard can take– sketches. (if you can. Easier to see final
product this way.)– text. List of actions. To do list. (if you can’t
draw. Harder to see the final product.)
Visual Programming Animation Programs 8
Objects in the Scene• Objects
– a snowman– 2 snowwomen– (For our problems you won’t have to create new
objects, just use the ones in the gallery)
• Opening scene / world: a snowy scene• a quick sketch• don’t have to be
an artist
Visual Programming Animation Programs 9
Storyboard Template• Scene number
• Scene sketch (picture)
• Description
• Sound
• Text
Visual Programming Animation Programs 10
A Storyboard
Initial scene Snowman tries to catch snowwoman’s attention
Snowwoman looks around
Visual Programming Animation Programs 11
Storyboard in Text Form
• Animation Artists (for example, at Disney, Pixar Studios, or Dreamworks) sketch their storyboards
• You may not have such expertise (I don’t)• You can also use a text based form for the storyboard.
– like a script
Snowman turns to face snowwomanSnowman blinks and addresses snowwomenSnowwoman turns around
The storyboard becomes your "to-do" list for the animation.
Visual Programming Animation Programs 12
Storyboard Revision• A storyboard is a continual work in
progress
• Add and remove things as time goes on
• Don’t be afraid to revise …
• … evening during implementation
Visual Programming Animation Programs 13
How does Pixar Make Movies?
Visual Programming Animation Programs 14
Visual Programming Animation Programs 15
More on Pixar• http://www.pixar.com/howwedoit/index.html#• More steps in the process• Each frame of the movie is rendered using a
computer system (“Renderfarm”) • 1/24th of a second per frame screen time• 6 hours on average to render a frame
– but some frames take as many as 90 hours
Visual Programming Animation Programs 16
Another Exercise is Storyboarding
• A bicycle race finish. 5 cyclists are at the end of a race. The cyclist in the lead raises his arms in victory and then falls over before the finish line. The cyclist in second wins the race.
• sketch
• script (text based)
Visual Programming Animation Programs 17
Initial Scenes
Visual Programming Animation Programs 18
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
Visual Programming Animation Programs 19
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) isSnowman turns to face snowwoman
Snowman blinks and addresses snowwomen
Snowwoman turns around
• Now translate design steps into program instructions
Visual Programming Animation Programs 20
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 instructionSnowman blinks and addresses snowwomen
•blinks -> Snowman raises and lowers his eyes
•addresses -> Snowman says “ahem”
Visual Programming Animation Programs 21
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
Visual Programming Animation Programs 22
Action Blocks in Alice
Sequential Action Block
Simultaneous Action Block
Visual Programming Animation Programs 23
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
Visual Programming Animation Programs 24
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
Visual Programming Animation Programs 25
Method Editor Window
Visual Programming Animation Programs 26
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
Visual Programming Animation Programs 27
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
Visual Programming Animation Programs 28
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 “Dotogether” block intothe method
Visual Programming Animation Programs 29
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
Visual Programming Animation Programs 30
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
Visual Programming Animation Programs 31
Step 2 – First Attempt• world.my first method looks like this
• TEST the method– play the movie. Does it do what we want?
Visual Programming Animation Programs 32
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?
Visual Programming Animation Programs 33
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
Visual Programming Animation Programs 34
Corrected Do Together
Visual Programming Animation Programs 35
Testing• An important step in creating a program is to run it –
to be sure it does what you expect it to do.• I 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…
Visual Programming Animation Programs 36
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
Visual Programming Animation Programs 37
CommentsNotes:
1) Comments appear in green
2) Alice ignores comments.
3) Comments make the program easier to read.
Visual Programming Animation Programs 38
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
Visual Programming Animation Programs 39
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?
Visual Programming Animation Programs 40
Alter the Vehicle Property• Select sax from object tree
• Select properties tab
• Change vehicle from world to snowman
Top Related