Patterns With Processing

Sketching With Loops, Colors, and Opacity

Over the weekend I did some more tinkering with generating patterns with Processing, the programming platform for designers and artists. The following were created using simple sets of coordinates identifying lines and shapes on a grid, which were then told to repeat at intervals. One instruction set contained another, or a “for loop” with another “for loop” inside it.

This is the code for one of them; it’s just a few lines. The ability to set opacity creates a lot of unexpected color combinations, like different threads woven at varying densities into a textile.

// large canvas
size(2000, 1400);
smooth();

// background color
background(20, 131, 34);

// line color, opacity and weight
stroke(255, 155);
strokeWeight(2);

Here’s where it gets a little more complex. Two “for” loops, one inside the other. Put simply, a for loop sets a counter, tests for a condition, then iterates. In practice, it’s simple enough: y (y axis value) and x (x axis value), are set to an initial count, then tested against a condition (whether they’re greater than the height or width of the canvas), and then told to iterate up by a number of pixels.

for (int y = -30; y <= height; y += 40) {
  for (int x = -30; x <= width; x += 50) {
  fill(255, 120);
  triangle(x, y, x-30, y+90, x+30, y+90);
  }
}

// lastly, burn the pattern to a jpeg
save("trianglepattern_1.jpg");

If you’re interested in these as screen wallpaper, there are full-sized jpegs in a zipped folder for download here.