Assignment 06

Reading.

Read this chapter from the Processing “Handbook” (Blue book, pp. 182-185): http://cmuems.com/2011/resources/making-functions.pdf. In particular, study the “eye()” function. This function draws a cartoon eyeball in a requested location. Another good example is the “drawX()” function, also discussed in this chapter, which takes a variety of control parameters.

A Homemade “Rubberstamp” Function

For Assignments 6a, 6b, and 6c: Design a graphical totem/emblem/figure. It could be a character, person, car, etcetera. Let’s call this your “rubberstamp”. Then implement the following function, which draws the totem (rubberstamp) at the location specified by the arguments, px,py. Your function should also accept at least one parametric “knob” (called controlParam) that modulates the appearance of the stamp somehow (perhaps its color, size, number of gills, etcetera). Give your control parameter a good name. Here’s a starting point:

void placeRubberStamp (float px, float py, float controlParam){ 
   // what goes here? 
}

Project 06a. Rubberstamp I.

Call your function three times, to produce a composition with three of your rubberstamps. Upload your project to the OpenProcessing classroom.

Project 06b. Rubberstamp II.

Use two for() loops, to create a function in which your rubberstamp is placed in a grid. Add some random variation using your control parameter(s). Upload your project to our OpenProcessing classroom.

Project 06c. Rubberstamp III.

In an interactive program with no background() call, create an interaction in which your rubberstamp is placed wherever the user clicks. Use your rubberstamp function to allow the user to place copies of your emblem around the canvas by clicking the mouse. Upload your project to our OpenProcessing classroom.

  • Extra Credit. Use an array (which we haven’t yet covered in class) to store the locations of the user’s mouse clicks, and place the stamps on those locations. Prove that you’re using this solution by (for example) animating the color of the background.

Project 06d. Timers: A (timed) “fuse” and some “fireworks”.
Make a fuse onscreen that takes exactly 5 seconds to complete its timer. At the end of the timed 5 seconds, trigger an interesting event — like, you know, fireworks. Does it have to be a “fuse”? No, it could be a progress bar, or an ice cube melting, or a balloon inflating, or something. Does it have to be fireworks? No, it could be a gun showing the word ‘Bang’, or a balloon popping, or a volcano erupting, etcetera. Upload your project to our OpenProcessing classroom.

  • Extra Credit. Use an array (which we haven’t yet covered in class) to create a group of objects whose movements are triggered by the event. For example, particles in a fireworks display.

Project 06e. A Clock.

Make a “visual clock”. It is not essential that the time of day be literally readable from it, but your clock should appear different at all times of the day, and it should repeat its appearance every 24 hours. (You can make a 12-hour clock if you prefer). If you do decide to make the time literally readable (e.g. by counting graphic elements, visualizing numeric bit patterns, etc.), you are not permitted to use conventional Roman/Arabic/Chinese etc. numerals.

Try to devise a novel graphic concept, e.g. not just a clock face with/without numbers! Feel free to experiment with any of the graphical tools at your disposal, including color, shape, etc. Reactivity to the cursor is optional. You’ll need to use millis(), second(), etc. (but you’re also welcome to use day(), month() for a calendar-sensitive clock!).

This assignment allows the widest possible range of creative responses; this assignment is intended to push all of your skills as both a software engineer and artist/designer. Expectations for advanced students are therefore higher. Also: remember to SKETCH FIRST! Then… Upload your project to our OpenProcessing classroom.

And here’s some code to get you started, so that you can access the current time:

int prevSec;
int millisRolloverTime;

void setup(){
  size(300,55);
  millisRolloverTime = 0;
}

void draw(){
  background(255);
  fill(0);

  // Fetch the current time
  int H = hour();
  int M = minute();
  int S = second();

  // Reckon the current millisecond, 
  // particularly if the second has rolled over.
  // Note that this is more correct than using millis()%1000;
  if (prevSec != S){
    millisRolloverTime = millis();
  } 
  prevSec = S;
  int mils = millis() - millisRolloverTime;

  // Format strings so that single-digit numbers
  // are written with a pre-pended zero, etcetera.
  String HouStr = "" + (H%12); 
  String MinStr = nf(M, 2); 
  String SecStr = nf(S, 2);
  String MilStr = nf(mils, 3); 
  String meridian = (H>12) ? "pm" : "am";

  String theTimeString = HouStr + ":" + MinStr + ":" + SecStr + "." + MilStr + " " + meridian;

  textAlign(CENTER);
  text(theTimeString, width/2,34);
}
Posted in