Creating Algorithmic Art Using Processing

7 Mar 2010 — 1 min read

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);
	}
	}

view raw Processing.java hosted with ❤ by GitHub

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.

Please consider subscribing, it's free.

Technology

Robert Greiner
Twitter

Professional optimist. I write a weekly newsletter for humans at the intersection of business, technology, leadership, and career growth.

AI Rule #1 - Customer First

In 1985, Warren Buffett wisely said, "The first rule of investment is don't lose. And the second rule of investment is don't forget the first rule, and that's all the rules there are." Similarly, the first rule of AI investment is to