Patterns with Processing

Posted by on Sep 29, 2014 in Art, Code | No Comments

Over the last year or so I have been experimenting on and off with Processing, the programing platform for designers and artists. You can see the full potential of Processing in a book I recommend called Generative Gestaltung. But Processing doesn’t have to be used to create interactive prototypes or generative art. It can also be used to generate complex 2D patterns. The programs that created the images below are relatively easy to understand but still produce remarkable results.

Nested “for” loops were used in different combinations to create the patterns below. These programs (called processing “sketches”) create a set of x and y coordinates and replicate a line, shape or a pattern down and to the right across the x and y axis. In the Fish Scales image below the magic happens here:


for (int x = 0; x<=width; x+=20) // loop of x
{
  for (int y=0; y<=height; y+=20) // loop of y
  {
     ...
     ellipse(x, y, 40, 40);
  }
  ...
  ellipse(x,y,40,40);
}

Above you will see “for” loops, one inside the other (with some extra code redacted). Basically a for loop sets a counter, tests for a condition, then iterates. The loop travels across the image, testing whether the sequence has have left the bottom or right edge of the image and adding new circles as it goes. I have linked the images of the Processing sketches to their authors (and code).

processing dot pattern Escher-like Processing Pattern Fish Scales Processing Pattern Plaid Processing Pattern Triangles Processing Pattern Truchet Processing Pattern Truchet Processing Pattern Truchet Processing Pattern Truchet Processing Pattern

Leave a Reply