Alice 3 Workshop. CS & IT Irvine, CA July 9, Copyright 2012 Wanda Dann, Don Slater, Steve Cooper

Transcription

1 Alice 3 Workshop CS & IT Irvine, CA July 9, 2012

2 Research Group Wanda Dann Steve Cooper Don Slater Jacobo Carrasquel Dennis Cosgrove Dave Culyba Laura Paoletti Matt May Cleah Schlueter

3 Sponsors

4 Agenda Today Alice 3: A Tour of the Interface Scene Setup & Motion Control A simple Alice program An Alice 3 program in Java (using Netbeans)

5 Alice 3 Workshop Installing Alice 3

6 Alice 3 installers

7 Archive Archive of versions

8 Universal Zip Download once, install on different systems

9 Start files Start file varies by system:

10 Troubleshooting Users have reported some problems with tablet PCs and higher-end Vista systems Try decreasing Color resolution (32 to 16) hardware acceleration Try updating video driver (from video card manufacturer s web site)

11 If will not install If Alice 3 does not install on your system, it will run on a USB drive

12 Alice 3 Installed Finding Alice 3 on your machine PC Mac C:\Program Files\Alice3Beta\Alice.bat /Applications/Alice3Beta/Alice Note: Will create an icon on the desktop of Windows machines if option selected Watch for it.

13 Alice3 Directory Contains default directories for projects and classes created in Alice 3 Finding this Alice3 directory on your machine PC Mac \My Documents\Alice3 /<user home directory>/alice3

14 Select a template

15 Code Editor

16 Two editors

17 Scene Editor

18 Menu Bar

19 File Menu

20 Setting Preferences AP/CS1

21 Setting Preferences Pre-AP, CS0, CS-1

22 Major Difference

23 Alice 3 Workshop Problem Solving

24 Objectives Make it easier to learn/teach computer programming Retain students for entire term Attract students to computing majors/minors Enable students to succeed in successive courses Make the course engaging and creative

25 Traditional Problem Solving Read and understand a problem or task specification Design a solution (develop an algorithm) Implement (code) Test Revise, as needed

26 Problem Solving in Alice The problem is: Create an animation to.. Read and understand a problem in the context of creating an animation initial scene construction. Design a solution Implement write the program Test Revise, as needed

27 Example Finding Nemo trailer Problem: Create 5 10 second animation that shows the reaction of Marlin (a small fish) when he meets a shark and Marlin s reaction to the shark when the shark frightens the fish.

28 Next step Read and understand the problem or task specification Design a solution Develop an algorithm Scene setup Implement (code) Test Revise, as needed

29 Designing a Solution in Alice To create a design, we borrow the idea of storyboards from professional animators at Disney, Pixar, etc. Pixar demo: How We Do It

30 Visual Storyboard Successive frames for major actions in a story.

31 Textual Storyboard - algorithm Do in order Scene opens with Marlin and Dori talking Marlin says Have you ever seen a shark? Dory says No, and I don t want to Shark suddenly appears Marlin tries to find a place to hide turns to face the treasure chest swims to the treasure chest swims around the treasure chest swims into the treasure chest Treasure chest lid closes

32 Next step Read and understand the problem or task specification Design a solution Develop an algorithm Scene setup Implement (code) Test Revise, as needed

33 Scene setup

34 Alice 3 Workshop Scene Setup

35 Next step Read and understand the problem or task specification Design a solution Develop an algorithm Scene setup Implement (code) Test Revise, as needed

36 Textual Storyboard - algorithm Do in order Scene opens with Marlin and Dori talking Marlin says Have you ever seen a shark? Dory says No, and I don t want to Shark suddenly appears Marlin tries to find a place to hide turns to face the treasure chest swims to the treasure chest swims around the treasure chest swims into the treasure chest Treasure chest lid closes

37 Goal: Set up initial scene Open SharkEncounter.a3p Most of our scene has already been setup We are going to add Marlin, Bruce the shark, and a treasure chest to the scene Learning to set up a scene has a learning curve -- play with the scene editor an hour or so-- later!

38 Hints To avoid loss of work Save the project world every minutes, using a progressive numbering pattern world1.a3p, world2.a3p, world3.a3p, etc. Use Undo/Redo buttons Set a camera marker at the original camera position before doing anything else!

39 Undo / Redo Ability to undo and redo actions during scene setup Scene Setup Edit Menu (Mac) Edit Menu (Windows)

40 Set a camera marker First step in working with the Scene Editor: Create a camera marker at its original starting position In the Scene Editor, expand the Marker section of the Control Panel

41 Button: Create camera marker

42 Rename By default the marker is named camera_<color> Rename it to make it meaningful

43 Gallery Organized by skeletal structure and mobility mode Note: Models still being developed

44 Classes The gallery contains folders Each folder contains files that define Alice s 3D models, which are classes Each class defines a type of object An object is an instance of the class

45 Adding an object to scene Create new instance of a class Click on thumbnail Enter name of object Click on OK

46 Object tree When an object is added to the scene, a tile is added to the object tree in the scene editor.

47 Object Properties for a particular object in the scene

48 Mouse & handles Alice 3 provides handles for mouse positioning

49 Handle Styles: Default Turn object horizontally Move object on the horizontal plane

50 Handle Styles: Rotate Rotate object in six directions

51 Handle Styles: Reposition Move object vertically or horizontally

52 Handle Styles: Resize Resize object in all dimensions proportionately

53 Handle Styles Turn object horizontally Move object on the horizontal plane Copyright 2012 Alice += Java Wanda Dann, Don Slater

54 One shots We want to position the shark toward the back of the scene.

55 Adjust fog density Fog may be too dense/too light

56 Save the world In menu bar: File/Save as This is the world that we will use in continuing presentations in this workshop.

57 Alice 3 Workshop Scene Setup Techniques for positioning objects

58 Recall: initial scene Scene setting is enhanced with a treasure chest, cave, sunken ship, sea coral The shark is hidden

59 Camera navigation arrows Moving the camera is often necessary for positioning objects in a scene.

60 Return camera to startposition To move the camera back to its original position, use the reset button for the red camera (startposition)

61 Relative positioning To prepare for hiding the shark, first reposition marlin and dory so they are close together and (more or less) facing one another. Also, reposition bruce (the shark) close to and facing the fish.

62 Camera viewpoints Alice 3 provides a menu of camera viewpoints for relative positioning

63 Top view

64 Use Snap Can align objects in the scene using snap-togrid mode

65 Mark the shark s position Select the shark Click on Create marker at <shark name> button Name the marker and click on OK

66 Hide the shark To hide the shark move it toward the back of the scene (the fog density will hide it).

67 One shots Procedural methods (actions) can be used one-time-only to position objects in the Scene Editor

68 Cascading menus

69 Add the treasure chest To quickly find the treasure chest, use search

70 Your turn Use one-shots to position the treasure chest in an upright position, exactly 10 meters from marlin. move the treasure chest to marlin orient the treasure chest upright have the treasure chest face the camera move the treasure chest backward 10 meters

71 Open the lid of the chest Select the lid of the treasure chest

72 Open the lid of the chest Use the menu to turn the lid backwards ¼ rotation

73 Return to code editor Click on edit code (lower right of scene)

74 Save the world In menu bar: File/Save as This is a world that we will use in continuing presentations in this workshop.

75 Alice 3 Workshop Implementation

76 Next step Read and understand the problem or task specification Design a solution Develop an algorithm Scene setup Implement (code) Test Revise, as needed

77 Storyboard Algorithm Do in order Dory says Have you ever seen a shark? Marlin says No, and I don t want to Shark suddenly appears Marlin swims to the treasure chest Marlin swims around treasure chest (trying to find a place to hide) The treasure chest lid opens Marlin swims into the treasure chest The treasure chest lid closes

78 Implementation To create an animation, each step in the algorithm must be written as program code using the Code Editor.

79 objecttree & Fields The objecttree is accessed with a dropdown menu, showing the instance fields in this scene

80 Methods Panel Tabs Procedures void methods Functions methods that return a value Properties getters and setters that work with private fields of an object

81 This scene's procedural methods The MyScene class defines procedural methods that execute when the Run button is clicked Setting up a scene (custom and auto-generated) myfirstmethod (the driver)

82 Editor pane for myfirstmethod procedure

83 Action code Dory says Have you ever seen a shark?

84 Drag and drop

85 add detail modify duration The say speech bubble displays for only one second All Alice statements have a default duration of 1 second Use the duration modifier in add detail to change the length of time

86 Your turn Have marlin say No, and I don t want to. Lengthen the duration of the say statement

87 Shark appears

88 add detail modify duration Lengthen the duration of the shark s appearence

89 Alice 3 Workshop Procedures

90 Textual Storyboard - algorithm Do in order Scene opens with Marlin and Dori talking Marlin says Have you ever seen a shark? Dory says No, and I don t want to Shark suddenly appears Marlin tries to find a place to hide turns to face the treasure chest swims to the treasure chest swims around the treasure chest swims into the treasure chest Treasure chest lid closes

91 02. FindingNemoSharkAppears.a3p

92 What next? Do in order Scene opens with Marlin and Dori talking Marlin says Have you ever seen a shark? Dory says No, and I don t want to Shark suddenly appears Marlin tries to find a place to hide turns to face the treasure chest swims to the treasure chest swims around the treasure chest swims into the treasure chest Treasure chest lid closes

93 Stepwise refinement: a plan for swim do in order marlin tail turn left 0.1 m marlin tail turn right 0.2 m marlin tail turn left 0.1 m

94 Access Class panel To declare/edit methods and properties of a class, select the appropriate tile in the Class pull-down menu.

95 Class panel Click the Add Procedure button to declare a new procedural method

96 this All other objects / classes are out of scope (disabled in object tree); this is now an instance of the MyClownFish class

97 this.gettail

98 Create code Note durations of statements add to 1 sec

99 Test Create a statement in the scene s MyFirstMethod to have marlin swim.

100 Observation Marlin s tail turns left and right but he doesn t move forward Need to revise our design and code

101 Concurrency Do together is a control statement where actions may occur at the same time. do together marlin move forward 1 m do in order marlin tail turn left 0.1 m marlin tail turn right 0.2 m marlin tail turn left 0.1 m

102 Updated code

103 Alice 3 Workshop Transition to Java

104 Alice 3 Java Our Approach Problem solving Create a program to.? In the context of animation Engaging, Motivating Transfer to Java using same context Goal: Keep momentum for solving the problem

105 Mediated Transfer Alice 3 provides a concrete context for teaching/learning fundamental concepts The challenge is to mediate the transfer of these concepts from concrete to abstract and other contexts.

106 Option for Java display Window/Preferences/ProgrammingLanguage

107 Code with full Java syntax

108 Plugin For NetBeans

109 Demo, Step 1 Transferring Alice 3 Project

110 Demo, step 2 Type of Project

111 Demo, step 3 File to Import

112 Successful transfer Project should appear in the list of projects (upper left of NetBeans window)

113 Java classes

114 Instantiating Objects

115 myfirstmethod

116 Class definition - Alice

117 Class definition - Netbeans