Week 5

Examples

Random circles

void setup() {
  size(500, 500);
  frameRate(1);
  randomSeed(1);
}

void draw() {
  float x = random(width);
  float y = random(height);
  ellipse(x, y, 50, 50);
}

Brownian motion

// Simulate (simplified) Brownian motion:
// the path a particle takes moving randomly
// around the screen

void setup() {
  size(500, 500);
  frameRate(100);
  randomSeed(1);
  // Set initial position
  posX = width/2.0;
  posY = height/2.0;
  inc = 20;
  gray = 0;
  background(255);
}


// Current position of particle
float posX, posY;
// Amount particle can move at each iteration
float inc;
// Current line color
int gray;

void draw() {
  gray = (gray + 1) % 256; // make sure gray lies in [0,255].
  // stroke(gray);
  // Specify RGBA components for fill color.
  // Draw an almost transparent rectangle that will
  // make the older portion of the path appear to fade out.
  fill(255, 255, 255, 10);
  rect(0, 0, width, height);
  // Update posX and posY to a new random 
  // position that we get to by moving a very
  // small increment.
  float oldX = posX;
  float oldY = posY;

  // "Bounce off" sides if we go off screen:
  if (posX < 0) { 
    posX = posX + random(inc);
  } else if (posX > width) {
    posX = posX + random(-inc, 0);
  } else {
    posX = posX + random(-inc, inc);
  }
  if (posY < 0) { 
    posY = posY + random(inc);
  } else if (posY > width) {
    posY = posY + random(-inc, 0);
  } else {
    posY = posY + random(-inc, inc);
  }

  // Can we use modulus to wrap around?
  // Need to handle the case of negative first operand properly.
  // posX = (posX + random(-inc, inc)) % width;
  // posY = (posY + random(-inc, inc)) % height;
  
  // Draw the next step in the path:
  // Use point(), ellipse(), line(), etc.
  // point(posX, posY);
  line(oldX, oldY, posX, posY);
}

Concentric circles

for (int j = 100; j > 0; j = j - 10) {
  println("Circle diameter = " + j);
  int diam = j;
  ellipse(width/2, height/2, diam, diam);
}

Graphing y = x^2

size(500, 500);

// Plot the graph y = x^2
// Sweep through the possible x values using a for loop,
// and draw a point corresponding (x, y)
// What is the origin?  What is the domain?  
// What is the range?
// Domain: [-10, 10]
// Range: [0, 100]

// Use a for-loop to draw a single point at each pixel.
for (float x = -10; x < 10; x = x + 0.001) {
  float y = x * x;
  // map x and y to screen coordinates
  // First: make sure x >= 0
  float screenX = x + 10;
  // Second: stretch to the correct width
  screenX = screenX * (500/20.0);
  float screenY = height - 5 * y;
  point(screenX, screenY);
}

Graphing y = x^2, using map() library function

size(500, 500);

// Plot the graph y = x^2
// Sweep through the possible x values using a for loop,
// and draw a point corresponding (x, y)
// What is the origin?  What is the domain?  
// What is the range?
// Domain: [-10, 10]
// Range: [0, 100]

// Use a for-loop to draw a single point at each pixel.
for (float x = -10; x < 10; x = x + 0.001) {
  float y = x * x;
  // map x and y to screen coordinates
  float screenX = map(x, -10, 10, 0, width);
  float screenY = map(y, 0, 100, height, 0);
  point(screenX, screenY);
}

Reading

Chapters 6 and 7 in Getting Started with Processing.

Homework

Due Wed., Feb. 16. We’ll go over nested loops next class, which you might need for the last problem.

First part

For the first part, translate each of the statements into code. Assume everything in fixed-width text is the name of a variable.

Example: if the value of balance is below 100, add 50 to balance. Otherwise, subtract 20 from balance. Answer:

        if (balance < 100) {
          balance = balance + 50;
        } else {
          balance = balance - 20;
        }
  1. If the value of balance1 is greater than the value of balance2, then transfer 20 from balance1 to balance2 (meaning subtract 20 from balance1 and add 20 to balance2).
  2. If the value of balance1 is greater than the value of balance2 and balance1 is at least 20, then transfer 20 from balance1 to balance2 (meaning subtract 20 from balance1 and add 20 to balance2).
  3. If the value of balance1 is greater than the value of balance2 and balance1 is at least 20, then transfer 20 from balance1 to balance2. If balance1 is greater than balance2, but balance1 is below 20, transfer the full value of balance1 to balance2.
  4. If time is greater than 23, set sleeping to true. Otherwise, set sleeping to false.
  5. If time is greater than 23 or less than 7, set sleeping to true.
    Otherwise, set sleeping to false.
  6. Add 3 to time (which represents the current time on a 24-hour scale), and check to make sure that the new time value still lies in the range [0, 24). If not, correct the value to make it lie in the correct range. For example, if time is initially 23, adding 3 gives 26, which corresponds to 2 after wrapping around.
  7. Add extraHours (hours) to time, wrapping around to keep time within [0,24) as in the previous problem. If extraHours causes time to wrap around, add an appropriate value to the variable days that keeps track of the number of days that have passed. For example, given the values in the previous problem, you would add 1 to days.

Second part

  1. Write a Processing program that repeatedly draws random lines across the screen.
    Change the color and width randomly each time a new line is drawn. Optional:

    • Every time you hit a key, change the way that the random line is chosen. Examples: all lines are horizontal, but at random heights; all lines pass through the current mouse location (but go in random directions); all lines lie within a given circle or square

  2. Write a Processing program that implements the following game: when starting the program, a circle is drawn in a random location. When you click on the circle, it disappears, and a new circle is drawn in another random location. The game lasts until you click 10 circles, and your final score is the time it took you to finish. Optional: display the elapsed time; have the circles move around; have the circles move around in a way that tries to avoid the mouse pointer; get creative with the type of target you’re using. The millis() function is useful for measuring elapsed time.

  3. Write a Processing program that draws a checkerboard pattern. Define constants ROWS and COLS to determine the number of rows and columns of squares. Make sure that your program still works if you change the number of rows and columns. Optional: draw a circle in a square (like you’re placing a checker piece) when you click on it.

Hints