// this is an example of how i can create a 
// function to make my draw() loop look much simpler
// ie: instead of having 3 for loops in draw() - one for each shape
// i've put the instructions for drawing the shape in an easy-to-use
// function .. twister()
// - rob@rahji.com

void setup() {
  smooth();
  size(400,400);
  background(100);
  noFill();
  noLoop();
}

void draw() {
  background(100);
  stroke(255,0,0); //red
  twister(200,200,50,50);
  stroke(0,0,255); //blue  
  twister(100,150,80,50);
  stroke(#FF15B9); //pink  
  twister(200,200,90,10);

}

// below, i'm declaring my function...
// i use void because it doesn't actually RETURN anything
// and i specify each of the arguments that will be given
// when it's called in the draw() loop above

// this function makes a spirograph-looking shape
// hub specifies the spacing of the elements
// size is the size of the individual rectangles that make up the shape
void twister(int x, int y, int hub, int size) {
  for (int i=1; i<=36; i++) {
    // i'm using a for loop to create a repetitive spiro-shape
    pushMatrix();
    translate(x,y);
    rotate(radians(i*10));
    rect(hub,hub,size,size);
    popMatrix();
    // i've used pushMatrix() and popMatrix() because otherwise
    // the translate() function will act cumulatively.
    // try commenting out the two matrix-related lines and see
    // how the shape changes
  }
}