Generative Art - Assignment two

Due: 2014-01-08 10:30a

Objectives

[15 points] Simple symmetry

Symmetry is one of our basic generative arts tools. For this exercise, we are going to use a combination of mouse input and symmetry to create something like this:

Symmetry Image

The ingredients for this are fairly simple. Start by setting up your sketch for the frame loop, with the setup() and draw() functions. We want to leave a trace behind, so put a call to background() in the setup() function rather than in the draw() function. Set the fill to be something that is fairly transparent (experiment to get something you are happy with). My canvas is 600x600, but you are welcome to use other sizes.

You are going to draw four squares. One of these will be centered on the mouse. If you use the rectMode(CENTER) command, Processing will use the (x,y) coordinates to define the center of the rectangle rather than the upper left hand corner. You can get the mouse coordinates using the mouseX and mouseY variables. For the first step, add this rect and make sure it is following your mouse around.

Once you have this working, draw a second rectangle. This rectangle should be the horizontal mirror image of your rectangle. As you drag your first rectangle to the right, the second rectangle should move left. Use the width variable to calculate the position of this second rectangle.

Here is an example after I dragged the mouse in towards the middle from the left.

Two squares

Once you have this working, add a third rect that is the vertical mirror image of the first square. You can use the height variable to calculate the position of this new rectangle. Finally, add the fourth rectangle, which is the mirror in both the vertical and the horizontal (alternately, you can think of this as the vertical mirror of the second rectangle or the horizontal mirror of the third). You should now have four rectangles, and if you drag the mouse towards the center of the canvas, they should all converge.

The final step is to adjust the size of the rectangle based on the position of the mouse. I used the Y coordinate of the mouse and divided it by four (to get a smaller rectangle).

Draw me a picture

I want you to play with your sketch a bit and draw something interesting. I expect at least one image to be turned in with your sketch. In order to capture your work, add this code to the bottom of your sketch after everything:

void keyReleased(){

  switch(key){
   case 's':
    saveFrame("username_hw2a-####.png");
    break;
  }
}  

This code detects keyboard events (i.e., when you type a key). If you type the ‘s’ key, this will save the current frame in the directory with your .pde file. The file will be called username_hw2a-####.png, where #### is replaced by the current frame (each time Processing runs your draw() function is one frame). Please change the username part to be your username, but leave the rest of the name alone. You do not need to understand how this code works - if you want to treat it as the magic invocation that saves your image when you type ‘s’, that is just fine.

Naming your sketch

When you save the sketch, I would like you to name the sketch using this pattern: username_hw2a. The username is the part of your Middlebury email address that comes before the @. So, my submission would be called candrews_hw2a.

Documentation

You should include the documentation block below at the top of your sketch.

/**
Assignment two

A description of the sketch.

Your name
The date
**/

Turning in your work

I would like this code turned in in the DROPBOX on MiddFiles. You can refer to the reference on the LIS wiki to help you connect to the file server.