Week 3

Music: Steve Reich / Music For Six Marimbas

Flow Control

So far the programs 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 program into parts that can be executed repeatedly and conditionally.

Conditional statements are powerful. They allow your code to make decisions.

Loops are powerful. Combining repetition and variance, you can create complex results that would be tedious or practically impossible otherwise.

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 is the test the program uses to decide whether to run the code. The condition can be a literal value, a variable or an expression. Processing will evaluate the condition and 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 a value that is considered logically false) the code is not run.

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

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

Code Example using “if”

    // uses random() and if together to choose a color (red or green)
    // draws a circle with chosen color

    size(625, 350);
    noStroke();
    background(100, 100, 200);

    if (random(10) < 5) {
      fill(255, 0, 0);
    } 
    else {
      fill(0, 255, 0);
    }

    ellipse(625 / 2, 350 / 2, 300, 300);

Loops: “for”

Using a for statement 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

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

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

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

These code snippets do the same thing: draw ten randomly placed lines. The version with the loop is shorter, clearer, and easier to maintain. With just ten lines, either approach could work. If we wanted to draw hundreds or thousands of lines, using a loop is the only practical choice.

Code Example using “for”

    // uses a loop to draw a row of circles

    size(625, 350);
    noStroke();
    background(100, 100, 200);

    int i;
    for (i = 0; i < 10; i++) {
      float xPos = i * 60 + 40;
      ellipse(xPos, 350 / 2, 20, 20);
    }

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.

    // draws a grid of 100 squares.
    // squares on the left are red, squares on the right are blue

    size(500, 500);
    noStroke();

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

        if (x < 5) {
          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);
      }
    }

Controlling Probability

The random() function returns a pseudo-random value between a given minimum and maximum. The values returned by random() are distributed uniformly, that is all values are equally likely. When you roll a standard die, the results are also uniformly distributed: 1, 2, 3, 4, 5, and 6 are all equally as likely.

In nature it is common for “random” values to group around a common center, with high and low values in a given range being less likely. Think of the “bell curve”. One way to choose values that group is to call random() twice and add their values together. When you roll 2 standard dice, you can get any value between 2 and 12. However, while there is only one way to get 2 (1 and 1), there are several ways to get 7 (1 and 6, 2 and 5, …). Values towards the middle will happen more often.

One 6 Sided Die http://anydice.com/program/14e
Two 6 Sided Dice http://anydice.com/program/12c

Homework

  1. Read this week’s lecture notes.

  2. Read chapter 4 in the Getting Started book again.

  3. For each of the challenge images below, create a processing sketch. Your processing sketch should recreate the drawing as closely as you can. If you can’t figure out how to match it exactly, get as close as you are able and write a comment in your code that describes how your sketch differs from the challenge image. Some of the challenge images use Random(), so your drawing will differ in those details.

Challenge 1

Challenge 1

Challenge 2

Challenge 2

Challenge 3

Challenge 3

Challenge 4

Challenge 4

Challenge 5

Challenge 5

  1. The challenges below are more complicated than the ones above and will be considered as bonus. Begin by recreating them as closely as you can, then consider adding and embellishing the drawing.

Challenge Bonus 1

Bonus Challenge

Challenge Bonus 2

challenge_bonus_2

  1. When you complete your work, create a zip of all of your sketches. Do not post your code to the blog. Instead post screen shots of each challenge, and bring your code to class to turn in.

Leave a Reply