Polygons Distribution with loops

Processing Coding Questions
6

Let’s save the coordinates of a little square:

float[] coords = new float[] {
  -10, -10, // x1, y1
   10, -10, // x2, y2
   10,  10, // x3, y2
  -10,  10  // y4, y4
};

Think of it like a metal mold or template for pouring a little rubber stamp. We can make the stamp and use it all at once by passing the coordinates to beginShape() or beginShape(QUADS). Here is a stamp method to do that:

void stamp(float[] coords) {
  beginShape();
  for(int i=0; i<coords.length; i+=2) { // read two numbers each time (x, y)
    vertex(coords[i], coords[i+1]); // draw the next point (x, y)
  }
  endShape(CLOSE);
}

So now we can draw our stamp anywhere with translate:

void draw() {
  translate(width/2, height/2);
  stamp(coords);
}

This will always draw our stamp in the middle of the screen. But we want to move the stamp randomly – like moving our arm random before stamping. We can translate randomly:

void draw() {
  translate(random(width), random(height));
  stamp(coords);
}

Now how to make the stamp shape wiggle from a square into various quads, a different one each time? Rather than randomizing each point on the stamp across the whole sketch canvas, instead make each stamp point move only as much as you want relative to the rest of the stamp.

For our example below which draws 20x20 squares, where should you add random numbers to change the stamp points, and how much randomness should you add?

float[] coords = new float[] {
  -10, -10, // x1, y1
   10, -10, // x2, y2
   10,  10, // x3, y2
  -10,  10  // y4, y4
};

void draw() {
  translate(random(width), random(height)); // move before drawing each stamp
  stamp(coords); // draw the stamp
}

// draw one stamp
void stamp(float[] coords) {
  beginShape();
  for(int i=0; i<coords.length; i+=2) { // read two numbers each time (x, y)
    vertex(coords[i], coords[i+1]); // draw the next point (x, y)
  }
  endShape(CLOSE);
}
2 Likes