ITC 101 Programming Module
- 1. Exploring Computer Programming with Alice Middlesex Community College Introduction to Technology Fall 2011 Prof. Lori Weir weirl@middlesex.mass.edu
- 2. Student Learning Outcomes • Introduction to Computing Careers • Introduction to Alice • Setting up an initial scene in Alice • Designing an animated scenario • Implementing a design • Programming • Summary • Going forward Fall 2011 Middlesex Community College 2
- 3. Getting Started with Visual Programming INTRODUCING ALICE Fall 2011 Middlesex Community College 3 <<DRAFT>>
- 4. What is Alice? • Alice is a visual programming language. • Alice is an object based language. The objects in Alice are 3 dimensional models. • The output of Alice programs is an animation. – Objects can be made to move around the virtual world: • A video game • A simulation Fall 2011 Middlesex Community College 4 <<DRAFT>>
- 5. The Alice Software • A 3D interactive animation environment • http://www.alice.org/ • A tool for teaching fundamental programming concepts – object based • System developed at Carnegie Mellon Fall 2011 Middlesex Community College 5 <<DRAFT>>
- 6. Visual Programming • Programming tasks are performed in an Integrated Development Environment(IDE). • Programming is done by pointing and clicking, dragging and dropping, selecting from menus, and some typing. • Syntax errors removed from the equation – no braces, no semi colons Fall 2011 Middlesex Community College 6 <<DRAFT>>
- 7. Object Tree World View Event Editor Details Panel Code Editor College Control Fall 2011 Middlesex Community <<DRAFT>> Primitives 7
- 8. Object-Based Programming • Built in library of models. • More available on the web. • All objects have certain methods and behaviors – move, turn, say, roll, resize • New methods can be added to an object Fall 2011 Middlesex Community College 8 <<DRAFT>>
- 9. Alice Models • Main programming data are 3d models • Many built in and more on web Fall 2011 Middlesex Community College 9 <<DRAFT>>
- 10. Output • Output is a 3d movie – run the program, play a movie – can also add sound to programs • Much easier to recognize logic errors – "Why do my ninja's arms keep flying away?" Fall 2011 Middlesex Community College 10 <<DRAFT>>
- 11. Downloading and Exploring Alice Worlds ACTIVITY 1 Fall 2011 Middlesex Community College 11 <<DRAFT>>
- 12. Downloading Alice • From your browser, navigate to the Alice download page: http://www.alice.org/index.php?page =downloads/download_alice • Follow the instructions for your platform (Windows, Linux, or MAC). Fall 2011 Middlesex Community College 12 <<DRAFT>>
- 13. Exploring Alice Worlds • Open Alice from the DeskTop • Load and run a world: – Octopus (movie) – Skater (interactive) Fall 2011 Middlesex Community College 13 <<DRAFT>>
- 14. Types of Animation Movie Interactive • Passive • User clicks on • User watches the mouse or types a animation key on the keyboard. • Actions of user are called events Fall 2011 Middlesex Community College 14 <<DRAFT>>
- 15. Getting Started Programming in Alice SETTING UP A SCENE IN ALICE Fall 2011 Middlesex Community College 15 <<DRAFT>>
- 16. Alice Programming • Problem solving and programming in Alice – given a scenario create program to enact the story • Example scenario: – A bunny is hopping in a field of fern and one tulip. – The bunny notices the tulip. – The bunny hops over to the tulip. – Accidentally, the bunny knocks the tulip. Fall 2011 Middlesex Community College 16 <<DRAFT>>
- 17. Creating a New World Fall 2011 Middlesex Community College 17 <<DRAFT>>
- 18. Selecting a Template Fall 2011 Middlesex Community College 18 <<DRAFT>>
- 19. Objects in The World • An object is: – Any thing that can be identified as unique from other things. • How is an object unique? – Name – Properties • Width, height, color, location – Can perform actions • Referred to as methods Fall 2011 Middlesex Community College 19 <<DRAFT>>
- 20. Adding Objects to the World Fall 2011 Middlesex Community College 20 <<DRAFT>>
- 21. Adding Objects • Two ways to add objects: – Drag and Drop – Click on picture then click on Add Instance Fall 2011 Middlesex Community College 21 <<DRAFT>>
- 22. Techniques and Tools Camera Drop-down Mouse is used Quadview is navigation is menu methods to used to used to are used to: Approximately Position one Set the camera position objects Resize objects object relative point of view in the scene. to another Precisely position objects in the scene Fall 2011 Middlesex Community College 22 <<DRAFT>>
- 23. Mouse Control Tools Kit Default. Move selected object left, right, forward, Copy objects. backwards. Move selected Resize objects. object up and down. Tumble objects. Turn object forwards and Turn object left and right. backwards. CTRL Z or Undo Button to undo mistakes! Fall 2011 Middlesex Community College 23 <<DRAFT>>
- 24. Camera Controls Alter position of camera with these controls. Fall 2011 Middlesex Community College 24 <<DRAFT>>
- 25. Alternate Positioning Techniques • Right click on object in world on object tree and select method • Drag and drop method from the details panel. Fall 2011 Middlesex Community College 25 <<DRAFT>>
- 26. Quad View • Use world's absolute frame of reference to view relative position of objects Fall 2011 Middlesex Community College 26 <<DRAFT>>
- 27. Objects Frame of Reference • Objects in Alice – Have their own frame of reference – forward – backwards – up – down – left – right Fall 2011 Middlesex Community College 27 <<DRAFT>>
- 28. Frame of Reference • Clicking on object brings up its bounding box • Can also see center point • .. and axes Fall 2011 Middlesex Community College 28 <<DRAFT>>
- 29. Frame of Reference UP CENTER POINT RIGHT Fall 2011 FORWARD Middlesex Community College <<DRAFT>> 29
- 30. Subparts • Objects often have sub parts – may have their own frame of reference • Clicking affect subparts box allows selection and movement of subparts Fall 2011 Middlesex Community College 30 <<DRAFT>>
- 31. Subparts • Bigger ear Fall 2011 Middlesex Community College 31 <<DRAFT>>
- 32. Finding Objects • To reposition in a quad view – select zoom in and out from mouse controls – zoom way out – select scroll from mouse controls to center objects – zoom back in Fall 2011 Middlesex Community College 32 <<DRAFT>>
- 33. Back to Programming View • When setup complete click the green done button to go back to the programming view. Fall 2011 Middlesex Community College 33 <<DRAFT>>
- 34. Saving a World • Writing and testing an animation is an intense load on the computing system – a crash can occur. • Best solution – Save your world very 15 minutes (or at least every half hour). – Also, save to a backup device • Zip drive • Memory key Fall 2011 Middlesex Community College 34 <<DRAFT>>
- 35. Creating a World ACTIVITY 2 Fall 2011 Middlesex Community College 35 <<DRAFT>>
- 36. Setting Up the Initial Scene • From the Alice programming environment: 1. create a new world. 2. Add bunny 3. Add fern and flower • local gallery -> nature – Fern – Tulip 4. Resize bunny to make her smaller • Use the drop down menus or drag and drop October 16, 2011 Middlesex Community College 36 <<DRAFT>>
- 37. From a storyboard to a program PROGRAMMING THE WORLD October 16, 2011 Middlesex Community College 37 <<DRAFT>>
- 38. Step 1: Design • A program is a solution to a problem. • Determine the problem to be solved. • Design a solution to the problem. – We will use a storyboard design technique. – Commonly used in the film and gaming industries. Fall 2011 Middlesex Community College 38 <<DRAFT>>
- 39. Example Story • A bunny is sitting in a field of fern. • The bunny notices a beautiful tulip. • The bunny hops over to tulip. • The bunny accidentally knocks over the tulip. • Let's add some detail at the start of the movie. – The bunny first turns to face the camera. – Then the bunny hops up and down. Fall 2011 Middlesex Community College 39 <<DRAFT>>
- 40. Options for Storyboards • Sketches • Screen shots from Alice • Text – A to-do list of steps Fall 2011 Middlesex Community College 40 <<DRAFT>>
- 41. Step 2: Implementation • To implement the storyboard, translate the actions in the storyboard to a program. • Program (a.k.a. script) – A list of instructions to have the objects perform certain actions in the animation. Fall 2011 Middlesex Community College 41 <<DRAFT>>
- 42. Action Blocks in Alice Sequential Action Block Simultaneous Action Block Actions occur one after another Actions occur at the same time Fall 2011 Middlesex Community College 42 <<DRAFT>>
- 43. Concepts in this First Program • Program instructions may have arguments – Example: for the move instruction, the arguments we used where: • Direction • Distance – Do Together and Do In Order blocks can be nested one inside the other Fall 2011 Middlesex Community College 43 <<DRAFT>>
- 44. Testing • An important step in creating a program is to run it – be sure it does what you expect it to do. • We recommend you use an incremental development process: – Write a few lines of code, then run it – Write a few more lines of code, then run it – Write a few more lines or code… Fall 2011 Middlesex Community College 44 <<DRAFT>>
- 45. Comments • While Alice instructions are easy to understand, a particular combination of the instructions may perform an action that is not immediately obvious. • Comments document the code – explain the purpose of a particular segment of the program to the human reader. Fall 2011 Middlesex Community College 45 <<DRAFT>>
- 46. Methods • Select the world object from the object tree and the methods tab in the details panel. • The world starts with a single method, "my first method" • Like main in a Java or C++ program. Fall 2011 Middlesex Community College 46 <<DRAFT>>
- 47. Adding to „My First Method‟ ACTIVITY 3 October 16, 2011 Middlesex Community College 47 <<DRAFT>>
- 48. Adding Commands to a Method • If the "my first method" is not displayed in the code editor click the edit button next to the method in the detail panel. • Commands are added by dragging and dropping them into a method. • Select the bunny from the object tree. • Drag the turn to face command into the code editor. • TEST! Fall 2011 Middlesex Community College 48 <<DRAFT>>
- 49. Adding Commands • turn to face is a method • When adding a method to the code editor if any parameters are required a menu pops up to select the arguments. • Select the camera. Fall 2011 Middlesex Community College 49 <<DRAFT>>
- 50. More Parameters • After adding the bunny.turn to face command the "my first method" will look like this: • Click on the "more" option to see what other parameters can be changed – duration, style, asSeenBy – change duration to 3 seconds Fall 2011 Middlesex Community College 50 <<DRAFT>>
- 51. Test • Click the play button to see the movie / output of the program. • "my first method" will execute. Fall 2011 Middlesex Community College 51 <<DRAFT>>
- 52. Built-in Functions and Expressions PROGRAMMING: PUTTING TOGETHER THE PIECES Fall 2011 Middlesex Community College 52 <<DRAFT>>
- 53. Adding Behaviors • Next we want the bunny to hop. • Methods can be world level or class level. – world level methods belong to the world. • a method should be world level method if it involves two or more objects – class level methods belong to a particular class / object. • a method should be a class level method if it involves only one object Fall 2011 Middlesex Community College 53 <<DRAFT>>
- 54. Creating a Hop Method • The bunny does not have a hop method so we will create one. • Select the bunny from the object tree and click on the create new method button in the details panel. Fall 2011 Middlesex Community College 54 <<DRAFT>>
- 55. Creating a Hop Method • A window pops up asking for the name of the method – try various names to see what is a legal identifier and what is not • After giving the new method a name a new tab pops up in the code editor • Should hop be one hop or parameterized? • Should parameter be time to hop or number of hops to make? • Any other way to make it more general? Fall 2011 Middlesex Community College 55 <<DRAFT>>
- 56. Adding Parameters • Let's add parameters for distance to hop up and the time to do the hop • Click the create new parameter button in the code editor. Fall 2011 Middlesex Community College 56 <<DRAFT>>
- 57. Adding Parameters • Give the parameter a name and pick the data type – distance -> a Number – time -> a Number • When called the hop method now requires two parameters Fall 2011 Middlesex Community College 57 <<DRAFT>>
- 58. Adding Commands to Hop • To hop the bunny will move up and then down. • Drag the move command into hop and fill in the parameters. • Drag another move command into hop and fill in the parameters. Fall 2011 Middlesex Community College 58 <<DRAFT>>
- 59. Adding Commands to Hop • To change the duration of moving up select the more option from the move command. • Select duration then expressions then time (or the name of your parameter for time) Fall 2011 Middlesex Community College 59 <<DRAFT>>
- 60. Adding Commands to Hop • To change the duration of the move to half of the time parameter click on the triangle to open the drop down menu. • Select math and divide time by 2. • Do the same for the move down. Fall 2011 Middlesex Community College 60 <<DRAFT>>
- 61. Completed Hop Method Fall 2011 Middlesex Community College 61 <<DRAFT>>
- 62. Back to my first method • Now that the bunny can hop and the broccoli can grow we can complete the first part of the story board • After the bunny turns to face the camera we want the bunny to hop. Fall 2011 Middlesex Community College 62 <<DRAFT>>
- 63. Hopping • We want the bunny to hop for 5 seconds. • Back to my first method • Have rabbit hop up and down .25 meters at 0.5 seconds per hop • How many hops? Fall 2011 Middlesex Community College 63 <<DRAFT>>
- 64. Looping • A counted loop is used when the number of repetitions can be calculated • Drag a Loop primitive into the Do together block • Number of times to loop is 10 Fall 2011 Middlesex Community College 64 <<DRAFT>>
- 65. Hopping • After Loop is added to Do together • drag and drop the bunny hop method into the loop • Select 0.25 meters for distance to hop and 0.5 seconds for time • Test! Fall 2011 Middlesex Community College 65 <<DRAFT>>
- 66. Noticing the Tulip • Now we want the rabbit to – turn to face the tulip, – Think “Pretty!” – hop over to the tulip – Accidentally knock over the tulip. Fall 2011 Middlesex Community College 66 <<DRAFT>>
- 67. Test • Test function by playing movie • Test further by changing initial set up of broccoli to change which broccoli is closest Fall 2011 Middlesex Community College 67 <<DRAFT>>
- 68. Noticing the Tulip • Do together • Bunny turn to face tulip • Bunny thinks “Pretty!” • Tulip orients to bunny. Fall 2011 Middlesex Community College 68 <<DRAFT>>
- 69. Hopping Forward • Create a new method hopForward • Parameters for total distance and distance per hop – lots of other ways to do this Fall 2011 Middlesex Community College 69 <<DRAFT>>
- 70. Completing the Hopping • Back in my first method call the hopForward method. • Pick a dummy value for totalDistance. • Replace dummy value with distance from bunny to tulip minus some offset. (no collision detection) Fall 2011 Middlesex Community College 70 <<DRAFT>>
- 71. Testing your Knowledge ACTIVITY 4 Fall 2011 Middlesex Community College 71 <<DRAFT>>
- 72. Testing your Knowledge • Working with a partner, make the flower shake and fall after the bunny stops hopping. • What programming constructs do you need? • Which methods will you use? • What will the bunny say? • Experiment with your closing camera position. Fall 2011 Middlesex Community College 72 <<DRAFT>>
- 73. Exporting/Publishing • Animated file • Web page Fall 2011 Middlesex Community College 73 <<DRAFT>>
- 74. What Next? • Expand by adding more flowers – lists and variables to manage • Add sounds • Add scenery • Add events – Interactive programs can be created by adding events that program responds to. Fall 74 2011 Middlesex Community College <<DRAFT>>
- 75. Summary • Learning Alice helps prepare you for an object-oriented language: – C++ – Java Fall 2011 Middlesex Community College 75 <<DRAFT>>
- 76. Adding Detail to the Hop Method Fall 2011 Middlesex Community College 76 <<DRAFT>>
- 77. Going Forward • Questions about computer science • Interest level? • Help – Example worlds – Tutorial – www.alice.org Fall 2011 Middlesex Community College 77 <<DRAFT>>
Editor's Notes
- #2: The Alice Integrated Development Environment is named in honor of Lewis Carroll’s Alice in Wonderland.Introduce:MyselfWhat we plan to do today
- #5: Objects haveBehaviors (methods)Characteristics (properties)
- #8: Let’s open Alice from our desktop.
- #9: EncapsulationExample: Class: animalDogPigPropertiesDescribe the objectcolorMethodsBehaviorsInteractionsExample: speakAsk the class how the object speaksDiscuss inheritance, encapsulation
- #13: In this first demo, we explore examples of the two different types of animation in Alice.Open and run the first world together.Students open 2nd world and play on their own.
- #14: In this first demo, we explore examples of the two different types of animation in Alice.Open and run the first world together.Students open 2nd world and play on their own.
- #15: Refer back to the examples:Which was a “Movie” and which was “Interactive”?
- #17: Follow along!
- #19: For this demonstration, select grass.
- #20: White board: class/objectClass is the cookie cutterObject is the cookie
- #22: Place the bunny on the grass.
- #23: We will experiment with each set of tools.
- #24: Experiment with the Mouse Controls.Copy bunny.Now have two bunnies.
- #25: Move camera:Up, down, left, rightBackward and forwardTiltExperiment with the camera controls
- #27: Position bunnies relative to one another.
- #28: Draw on white board.Emphasize the objects are 3 dimensional with 6 degrees of freedom fowr
- #31: Select bunny’s right ear.Tumble.
- #37: Have students work on this individually or in pairs to complete these instructions.Gallery->environmentsGroundHillSkys->happy sky
- #39: Ask the class what is a story board?Why is a story board a good design and documentation technique for this type of programming?
- #40: The problem we are solving is to animate this scenario.
- #43: Have 3 student volunteersHave each student stand up one after the otherDo in orderHave students stand up togetherDO TOGETHERDiscuss when to use each idea.
- #44: On the white board, demonstrate nested blocks.
- #45: Ask the students what the benefits of this approach might be?
- #46: // comment
- #47: Always start with “my first method”
- #52: Demonstrate program.
- #54: Distinguish world level and class level behaviors.Ask the students to looks at the Bunny’s methods.Is there a hop method?What to do?
- #55: Review the bunny’s methods.The bunny does NOT have a hop method!Let’s create this method.
- #56: Break down the idea of hopping…
- #58: Discuss data types.Note we are now in the bunny.hop method.Note we are no longer in the world.myfirstmethod method
- #62: Test the program here.
- #64: Good time for a break
- #71: Use function, bunny distance to
- #76: Review computer terms