cs329e – elements of visual programming

CS329e – Elements of Visual Programming

Implementing ProgramsMike Scott(Slides 2-2)

Elements of Visual Programming

Implementing Programs 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 3

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 4

Initial Scenes

Elements of Visual Programming

Implementing Programs 5

Initial Scenes

Elements of Visual Programming

Implementing Programs 6

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 7

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 snowwomanSnowman blinks and addresses snowwomenSnowwoman turns around• Now translate design steps into program

instructions

Elements of Visual Programming

Implementing Programs 8

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”

Elements of Visual Programming

Implementing Programs 9

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 10

Action Blocks in Alice

Sequential Action Block

Simultaneous Action Block

Elements of Visual Programming

Implementing Programs 11

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 12

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 13

Method Editor Window

Elements of Visual Programming

Implementing Programs 14

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 15

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 16

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

Elements of Visual Programming

Implementing Programs 17

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 18

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 19

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 20

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 21

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 22

Corrected Do Together

Elements of Visual Programming

Implementing Programs 23

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 24

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 25

CommentsNotes:

1) Comments appear in green

2) Alice ignores comments.

3) Comments make the program easier to read.

Elements of Visual Programming

Implementing Programs 26

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 27

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 28

Alter the Vehicle Property• Select sax from object tree• Select properties tab• Change vehicle from world to snowman