Song: John Zorn / Cobra

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?

Introduction to Processing 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 peices of data. Using variables allows you to create code that is more general and reusable. For example: A peice of code that can add 2 and 3 together is specific; a peice 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.
• Giving values a name makes it easier to understand code.

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. 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.

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 assigned you can assign it a new value:

    age = 5;

You can assign a variable with the result of a calculation:

    age = 5 + 1;

When you use the variables name in code, its value will be used. The following expression would add the current value of age to 2:

    2 + age

This code will make the value go up by 1:

    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(.5, 1.0);

    //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);

    //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);

Scope

All variables have a scope. 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.

http://processing.org/learning/basics/variablescope.html

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.
• Seperate words an a variable useing camel case: buildingHeights, hitPoints, maxFuel.
• Avoid abbrevations.
• Be consistant

Random

The random function returns an (effectively) random number between a high and low value you provide. Using this fuction 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 orchastrated variations on a theme.

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

Assignment

1. Read this weeks’s lecture notes.
2. Read chapter 4, and Appendix A, B and C of the Getting Started book. Note: You don’t need to read pages 43-48, but you can. We will cover repetition next week. Focus on the examples about variables, variable types, declaring variables, and basic arithmetic with variables.
3. Create a program that makes a variable drawing. Like last week, start with a paper sketch of what your pogram will draw. Think about what elements may change, how they will change (size, position, color, etc.) You may want to make a few sketches, and make notes on your sketch. Then create a 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 everytime 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 4 variables.
   • It should include random at least once.
   • You should explore varying size, postion, and color.
   • It should produce a different variation of your drawing everytime you run it.

   Run your code 4 times, and take screenshots of the resulting image each time. Post the screen shots, and code to the class blog. Be sure to also include any images you used.

   Also bring a print out of your 4 images (side by side on one sheet of paper) and code to class next week.