CS320n Visual Programming

1
CS320n Visual Programming

• Introduction to Alice
• Mike Scott
• (Slides 2)

2
What We Will Do Today

• Discuss building animation programs
• Do an example
• Friday, mostly lab work

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

4
Animation ProgramsScenarios 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

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

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?

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 cant
  draw. Harder to see the final product.)

8
Objects in the Scene

• Objects
• a snowman
• 2 snowwomen
• (For our problems you wont have to create new
  objects, just use the ones in the gallery)
• Opening scene / world a snowy scene
• a quick sketch
• dont have to be an artist

9
Storyboard Template

• Scene number
• Scene sketch (picture)
• Description
• Sound
• Text

10
A Storyboard
Initial scene
Snowman tries to catch snowwomans attention
Snowwoman looks around
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 dont)
• You can also use a text based form for the
  storyboard.
• like a script
• Snowman turns to face snowwoman
• Snowman blinks and addresses snowwomen
• Snowwoman turns around
• The storyboard becomes your "to-do" list for the
  animation.

12
Storyboard Revision

• A storyboard is a continual work in progress
• Add and remove things as time goes on
• Dont be afraid to revise
• evening during implementation

13
How does Pixar Make Movies?
14
(No Transcript)
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

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)

17
Initial Scenes
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

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) is
• Snowman turns to face snowwoman
• Snowman blinks and addresses snowwomen
• Snowwoman turns around
• Now translate design steps into program
  instructions

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 instruction
• Snowman blinks and addresses snowwomen
• blinks -gt Snowman raises and lowers his eyes
• addresses -gt Snowman says ahem

21
Actions

• Sequential
• Some actions occur one after the other
• first step (snowman turns to face snowwoman)
• second step (snowman tries to get snowwomans
  attention)
• Simultaneous
• Other actions occur at the same time
• Snowman says "Ahem" and while simultaneously
  blinking his eyes

22
Action Blocks in Alice

Sequential Action Block
Simultaneous Action Block
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

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

25
Method Editor Window
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

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

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

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

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

31
Step 2 First Attempt

• world.my first method looks like this
• TEST the method
• play the movie. Does it do what we want?

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
• Whats the problem?

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

34
Corrected Do Together
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

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

37
Comments
Notes 1) Comments appear in green 2) Alice
ignores comments. 3) Comments make the program
easier to read.
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

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?

40
Alter the Vehicle Property

• Select sax from object tree
• Select properties tab
• Change vehicle from world to snowman