Professor Casey Reas, TA Markus Bonauer

  Index
  Schedule
Exercises
  Syllabus
A Introduction   Solutions
B Motion   Solutions
C Input   Solutions
D Drawing   Solutions
E Image   Solutions
F Typography   Solutions
G Multiples   Solutions
H GUI   Solutions
I Refinement   Solutions


Notes:
Before touching the keyboard, always sketch ideas on paper first
Work quickly and iteratively
Write a few lines at a time and continuously test the result



Introduction - Crit 06/10

All exercises must be 200x200 pixels and grayscale. They must all be uploaded and named correctly ("A00", "A01", etc.) within your folder in the "web/projects" directory in the class directory. Upload the entire sketch directory, including the subdirectory for "data" and "applet". Make tests before the weekend to ensure your success. Remember to "export" your work before placing on the server. Place a 100x100 pixel JPG image representing yourself in the "images" directory within the "web/projects/images" directory. Name the image your first name (as it appears on the website), with the first letter capitalized. For example, "Casey.jpg" (without the quotations).

A00 Draw three lines.
A01 Draw five lines.
A02 Draw three ellipses.
   
A03 Control the position of two lines with one variable.
A04 Control the position and size of two lines with two variables.
A05 Control the properties of two shapes with two variables.
   
A06 Redo Exercise A04 using mouseX and mouseY as the variables.
A07 Draw two visual elements that each move in relation to the mouse in a different way.
A08 Draw three visual elements that each move in relation to the mouse in a different way.
 
A09 Create a simple, regular pattern with six lines.
A10 Program your pattern from Exercise A09 using while().
A11 Draw a layered form with two new loops.
   
A12 Move a visual element across the screen. When it disappears off the edge, move it back into the frame.
A13 Draw a visual element that moves in relation to the mouse, but with a different relation when the mouse is pressed.
A14 Using if() and else(), make the mouse perform different actions when in different parts of the window.




Top

Motion
- Crit 13/10

Develop a 400x400 pixel dynamic form/composition/landscape/ecosystem/organism (pick one) which transitions from violent to peaceful as the mouse moves from left to right across the display window. The image should be at its maximum fierceness when mouseX == 0 and its maximum calm with mouseX == 400. Modify a subset of the visual variables (shape, size, color, texture, orientation) in addition to variables of motion (velocity, rhythm, direction) to communicate your idea. The image must always be in continuous motion and the qualities of the movement and visual form will change with the horizontal movement of the mouse (use the mouseX variable as the only external input). Be prepared to show sketches of at least ten concepts in class Wednesday, 8 October. The exercise must be uploaded to the course database and working through the website by the beginning of the critique. Log in to the class website here.

Use the following program as the basis of your work:

// Template for Exercise B
// Basic template displaying the position of the
// cursor on the lower border of the window

float mx = 0.0;

void setup() 
{
  size(400, 400);
  cursor(CROSS);
}

void loop() 
{
  background(204);

  // Set the location of marker
  float dif = mouseX - mx;
  if(abs(dif) > 1.0) {
    mx = mx + dif/8.0;
  }
  // Keep the marker on the screen
  mx = constrain(mx, 1, width-1);
  noStroke();
  // Draw bottom rectangle
  fill(255);
  rect(0, height-5, width, 5);
  // Draw bottom positional marker
  fill(204, 102, 0);
  rect(mx-2, height-5, 4, 5);
}




Top

Input
- Crit 20/10

Develop a 400x400 pixel event/game which lasts 10 seconds. Begin with a screen explaining the event/game. Click the screen to begin. At the end of 10 seconds, display a status screen and give the player the option to experience the event/game again. The event/game must respond to data from the mouse or keyboard, but not both.

I've provided a template (below) to use as a starting point, but you are free to write your own template following the sequence stated above. A goal of this exercise is to use the keyboard or mouse in an unexpected way. Write a short statement (5-10 sentences) about the concept and execution of your work as a comment at the top of the code.

Be prepared to show sketches of at least five strong concepts in class Wednesday, 15 October. The exercise must be uploaded to the course database and working through the website by the beginning of the critique. Log in to the class website here.

Get the sketch template
Get image 1 (Must go in the sketches "data" directory)
Get image 2 (Must go in the sketches "data" directory)




Top

Drawing
- Crit 27/10

Develop a 400x400 pixel mouse-based drawing machine. Restrict yourself to one continuous mode (do not create a GUI or use the keyboard to switch parameters) and do not use color. Save three drawings and display each with the "1", "2", and "3" keys. Pressing the spacebar should clear the screen.

Write a short statement (5-10 sentences) about the concept and execution of your work as a comment at the top of the code.

Be prepared to show sketches of at least five strong concepts in class Wednesday, 22 October. The exercise must be uploaded to the course database and working through the website by the beginning of the critique. Log in to the class website here.



Top

Image
- Crit 03/11

Develop a 400 x 400 pixel kinetic and responsive experience from a static image. The image should reveal itself in a way which enhances your ideas about the content of the image. You are encouraged to manually and programatically disect and alter the image to convey your message. As always, the exercise will be evaluated for its quality and originality of concept in addition to its execution.

Explain your intent and details of execution in a short statement (5-10 sentences) as a comment at the top of the code.

Be prepared to show sketches of at least five strong concepts in class Wednesday, 29 October. Each of these concepts should be derived from the same image. The exercise must be uploaded to the course database and working through the website by the beginning of the critique. Log in to the class website here.



Top

Typography
- Crit 10/11

Develop a 400 x 400 pixel interactive experience from a small piece of text (no more than 12 words). The interaction with the text should enhance your ideas about its content. Restrict the visual elements to letterforms and lines. Remember you have control over the size, color, kerning, and leading and you are not restricted to using pre-made fonts. As always, the exercise will be evaluated for its quality and originality of concept in addition to its execution.

Explain your intent and details of execution in a short statement (5-10 sentences) as a comment at the top of the code.

Select your text quickly and be prepared to show sketches for at least five strong concepts in class Wednesday, 05 November. Each of these concepts should be derived from the same image. The exercise must be uploaded to the course database and working through the website by the beginning of the critique. Log in to the class website here.



Top

Multiples
- Crit 17/11

This exercise is open for private exploration. The only constraints are the size (400 x 400 pixels) and that it must use at least 20 instances of one object of your own creation. As always, the exercise will be evaluated for its quality and originality of concept in addition to its execution.

Explain your intent and details of execution in a short statement (5-10 sentences) as a comment at the top of the code.

Be prepared to show sketches for at least five strong concepts in class Wednesday, 12 November. The exercise must be uploaded to the course database and working through the website by the beginning of the critique. Log in to the class website here.



Top

GUI
- Crit 24/11

Develop a 400 x 400 pixel interface for linking to the previous work from the quarter. Integrate typography, image, and either key or mouse input. Use the link() function to open your previous exercises. As always, the exercise will be evaluated for its quality and originality of concept in addition to its execution.

Explain your intent and details of execution in a short statement (5-10 sentences) as a comment at the top of the code.

Be prepared to show sketches for at least five strong concepts in class Wednesday, 19 November. The exercise must be uploaded to the course database and working through the website by the beginning of the critique. Log in to the class website here.



Top

Refinement
- Crit Crit 26/11 & 01/12

During the quarter you have completed seven one-week exercises. Spend the last week of the quarter refining one exercise.

You are no longer confined to the 400x400 pixel format. If you do not retain the 400x400 pixel format, you must upload the code to the server as well as an autonomous slide show demonstrating the work. The slideshow can be written in either Processing or Flash.

There will be a critique both 26 November and 01 December. The critique on 26 November will be a last opportunity to receive feedback from your classmates and professors before the final critique on 01 December. There may be some guest critics in the class on 01 December.

 
  http://www.proce55ing.net