Interaction Lab 4 – Tristan’s Shapes

For this lab I couldn’t think of any original designs so I used a lot of random generation.  Essentially my program generates a random number of random sized shapes that have a random color.  It does so slowly enough for you to enjoy the process before seeing the final image.  Unfortunately it isn’t very interactive, but it involves all of the various components we were meant to use.  Here is the final code:

/* Lab 4 Goals
1. Use a Conditional
2. Use an Iteration
3. Use a Function
*/

/* I will be making a program that
will draw several random shapes with a
random number of sides each */

//Declare necessary variables
int i=1;
float x, y, sides, shapes, r, g, b;

void setup() {
//Create the environment
size(640, 480);
background(255);
frameRate(2);
noStroke();

//Find out how many shapes to make (once only)
shapes = random(5, 50);
}

void draw() {
//Track our progress
print(int(shapes));
print(” “);
println(i);

//Generate a random number of sides
sides = random(3, 9);

//Generate a random color
r = random(0, 255);
g = random(0, 255);
b = random(0, 255);

//Draw the shape with our own function
drawShape(sides, r, g, b);

if (i > shapes) {
//Break the loop when we have enough shapes
noLoop();
}

//Complete this iteration
i++;
}

//This custom function draws the shape using random vertices
void drawShape(float sides, float red, float green, float blue) {
//Color the shape
fill(red, green, blue);

//Start the shape
beginShape();

//Calculate various vertices (one for each side)
for (int j=0; j < sides; j++) {
x = random(-100, width+100); //Note: the shapes extend beyond the edge of
y = random(-100, height+100); //the screen to fill out the edges with color
vertex(x, y);
}

//Finish the shape
endShape();
}

Here’s an example of a final screen:

Some of the biggest challenges I ran into involved stopping the draw loop when it finished, and deciding where to put the shapes.

For the looping problem, essentially the draw() program would continue on to the next loop and keep drawing more shapes even when the random limit was reached.  This even occurred when the drawShape() function was called from within an if(i<shapes) condition, which I don’t quite understand.  To prevent this, I had to use a variable ‘i’ to keep track of how many shapes had been drawn, and when the limit was reached the noLoop() function was called.

As for the shape placement, I was originally going to draw a few shapes in a line, like a display or gallery.  I did this by setting the x and y to random((i – 1)*(width/shapes) , i*(width/shapes)) [obviously height for y instead of width].  This essentially divides the screen by the number of shapes, then for each shape draws the vertices within that division.  (NOTE: ‘i’ had to be a global variable to do this, which I never changed).  However, with more shapes to draw each shape becomes much smaller, so I decided to change the code to what it is now.