Tutorial+1

**Tutorial #1 - Strings, variables and fun!**
//The following tutorial will contain a few questions in **bold italic**. Please answer these questions in complete sentences and create a new Google Document shared with lkozloff@logoscambodia.org with the title "tutorial 1 - ". You may talk with one another and work together, but each person is responsible for turning in their own work **in their own words**. Part of this assignment is getting used to Google Docs. Please ensure that I have the ability to edit your document, as I will leave you comments. If you're not sure how to do this, please read the article about sharing on Google Docs Help//

Remember from our class discussion how we store variables. The general form is:
 * Review**

//type// variableName = //value;//

//**1. What 4 "types" have we discussed so far?**//
 * //2. Give an example value for each type.//**

__Setting and Retrieving Variables__
If we're storing data inside the computer, obviously we want to get it out at some point. Right? For now, we're going to work inside the small box that usually shows errors. Later on in this tutorial, I'll explain how to make words and numbers appear on the screen in a more attractive way.

Are you ready? Please enter the following code (between the lines) in a new processing document.

//ex. 1// code println("hello world!"); code

That's it, just the one line! Try running your program, and make sure you can see where the output is displayed. If you can't find it, ask a friend! You may have to make your processing window bigger.

Once you've figured that out, try the following code.

//ex. 2// code format="java" String greeting = "Salutations world!"; println(greeting); code

Do you see the difference? In ex. 2 we're creating a variable called greeting, and then printing its contents to your screen. (In computers printing doesn't ALWAYS mean printing out on paper... in fact most of the time it means printing to the screen)


 * //3. Look at the following code, what will the output be? (answer this question BEFORE you try it!)//**

//ex. 3// code format="java" String greeting = "Salutations world!"; greeting = "sup world?"; //look at this line for question 4. greeting = "Howdy world!"; greeting = "Soursdey world!"; greeting = "Anyong world!"; greeting = "meh."; println(greeting); code

Was your answer right? Don't worry. I'll find out! (no cheating!!) As you can see, I created the variable greeting on the first line, and then set its value to different things in the following lines. That's what's great about variables! You can use the same name infinity times. It may be helpful to think of a variable as a box. You can put things in the box, take things out of the box, and put new things in the box. At the end of this program, the last thing that was in "the box" (greeting) is what is printed.


 * 4. Why do I not use String after the first line? If I put String on line 2, what would happen?**

Whenever you put the type before a variable name, you're telling the computer to create that variable. Without the type you're telling the computer to put something inside that variable.

Outputting data is pretty easy, right? println is a very nice **function.** We won't go in to too much detail right now, but think of a function as a 'shortcut' that lets you do something easily. Functions aren't hard to use, but sometimes you have to be able to read the documentation. Look at the documentation for println

The parameters section lists what kinds of things you can put in println.


 * 5. In the documentation for println, are all of the variable types that we know about so far listed in the parameters section?**//

__Built in Variables__
Now that we've done some outputting and setting, let's take a look at some variables that processing provides for us. Please try the following code:

//ex. 4// code format="java" void setup{ size(200,200); } void draw{ println(mouseX); } code

Move your mouse in the grey square that appears.

//**6. What is your program printing out? What happens as you move your mouse left to right in the main window?**//

Interesting, right? Processing provides us with several variables. We'll most often use: //int// **mouseX** - the X location of the cursor in the main window //int// **mouseY** - the Y location of the cursor in the main window //boolean// **mousePressed** - whether the mouse button is pressed or not

What are these numbers good for? Excellent question! Let's make colors!

//ex.5// code format="java" void setup{ size(255,255); } void draw{ background(mouseX, mouseY, 0); //Hint: Red Green Blue } code

//**8. If you wanted the color X, where would you put your mouse?** **(Fill in the table, the first one has been done for you)**// If you've gotten this far, you're doing great! Take a 2 minute break before you continue!
 * //7. What does this program (ex.5) do? (Be specific by looking at the code. Don't say something like 'it makes colors, derp')//**
 * **Color** || **Mouse Location** ||
 * Black || //Upper Left Corner// ||
 * Red ||  ||
 * Green ||  ||
 * Yellow ||  ||

Break over? Okay. Let's get to the good stuff. Printing stuff on the screen with colors and fonts. This section is copy/pasted from a larger tutorial found here

__Displaying Text__
Please note this section can be a bit tricky. Follow the directions very carefully. My comments are in //italic//.

1. Choose a font by selecting "Tools" --> "Create Font." This will create and place the font file in your data directory. **Make note of the font filename for Step 3.** Processing uses a special font format, "vlw," that uses images to display each letter. Because of this, you should create the font at the size you intend to display.

//Mr. Kozloff suggests picking Arial, Size 12. It's up to you though.//



2. Declare an object of type [|PFont]. //You can do this outside of your setup and draw sections.// code format="java" PFont f; //creates a variable named 'f', of type PFont (a new variable type.. that we'll only use for this one purpose) code

//3. Load the font by referencing the font file name and the function [|loadFont]. This should be done only once, usually in [|setup]. Just as with loading an image, the process of loading a font into memory is slow and would seriously affect the sketch's performance if placed inside [|draw].//

Got that? **__NEVER__** put loadFont into the draw section of your program!! code format="java" f = loadFont("Serif-48.vlw"); //remember how you noted the file name you created in step 1? This is it! Put it here, in quotes! code

4. Specify the font using [|textFont]. textFont takes one or two arguments, the font variable and the font size, which is optional. If you do not include the font size, the font will be displayed at the size originally loaded. Specifying a font size that is different from the font size loaded can also result in pixelated or poor quality text. code format="java" textFont(f,36); //the number is optional textFont(f); will work just as well. You only need the number if you want a slightly different size. code

//5. Specify a color using [|fill].// code format="java" fill(255); //What color is this? code

6. Call the [|text] function to display text. (This function is just like shape or image drawing, it takes 3 arguments -- the text to be displayed, and the x & y coordinate to display that text.) code format="java" text("Hello Strings!",10,100); // places the text at (10,100) code

Here are all the steps together. Please note that if you just copy and paste this code, it will not work. You **must** modify it per the instructions above.

code format="java" PFont f; //STEP 2 Declare PFont variable void setup { size(200,200); f = loadFont("ArialMT-16.vlw");//STEP 3 Load Font } void draw { background(255); textFont(f,16); //STEP 4 Specify font to be used fill(0);//STEP 5 Specify font color text("Hello Strings!",10,100); //STEP 6 Display Text } code

//**9. Using the above code as an example, make your own version - printing your own message in your own color! Include the code for Mr. Kozloff to see.**// //**10. Do you have any questions? Please write them down.**//

Whew, excellent job! This concludes Tutorial 1. With what you know, you should be ready for Assignment #2 - Using Variables.