1. CS329e – Elements of Visual Programming Implementing Programs Mike Scott (Slides 2-2)

2. Elements of Visual Programming Implementing Programs2 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

3. Elements of Visual Programming Implementing Programs3 Last Time Given a problem we want to solve it by creating an animation Create storyboard / script –snowman example –bike race example

4. Elements of Visual Programming Implementing Programs4 Initial Scenes

5. Elements of Visual Programming Implementing Programs5 Initial Scenes

6. Elements of Visual Programming Implementing Programs6 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

7. Elements of Visual Programming Implementing Programs7 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

8. Elements of Visual Programming Implementing Programs8 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”

9. Elements of Visual Programming Implementing Programs9 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

10. Elements of Visual Programming Implementing Programs10 Action Blocks in Alice Sequential Action Block Simultaneous Action Block

11. Elements of Visual Programming Implementing Programs11 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

12. Elements of Visual Programming Implementing Programs12 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

13. Elements of Visual Programming Implementing Programs13 Method Editor Window

14. Elements of Visual Programming Implementing Programs14 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

15. Elements of Visual Programming Implementing Programs15 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

16. Elements of Visual Programming Implementing Programs16 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

17. Elements of Visual Programming Implementing Programs17 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

18. Elements of Visual Programming Implementing Programs18 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

19. Elements of Visual Programming Implementing Programs19 Step 2 – First Attempt world.my first method looks like this TEST the method –play the movie. Does it do what we want?

20. Elements of Visual Programming Implementing Programs20 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?

21. Elements of Visual Programming Implementing Programs21 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

22. Elements of Visual Programming Implementing Programs22 Corrected Do Together

23. Elements of Visual Programming Implementing Programs23 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…

24. Elements of Visual Programming Implementing Programs24 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

25. Elements of Visual Programming Implementing Programs25 Comments Notes: 1) Comments appear in green 2) Alice ignores comments. 3) Comments make the program easier to read.

26. Elements of Visual Programming Implementing Programs26 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

27. Elements of Visual Programming Implementing Programs27 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?

28. Elements of Visual Programming Implementing Programs28 Alter the Vehicle Property Select sax from object tree Select properties tab Change vehicle from world to snowman