CS 101 - Problem Solving and Structured Programming Lab 1 - Introduction to Programming in lice designed by Barb Lerner Due: February 9/10 Getting Started with lice lice is installed on the computers in Visilab (the lab on the ground floor of Kendade). To use lice, you need to login to your account so that you will be able to save the lice world that you create. To do this: Right click on the VisiLabPC icon. It is in the upper left corner of the screen. Select Map a network drive. For the folder, enter \\mhc\username substituting your login id for username. Click Connect using a different username. Login with your name and password. Click Finish. This should open a window displaying your existing files. Double-click on the folder called classwork. Create a new folder called cs101. Using the File menu, select New and then Folder. This is where you should store the files you create in this course. To start lice, click on the Start menu in the bottom lefthand corner of the screen. lice should appear in the list of programs in the left column. You can also install lice (for free) on your own personal computer. It works on Windows computers as well as Macs. You can download lice 2.0 from http://www.alice.org. You also need to have Java on your computer for lice to work. Java may already be installed. It comes with Macs. If you try to start lice and it doesn t work, it probably means that you do not have Java. You can also download Java (for free) from http://java.sun.com/javase/downloads/index.jsp. You should get JDK 6 Update 7. When lice starts, there will first be a splash screen: This will disappear in a few seconds and be replaced by a dialog box looking like this:
Click on the Templates tab so that the window now looks like: Select grass as your template and click the Open button. lice will now switch to its main window with the grass template as your initial scene, like this: 2
dding Objects To add objects to the scene, click on the dd Objects button in the lower right hand corner of the scene. Your window should now look like this: 3
long the bottom right is the Gallery containing classes of objects that lice knows about. The Gallery organizes these classes into categories of related objects. If you click on the nimals category, the Gallery should now look like this: Clicking on one of these pictures allows you to add a new object to the scene. Try it. Manipulating Objects To the right of the scene is a collection of buttons that allow you to move, copy and resize objects in the scene. These buttons change the behavior of the mouse. n important thing to keep in mind when using lice is that you are editing a 3-dimensional scene on a 2-dimensional screen. This section describes how to use this buttons to manipulate your objects in 3 dimensions. To get the most of these descriptions, you should add an object to the scene and use the various controls. Left-right mouse motion moves the object to the left or right. Up mouse motion moves the object further away. Down mouse motion moves the object closer. Up mouse motion moves the object away from the ground. Down mouse motion moves the object closer to the ground. 4
Left-right mouse motion rotates the object to the left and right. Up-down mouse motion does nothing. Up-down mouse motion rotates the object forwards and backwards, like doing a somersault. Left-right motion does nothing. This button combines the previous 2 behaviors. I find it very hard to use I generally use the 2 previous buttons, and rotate in the 2 dimensions separately. This button allows you to resize the object. Up mouse motion makes the object larger. Down mouse motion makes the object smaller. Left-right motion does nothing. 5
Depressing the mouse button creates a copy of the object. If you drag the mouse before releasing the button, the copy will be moved using the behavior used by the arrow button above. Moving the Camera When working with lice, it is as if you are looking through a camera at a scene. You can get a different view by moving the camera. The controls below the scene allow you to move the camera. To use these controls, you point at one of the arrows and hold the mouse button down. The camera will continue to move as long as you hold the mouse button down. The camera moves up, down, left or right. Up arrow moves the camera closer to the scene. Down arrow moves the camera further away. Left arrow rotates the camera left. Right arrow rotates the camera right. 6
The down arrow rotates the camera down. The up arrow rotates the camera up. Introduction to the ssignment This lab assignment has 3 parts to it. Parts 1 & 2 are tutorial in nature. They give detailed instructions on how to create an lice world and program it. Part 3 gives you an opportunity to exercise your creativity and use the techniques you have learned to enhance the world from Parts 1 & 2 or create a new world. Here is the English description of the world you will create and program for parts 1 and 2 of this lab assignment: In a quiet country scene, there is a boy riding a bicycle with his dog running along side him. In the background we see a farmhouse and barn, along with some farm animals, trees and flowers. jet zooms overhead. So that you understand what your world should look like, here are some snapshots of the world when it starts, when it ends and at 2 points in between: Starting scene. The dog and bike are at the left edge of the road. The plane is in view. The dog and bike have moved only slightly while the plane, which moves much faster has nearly left the scene. 7
The dog and bike are near the right edge of the scene. The dog and bike have completely left the scene. Part 1: Creating a world The first thing we want to do is build the scene containing the following objects: road boy on a bicycle dog (or other animal) farmhouse barn jet few farm animals fence few trees few flowers To get rid of the things that you created in exploring lice, click the DONE button in the lower right of the world. Then open the File menu and select New World. Select the Grass template. To add objects to the scene, click on the dd Objects button in the lower right hand corner of the scene. Scroll the Gallery until you find the City and click on that. Your Gallery should now look like this: 8
Click once on the Road. window will pop up. Select dd instance to world. This will add the road to your scene. For some reason, lice chooses to add the road to the left of the world, mostly off the screen, in fact. We want to move the road so that it goes across the entire world. Grab the bit of road that you see and drag the mouse to the right until the road goes across the scene. Most likely, as you do this, it will appear that the road is at least partially covered by grass. Keep in mind that we are creating a 3D world here on a 2D screen. What we need to do is move the road up (or the grass down). To accomplish this, select from the upper right of the window. This will change the way that the mouse behaves so that you can move objects up or down. Use this to move the road up or the grass down. (I find it difficult to select the road.) Whichever you move, move it just enough to make the road fully visible. (You don t want the road hovering over the grass or it will look funny from other angles.) Now, you may find that the road does not fully stretch across the scene. If so, select in the upper right of the screen. This will change the mouse behavior so that moving the mouse now resizes the object that is selected. t this point, your scene should look something like this: It is a good idea to save your work frequently. To do this, open the File menu and select Save World. Be sure to save the world in the cs101 folder you created earlier. Next, let s add the bike rider to the scene. In the Gallery, click on Local Gallery. This will switch to showing you the categories of things lice knows about. Select People and then BikeKid2. When lice adds this to the scene, it will look all wrong, something like this: 9
The bicyclist is going across the road and is way too big. First make sure the bike is directly on top of the road (not hovering). Use the up-and-down mouse control to make sure the bike wheels are just on top of the road. Next, we need to rotate the bicyclist to be parallel with the road. You could do this by selecting the mouse control to rotate the bicycle to be parallel with the road. You need to get the bicyclist exactly parallel to the road so he stays on the road as he bicycles. Unfortunately, this is difficult to do precisely with the rotate button. more precise way to get the effect we want is the following: Right-click on the bicyclist (Control-click if you have a 1-button mouse.) In the menu that comes up select methods. In the methods menu select bikekid2 orient to. In the next menu, select road. This will cause the bicyclist to be exactly perpendicular to the road. (You might not detect any rotation at all.) Next, we will rotate the bicyclist precisely ¼ revolution to make him parallel to the road: Right-click on the bicyclist. In the menu that comes up select methods. In the methods menu select bikekid2 turn. In the next menu, select left. In the next menu, select ¼ revolution. The bicyclist should now be parallel to the road. If he is not, please ask for help. Next, use the resize control to make the bicyclist a reasonable size. Now your scene should look like this: Finally, you want to move the bicyclist to be near the left edge of the scene. Select the mouse control. This allows you to move selected objects left and right as well as closer and further away. You need to move the bicyclist left and further away to be on the road, like this: 10
Using these same mouse controls, add the remaining elements to the scene. Be sure that the dog (or other animal running with the bike) is also parallel to the road. You may also find it helpful to use the mouse control, which allows you to copy objects, when you are adding the trees and flowers. The nimals collection in the Local Gallery has no dogs. (It seems rather partial to cats!) So, you can either pick a different animal, or go to the Web Gallery (click Home in the Gallery and then Web Gallery) and use the Husky from its nimals collection. The remaining object can be found in the Local Gallery: Buildings: farmhouse, fence Farm collection: barn nimals: cow, horse Vehicles: airplane Nature: trees and flowers When you are satisfied with how the scene looks, click the Done button in the bottom right hand corner of the world. Part 2: Programming a world Ok, we now have the scene prepared in our world. The next job is to animate the world. Let s look again at our problem statement: In a quiet country scene, there is a boy riding a bicycle with his dog running along side him. In the background we see a farmhouse and barn, along with some farm animals, trees and flowers. jet zooms overhead. Our focus now is on the animation. Let s write that again as an algorithm (a list of English instructions): Ride bike on road Run dog next to bike Zoom jet overhead Now, lets translate these into lice statements. Recall that to write an lice statement we first identify the object we want to act and then the action to take. Our first sentence above indicates that we want the bike to move down the road. So, click on bikekid2 in the Object Tree. The de- 11
tail pane should now show bikekid2 s details, like the window shown on the right: Drag the bikekid2 move tile to the method editor. menu will appear asking you which direction to move it. Select forward. You will next see a menu asking how far to move it. We want it to continue to move until it leaves the window, so select 10 meters. Now Play the world by clicking the Play button at the top of the window. You should see the bicycle move on the road until it leaves the screen. If it doesn t leave the screen, increase the distance by clicking on 10 meters in the instruction in the Method Editor, select Other, and type in a larger value. If the bicycle doesn t stay on the road, you need to rotate the bicycle so that it is parallel to the road. To do this, click the dd Objects button and use the rotate left-right button ( ) to adjust the positioning of the bicycle. You will probably find that the bicycle moves very quickly. To slow it down, click on the more... menu at the end of the instruction. Select duration and then some time like 10 seconds. This will cause the bicycle to move at the speed of 10 meters / 10 seconds, which will likely seem like a more realistic pace. Play the world again, adjusting the distance and duration until you are happy with the result. Once the bicyclist is moving the way you like, repeat the process with the animal that accompanies the bicyclist. Most likely you will want the animal to move at the same speed and distance, so try those. djust the animal s positioning if necessary so that it stays parallel to the road. Now what happens when you play the world? What you should observe is that the bicyclist rides down the road and after the bicycle moves out of the scene the dog runs to catch up! That isn t really what we want. In lice (and in other programming languages), instructions are generally done in the order in which they are listed. What we want instead is for the dog to stay along side the bicycle. We want the dog to move together with the bicycle. To accomplish this, we use a Do together instruction. Drag the Do together tile from below the method editor into the method editor. Then drag the 2 instructions you have so it is inside the Do together instruction, like this: Now when you play the world, you should see the dog running next to the bicycle. The last bit of required animation is to have the jet fly through the sky. It will again move forward (forward is the direction the object is facing). Of course, it should move faster than 10 meters in 10 seconds. djust the distance and time as necessary to make the plane s flight realistic. Of course, the plane should fly at the same time as the bike and dog are moving. 12
I would also like you to get practice writing comments, English descriptions of the instructions. For example, a useful comment for the lab so far might be: // bicyclist and dog travel down the road together while a jet zooms overhead. To create a comment, drag the tile from below the method editor into the method. Initially, it will say No comment. Click on No comment, select Other and you will get a dialog box where you can type in the comment you want. dd this comment to the instructions we have created so far, but be sure to also add 1 or more comments for the additional animation that you do in Part 3. Part 3: Get creative Ok, now it is your turn to get creative. Please add at least 2 more objects to the world. You should do some editing to position them. Then add at least 3 more animation instructions, using something other than move forward. For example, you might have the cow and horse have a conversation about the bicyclist, or maybe the cow will jump over the moon! Use your imagination! (It doesn t need to be complicated, but it should tell some kind of story or be humorous, not just random actions.) Grading 20 Creating the world described in Part 1 5 nimation described in Part 2 10 dditional objects for Part 3 5 dditional animation for Part 3 5 Creativity 5 Comments Turning in Your Work Go to ella. Click on COMSC 101 in the toolbar menu across the top. Then click on ssignments in the left column. Click the submit link for this assignment. Click the dd ttachment button. Use the Browse button to upload a local file. Select the file containing your lice world. Click Continue. Then click the Submit button. 13