Alice and Media Computation August 2009 Animation Storyboard Code Steve Cooper Barbara Ericson
Traditional Problem Solving in CS Read and understand the problem or task specification Design a solution (develop an algorithm) Implement (code) Test Revise, as needed
Designing a Solution in Alice To create a design, we borrow the idea of storyboards from professional animators at Disney, Pixar, etc.
Recall…. Princess Escape A princess has been grounded by her father (a wizard). Being a rather rebellious princess, she has emailed the local dragon taxi service. The dragon will fly to the princess and she will climb aboard the dragon to escape from the castle – to meet some friends at the village dance club.
Visual Storyboards
Textual Storyboard (pseudo code) Do in order dragon takes off dragon flies to princess princess climbs on dragon's back dragon and princess escape knight shakes his arm (and sword) in protest
Implementing a program in Alice Create the program instructions using the drag and drop editor We recommend an incremental development approach write a method test it and so on….
Stepwise refinement - 1 How can a dragon "take off"? Do in order dragon takes off dragon flies to princess princess climbs on dragon's back dragon and princess escape knight shakes his arm (and sword) in protest How can a dragon "take off"? Do together dragon moves up dragon flaps wings
Stepwise refinement - 2 How can a dragon flap its wings? Do together dragon moves up dragon flaps wings Do together dragon flap left wing dragon flap right wing
Stepwise refinement - 3 How can a dragon flap its left wing? Do together dragon flap left wing dragon flap right wing How can a dragon flap its left wing? Do in order Do together dragon close left wing rolls right dragon far left wing rolls right dragon close left wing rolls left dragon far left wing rolls left Is this too detailed? Probably, but you get the picture…
Create an object method Slides 11-14 are actually demonstrated with Alice, but are included in the slide set for later reference.
Drag the code into the editor
The complete method
Calling a method
Your turn! Create the flapLeftWing method Create an analogous flapRightWing method Pause to allow participants to do create these two methods.
Create a flapWings method Demo this slide.
Your turn! Create the flapWings method Create a takeOff method, where the dragon moves up 2 meters and flaps its wings twice What changes will you need to make to the duration= parameter to get the animation working? Pause to let participants create these two methods.
Create a fly method Demo slides 18-19
Saving out a new class Renaming the class Saving it Importing it for a different world
Textbook More information – Alice Storyboards Coding Chapter 2, Section 1 Coding Chapter 2, Section 2 Class-level Methods & Inheritance Chapter 4, Section 3