Introduction

Creating Algorithmic Art Using Processing

Posted by

Robert Greiner on March 7th, 2010

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.

Creating Algorithmic Art Using Processing

Robert Greiner

Creating a Fluid Two-Column Layout With a Single Fixed Width Column

Sending Email in ASP .NET

Subscribe for free