Week 3

Music: Steve Reich / Come Out

Flow Control

So far the progams we have been working with in class have mostly been run from top to bottom, with each line of code getting execute once.Flow control allows you structure your progam into parts that can be executed repeatedly and conditionally.

Loops are powerful because running just a few lines of code many times can create complex results that would be tedius or practically imposible otherwise.

Conditionals are also very powerful. They allow your code to make decisions, executing parts of your progam only in certain conditions.

Compare this code that doesn’t use a loop….

    size(400, 400);
    background(255);
    stroke(0,0,0,50);

    line( random(0, 400), random(0, 400), random(0, 400), random(0, 400));
    line( random(0, 400), random(0, 400), random(0, 400), random(0, 400));
    line( random(0, 400), random(0, 400), random(0, 400), random(0, 400));
    line( random(0, 400), random(0, 400), random(0, 400), random(0, 400));
    line( random(0, 400), random(0, 400), random(0, 400), random(0, 400));

…to this code that does.

    size(400, 400);
    background(255);
    stroke(0,0,0,50);

    for (int n = 0; n < 5; n++) {
        line( random(0, 400), random(0, 400), random(0, 400), random(0, 400));
    }

Even with just 5 random lines, the loop is clearer and shorter. Imagine if we wanted hundreds or thousands of lines.

Conditional Statements: “if”

Conditional statements allow you to specify that a block of code will only be executed when a condition or test is met.

This is the general syntax for a conditional statement:

    if (condition/test) {
        // do this if the test succeeds
    } else {
        // or do this instead
    }

This example draws a rectangle about 20% of the time.

    if (random(100) < 20){
        rect(10,10,10,10);
    }

The condition or test is an expression. Processing will evaluate the expression. If the result is True (or a non-zero number or other value that is considered logically true) the code in the following block is executed. If the result is False (or 0) the code is not run.

Relational operators like ==, !=, <, >, <=, and >= are used to compare values.

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

Loops: “for”

Using the loop statment allows you to run a block of code repeatedly.

The syntax looks like this:

for (init, test, update){
    //code to repeat
}

The processing reference has a good description of how for loops work.

When a for structure is executed, the following sequence of events occurs:

  1. The init statement is run.
  2. The test is evaluated to be true or false.
  3. If the test is true, jump to step 4. If the test is false, jump to step 6.
  4. Run the statements within the block.
  5. Run the update statement and jump to step 2.
  6. Exit the loop.

Read the rest: http://processing.org/reference/for.html

Example with For and If

This example draws a grid of colored squares. The color of the square is determined by where the square sits in the grid, with some random variation. This would be some great code to try experimenting with. Change something, think about what will happen, run the code to see what happens. Think of a small change you could make, try to get it to work. Play.

    size(500, 500);
    noStroke();

    for (int y = 0; y < 10; y++) {
      for (int x = 0; x < 10; x++) {

        if (x + y < 10) {
          fill(random(50, 255), 0, 0);
        }
        else {
          fill(0, 0, random(50, 255));
        }
        int xPos = x * 50;
        int yPos = y * 50;
        rect(xPos, yPos, 50, 50);
      }
    }

Homework

  1. Read this week’s lecture notes.

  2. Read the section in chapter 4 of the Getting Started book that deals with loops (pages 43-48).

  3. Create a program that makes a variable and complex drawing. You want to bring together all the concepts we’ve talked about and that you have explored so far.

  • Use a variety of Processing drawing commands like ellipse, rect, line, bezier, and curve. Look through the API and try to experiment with new commands.
  • Use for loops to create repetition and complexity.
  • Use if statements to control what your program draws. Consider combining random with if.
  • Use variables and the random function to create a drawing that is different (in some way) everytime.
  • Consider including rastor images using PImage.
  1. Review your code, and make it ready to share.
  • Make sure that your variables have clear names.
  • Add comments throughout your code that help make it clearer.

  • Include a comment header at the top of your code with the name of your program, a breif descripiton, your name, and the name of the class. It should look something like this.

    // City Skyline
// Draws a randomized city skyline. Demonstrates the use of loops and conditionals.
// Author: Justin Bakse
// Class: PUDT 1203 Creative Computing

Post a screenshot of your program results and your program code to the class blog.

Bring a printout of your screenshot to class next week. You don’t need to bring a printout of your code.