Sprite Position and Direction

1. "U1L2-Interface"
   Creating a New Project  

   1. If there is a Snap! file open, save it.
   2. Go to the Snap! File menu, , and choose "New".
   3. Click "Yes" to replace the current project.
   4. In the Snap! File menu, , choose either "Save" or "Save as..."
   5. Name the file "U1L2-Interface"
There are also other backgrounds built into Snap! that you can use for other projects.
2. Change the background on your stage so that you see the coordinate plane grid and axes.
   Changing the Background 

   1. In the Sprite Corral, select the Stage thumbnail.
   2. Then, choose "Backgrounds" from the Snap! File menu, .
   3. Choose "xy-grid.gif" to show the grid.
3. Turn on watchers to show the direction of the sprite and its x and y coordinates.
   Adding Sprite Watchers 

   1. In the blue Motion palette, click on the gray checkbox next to the block. Drag the sprite around and to see the watcher display the changing x-position of the sprite.
      
   2. Create watchers for and by checking their boxes in the same palette. Move the sprite around using commands or by just dragging it with your mouse. Notice which actions change which values.

Your stage should look like this with axes, a grid, the origin, and 3 watchers: x-position, y-position, and direction.

The coordinates in Snap! are only integers.
In many programing languages, the origin is at the upper left corner of the screen and the numbers go up to the right and up as you go down the screen.

Coordinate systems for computer screens may be set up differently than in mathematics.

• In Snap!, the origin, (0, 0), is in the middle of the stage and the signs of the coordinates in the quadrants are the same as in algebra.
• Unlike mathematical convention, the numbers naming sprite direction in Snap! start with 0 at the top and count up in degrees going clockwise.
  

4. What are the position coordinates of the sprite in the image above?
5. In what direction is the sprite pointing?
The tip of the sprite arrow is the point in question.
6. Experiment by dragging around a sprite image () to make sure you see which part of the sprite graphic the coordinates are describing.
Once the pen is down, it stays down even in a different script. If you want your script to move the sprite without leaving a trace, use the pen up block to "lift the pen."
7. Assemble a collection of blocks from the "Motion" and "Pen" tabs into a script that, with one click, draws a square or triangle or some other a simple picture. You will almost certainly want at least these blocks:
         and .

1. This script was intended to create a pentagon, but it has bugs. Without building it, try to figure out what it does instead. Then build it and try it out. What change(s) would fix this script?
   
2. Create a program with the x-y-grid in the background that labels each of the quadrants with the signs of their coordinates.

Snap! Accounts and Files

Creating an account will allow you to save your programs to the cloud.

1. Open Snap! using this URL: http://snap.berkeley.edu/run, and bookmark it so you can access it easily.
In Snap!, you will save your work to the cloud. According to howstuffworks.com, cloud storage, "refers to saving data to an off-site storage system maintained by a third party. Instead of storing information to your computer's hard drive or other local storage device, you save it to a remote database. The Internet provides the connection between your computer and the database."
2. Click the cloud menu, , in the toolbar:
   
3. Select the "sign up" option in the menu, and follow the instructions.
   
4. Check your email to get your initial password. Using email is important to digital work.
You may change your password at any time via the cloud menu, . Always choose passwords that you can remember but are hard for others to guess.
5. Return to Snap!, and enter your user name together with the password you receive to log in.
6. Select "Change Password..." from the cloud menu, and change your password to something easy for you to remember but hard for others to guess.

Logging in to Your Snap! Account 

You'll want to be logged in whenever you are coding.

1. Click the Cloud menu in the toolbar:
   
2. If it says "logout" and then your usename, you don't have to do anything; you are already logged in. Otherwise, choose "login..." and enter your username and password.
3. Log out (from the Cloud menu) when you are done.

Saving and Opening Projects 

You can read more about "Saving and Loading Projects and Media" in the Snap Manual pages 14-16.
7. Locate or rebuild the script that draws a square:
   
8. Check if you are logged in by clicking the Cloud menu in the toolbar, .
1. If you see this menu: , make sure the username you see is yours. If not, log out and log in with your username.
2. Log in if you see this menu:
3. Create an account if you have not done so already.
It helps keep work organized to name files thoughtfully. In BJC, start your files with the unit and lesson number.
9. To save your work, go to the File menu , and choose "Save" or "Save as...".
10. Give your project a name that will help you remember what the project is.
"U1L1-Square"

Opening Snap! Projects 

• Any time you want to access a project, click the File menu and select "Open..." to see a list of all your Snap! projects.

Exploring Snap! Code

Exploring Snap! Code

Share one computer. Take turns typing and reading.
Snap! is a computer programming language. Programs are sets of instructions (called scripts) that tell the computer what to do. Since Snap! is a visual language, you will build your programs by dragging blocks (individual instructions) and snapping them together into scripts.

1. Bookmark or write down the Snap! link. You will need it every day.
   Use the URL http://snap.berkeley.edu/run to launch Snap! in a new window (or tab).
2. Build this script. There are instructions below. Then click on the script to see what it does.
   
   
Building a Script   (Yellow boxes are optional reading.) 
This animation shows how to build the script. Drag one block underneath another to snap them together. The white bar shows where the block will snap.

Instructions
The blocks' colors match their palettes: blue for Motion, green for Pen, yellow for Control, etc.
1. Look through the eight palette categories shown at right to find each of the blocks you need for the script. Drag each block into the scripting area and snap them together.
2. Adjust the numbers to match the script:
   
For You To Do
3. Discuss what this script does and why.
4. Discuss the behavior of the script with another pair. If the results are not the same, check that each script matches the model shown above.

Pair Programming Swap

In this course, you will use a technique that professional programmers call pair programming—writing computer programs in teams of two. One partner writes the program; the other partner helps plan and helps catch errors.
Switch roles often, aiming for equal time in each role. If you haven't swapped yet, swap now.

Reference for the script that draws a square:

5. Experiment! What happens if you...
   1. Change the number in the block and click the script to run it again?
   2. Change the number in the block and run the script again?
   3. Change the number in the loop?
   4. Click the block in the green Pen palette?
You can click (or any other block) in its palette or in the scripting area to run it at any time.
If you click a block that is part of a script, the whole script will run.
6. Look back at the code that drew a square. Discuss how each block contibutes to the overall behavior.

1. Experiment more! Create a program that draws something. Below are other blocks that you may find useful. Find them by their color coding, and click on them to see what they do.
   
If you see some feature or code that you like, build something like it in your own program.
2. with another pair. Discuss how each block contibutes to the overall behavior.