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;
}
- If the value of
balance1
is greater than the value ofbalance2
, then transfer 20 frombalance1
tobalance2
(meaning subtract 20 frombalance1
and add 20 tobalance2
). - If the value of
balance1
is greater than the value ofbalance2
andbalance1
is at least 20, then transfer 20 frombalance1
tobalance2
(meaning subtract 20 frombalance1
and add 20 tobalance2
). - If the value of
balance1
is greater than the value ofbalance2
andbalance1
is at least 20, then transfer 20 frombalance1
tobalance2
. Ifbalance1
is greater thanbalance2
, butbalance1
is below 20, transfer the full value ofbalance1
tobalance2
. - If
time
is greater than 23, setsleeping
to true. Otherwise, setsleeping
to false. - If
time
is greater than 23 or less than 7, setsleeping
to true.
Otherwise, setsleeping
to false. - Add 3 to
time
(which represents the current time on a 24-hour scale), and check to make sure that the newtime
value still lies in the range [0, 24). If not, correct the value to make it lie in the correct range. For example, iftime
is initially 23, adding 3 gives 26, which corresponds to 2 after wrapping around. - Add
extraHours
(hours) totime
, wrapping around to keeptime
within [0,24) as in the previous problem. IfextraHours
causestime
to wrap around, add an appropriate value to the variabledays
that keeps track of the number of days that have passed. For example, given the values in the previous problem, you would add 1 todays
.
Second part
-
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
-
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. -
Write a Processing program that draws a checkerboard pattern. Define constants
ROWS
andCOLS
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.