Creating Algorithmic Art Using Processing

Written by Robert Greiner | posted in Programming | View Comments

Algorithmic Art – also known as Computational Art – is a form of expression that uses various algorithms and processing techniques to create visually aesthetic digital artwork in the form of still images, animations, and music.

Processing is an open source programming language and environment invented by Ben Fry and Casey Reyes from the MIT Media Lab that provides a way for anyone to create algorithmic art. Even you! Simply download Processing and follow one of the introductory tutorials to get started.
Here is a piece of algorithmic art I created by extending one of the 2D Array Processing tutorial.

This is the code used to create the animation below. Just copy and paste into your Processing editor and run to get the same output.

Square[][] grid;

int numCols = 10;
int numRows = 10;

//Called at the initialization of the program.
void setup() {
  size(300, 300);
  grid = new Square[numCols][numRows];
  for (int x = 0; x < numCols; x++) {
    for (int y = 0; y < numRows; y++) {
      grid[x][y] = new Square(x * 30, y * 30, 30, 30, (x + y) * cos(y));
    }
  }
}

//The draw method acts like the main method
public void draw() {
  background(255); // white
  for (int x = 0; x < numCols; x++) {
    for (int y = 0; y < numRows; y++) {
      grid[x][y].oscillate();
      grid[x][y].display();
    }
  }
}

//This class will handle the information about a square to be printed on the screen.
public class Square {
  private float x, y, w, h; // (x,y) width and height
  private float angle = 127; // brightness

  public Square(float xPos, float yPos, float boxWidth, float boxHeight,
  float sAngle) {
    this.x = xPos;
    this.y = yPos;
    this.w = boxWidth;
    this.h = boxHeight;
    this.angle = sAngle;
  }

  public void setPosition(float xPos, float yPos) {
    this.x = xPos;
    this.y = yPos;
  }

  public void oscillate() {
    angle += 0.1;
  }

  public void display() {
    stroke(255);
    fill(250 * sin(angle), 0, 0);
    rect(x, y, w, h);
  }
}

And here it is! My first piece of algorithmic art. Not much to it, but at least it does something moderately interesting.

Personally, I find algorithmic art very interesting. Simply because it takes something I’m comfortable with (programming) and fuses it with something I’m horrible at (art).
If you decide to try out Processing, be sure to send me a link to it. I’d love to check it out.

You can follow any responses to this entry through the RSS 2.0 feed.
You can leave a response, or trackback from your own site.