Song: John Zorn / Cobra
http://en.wikipedia.org/wiki/Cobra_(Zorn)
http://www.youtube.com/watch?v=1m1pjR1AQbc

Review Homework

Ask yourself:
– What did everyone else do?
– Which projects did you like best? Least? Why?
– What techniques/content/decisions did you find interesting?
– How would you do your project differently if you did it agian now?

Syntax is Power

Your first assignment is an example of a computer program, but it not a very powerful one. It is little more than data. As we introduce new elements of syntax your programs will become more powerful. Today we will introduce the first power: variability. Repetition, calculation, and decision making will follow. Even with just a few basic powers, you can create powers that can do anything and everything possible to compute. Additional powers will make complex projects easy to create and manage.

Common Elements of Syntax

What to Do	What to Know
operators	literals
experessions	variables
statements	arrays
flow control	structs*
functions

What to Do + Know
Classes
Objects

*structs don’t exist in Processing.

Example Code: Cityscape

    //Draws a Cityscape, demonstrates several processing language features
    // literals, variables, arrays
    // operators, expressions, statements, blocks, loops ('for'), conditinonal statements ('if')

    //declare array to hold building heights
    float[] buildingHeights;

    //set up canvas
    size(640, 480);
    background(75, 75, 120);

    //manually set height of buildings
    buildingHeights = new float[10];
    buildingHeights[0] = 2; buildingHeights[1] = 3;
    buildingHeights[2] = 2; buildingHeights[3] = 3;
    buildingHeights[4] = 4; buildingHeights[5] = 6;
    buildingHeights[6] = 2; buildingHeights[7] = 2;
    buildingHeights[8] = 6; buildingHeights[9] = 5;

    //set up drawing state
    noStroke();

    //loop through building heights, draw buildings
    for (int i = 0; i < 10; i++) {
        float xPos = i*64; //where to draw the building, horizontally

        //randomly choose value of building color, set
        float colorBase = random(100, 200); 
        fill(colorBase + 50, colorBase, colorBase); 

        //draw building
        rect(xPos, 480, 64, -buildingHeights[i]*50); 

        //draw elevator on tall buildings
        if (buildingHeights[i] > 4) {
            rect(xPos + 10, 480 -buildingHeights[i]*50, 10, -10);
        }
    }

Variables in Depth

In a computer program, variables are named pieces of data. Using variables allows you to create code that is more general and reusable. For example: A piece of code that can add 2 and 3 together is specific; a piece of code that can add any two numbers you provide it is general, and much more useful.

There are many benefits to variables:

• Variables allow you to create general, reusable code.
• Variables let you store a value so you can use it later.
• Variables are used as parameters in functions.
• Naming values in your code makes it easier to understand.

All variables have a name, a value and a type.

The name of a variable doesn’t really matter to the computer, but choosing good names is a very important part of creating readable code.

The value of a variable can be changed while the program runs. The value stays the same until your code changes it.

The type of the variable determine what kind of value the variable holds. For example, int variables hold integer number values. float variables hold number values with a decimal part. There are types to hold colors, words, and even more complex concepts like images or videos.

Variables also have a scope which we will talk about more next week.The variable’s scope determines how much of the code knows about the variable. With a few exceptions the scope of a variable is limited to the pair of braces it is declared within. Variables will not be visible to the program outside these braces.

The Life of a Variable

To create a variable you declare it. This code declares a variable named age, of type int:

    int age;

This code also initializes the variable with a starting value:

    int age = 3;

Once a variable is declared you can assign it a new value:

    age = 5;

You can assign a variable with the result of an expression:

    age = 5 + 1;

When you use the variables name as a parameter or part of an expression, its value will be read and used in its place. The following expression would add the current value of age to 2:

    2 + age

This code will make the value go up by 1, this happens in multiple steps. First the value of age is read, then it is added to 1, then the result is assigned to age:

    age = age + 1;

Example Code: Bird

    //Draws a Bird, demonstrates use of variables, random, and math to make a parameterized drawing.

    //choose a random size for the body
    float bodySize = random(20, 60);

    //calculate the vertical position of the body based on its size
    float bodyPosY = 100 - bodySize/2;

    //choose a random headsize, smaller than the body
    float headSize = bodySize * random(.6, 1.1);

    //calculate a head position with a 10 pixel overlap
    float headPosY = bodyPosY - (bodySize * .5) - (headSize * .5) + 10;

    //set up to draw
    size(100, 100);
    background(100, 100, 100);
    noStroke();

    //draw body
    fill(200, 200, 255);
    ellipse(50, bodyPosY, bodySize, bodySize);

    //wing
    fill(170, 170, 240);
    arc(50 + 5, bodyPosY, bodySize + 5, bodySize, -PI *.5, PI * .25);
    arc(50 - 5, bodyPosY, bodySize + 5, bodySize, PI * .75, PI * 2);

    //draw chest
    fill(170, 170, 240);
    ellipse(50, bodyPosY - 4, bodySize * .8, bodySize * .8);

    //draw head
    fill(200, 200, 255);
    ellipse(50, headPosY, headSize, headSize);

    //draw beak
    fill(175, 125, 125);
    triangle(50 - 5, headPosY, 50 + 5, headPosY, 50, headPosY + 10);

    //draw eyes
    fill(255, 255, 255);
    ellipse(50 - 5, headPosY, 12, 12);
    ellipse(50 + 5, headPosY, 12, 12);
    fill(170, 170, 240);
    ellipse(50 - 5, headPosY, 4, 4);
    ellipse(50 + 5, headPosY, 4, 4);

Style

Variable Names

• Most importantly, variable names should accurately describe the data they hold.
• Longer, more descriptive names should be used for variables used widely in the program.
• Shorter names make sense when the variable is only used in a single area.
• Separate words an a variable using camel case: buildingHeights, hitPoints, maxFuel.
• Avoid abbreviations.
• Be consistent.

Random

The random function returns an (effectively) random number between a high and low value you provide. Using this function lets you create variation in the results of your program. Random doesn’t necessarily mean crazy, chaotic looking results. Careful use of random values in a system can lead to orchestrated variations on a theme.

http://processing.org/reference/random_.html

The Spec

Screen Shots

Command Shift 3	Take a shot of the whole screen. Save to file.
Command Shift 4	Take a shot of part of the screen. Save to file.
Command Control Shift 3	Take a shot of the whole screen. Copy to clipboard.
Command Control Shift 4	Take a shot of part of the screen. Copy to clipboard.

On another OS? http://www.take-a-screenshot.org/

Image Resolution

An image’s resolution refers to how much detail or information the image contains. One common way to describe resolution is stating width and height of the entire image in pixels. Another is to state the number of pixels or dots in one linear inch DPI.

Digital Images don’t really have an intrinsic DPI because they don’t have an intrinsic physical size. A digital image may be displayed on a screen with very small pixels (a mobile phone) or very large pixels (a video projection). A digital image’s DPI will be different depending on the size it is displayed.

Many formats allow you to specify a DPI for the image, but this doesn’t actually change the data in the image. It is simply a suggestion for how large the image should be displayed or printed.

When preparing images for display on screen, it is usually much more important to think about the whole image size in pixels.

Saving Images for Web

To display an image on the web it must be saved in a format that a web browser can display. Two of the most useful formats are .png, which is usually best for graphic images with areas of solid color, and .jpg, which is usually best for photographs.

Use Adobe Photoshop to save images for use on the web.
http://sixrevisions.com/web_design/comprehensive-guide-saving-images-for-web/
http://tv.adobe.com/watch/understanding-adobe-photoshop-cs6/save-for-web/

Posting Assignments to the Blog

Every student in the class will have an account on this class blog. You will post your homework assignments, code, writing, and documentation to the blog each week.

Assignment

1. Read this week’s lecture notes.

2. Read chapter 4, and Appendix A, B and C of the Getting Started book.
   Focus on the examples about variables, variable types, declaring variables, and basic arithmetic with variables.

   Note: Pages 43-48 cover repetition. We havn’t discussed repetion yet, but we will next week.

3. Create a program that makes a variable drawing. Like last week, start with a paper sketch of what your program will draw. Think about what elements may change, how they will change (size, position, color, etc.) You may want to make a few sketches showing this variation. Making notes on your sketch will also help.

   Create a processing program that draws an image similar to your sketch. Your program should use variables and the random function so that the drawing can be different every time it you run the program, like the example we looked at in class.

   Your program should have the following features:

   • It should include at least 5 variables.
   • It should include random multiple times.
   • At least two variables should be initialized with a random value.
   • At least one variable should be assigned a random value after it is initialized and read.
   • You must use at least 3 expressions to perform arithmetic on variables and literal values.
   • Your drawing should demonstrate variance in size, position, and color.
   • Your program should produce a different variation of your drawing every time you run it. Try to create a dramatic range of variation.
   • Your drawing must be created completely in code. Do not use any image assets.

   Run your code 3 times, and take screen shots of the resulting image each time.

   Make sure your code meets the general assignment specification.

   Post the screen shots and your zipped sketch to the class blog.