Some Algorithmic Art

When I’m too tired to do anything else useful, but not quite tired enough to sleep, I sometimes open up an image editing program like GIMP, load up some kind of geometric image, and then smash it to death with filters and other transformations until it either looks more interesting/appealing or so hideous that I give up. Recently I ended up turning the left image below into the one on the right through such a process:

For some reason after that, I suddenly felt that one of these wasn’t enough. I needed infinitely many crunchy looking images like the one on the right. So, I decided to try implementing the GIMP transforms I’d used in Processing and then automating the process. I didn’t get 100% the same effect as I achieved in GIMP but I’m sufficiently satisfied with the endless series of things I did get, which have this kind of look to them:

The code is available here:

Here’s a web version that, although not quite as detailed, lets you generate something similar. It starts with jittery rectangles dancing around on the screen, leaving trails. To stop it and render to something like the above, click on the canvas. Be patient!!! It’s a very intensive process and some browsers are horribly slow about it. Up to 10sec of rendering time doesn’t seem unusual for this in a browser. Sometimes it takes closer to 20sec on the first try and then it works faster thereafter. You can start over to build a fresh image with another click.

And the code for the web version, which unfortunately keeps showing up as an unformatted mess here.

Some Algorithmic Art (Web Version)
Donya Quick
December 2017

Turn the image created by jittery squares into an interesting eroded,
fractal-looking thing. Caution: the rendering into that interesting
image can take a while! Expect a pause for a few seconds, particularly
if you set the canvas size to be large.

How to use:
1. Run it and let the squares fill the space a bit.
2. Click to stop and render a cool image. Be patient!
3. Click again to start over and go back to step 1.

Rectangle[] shapes = new Rectangle[80];
int jitterDist = 10; // for use with oilify function
boolean keepDrawing = true; // flag to detect when to render

// for the edge e
float[][] kernel = {{ -1, -1, -1},
{ -1, 9.2, -1},
{ -1, -1, -1}};

void setup() {
size(500,500); // better to keep it a square or close to it

void draw() {
if (keepDrawing) {
for (int i =0; i

Jittery rectangle class in shades of blue
Donya Quick

class Rectangle {

float factor = 1.5; // use this to tweak shape size quickly on different canvas

// Blue must always be a higher value
float lightness = random(0,255);
float blue = random(lightness+50,lightness+100);

// Other shape settings
float minCurvature = 5;
float maxCurvature = 50;
float curvature = random(minCurvature,maxCurvature);
float x = 0;
float y = 0;
float minSize = 100;
float maxSize = 150;
float w = 50;
float h = 50;
boolean decay = false;
float opacity = 255;

Rectangle() {
// place the shape randomly on initialization
x = random(0,width);
y = random(0,height);

// in case the screen was a different size we'll redo the shape dimensions
minSize = width/15;
maxSize = width/10;
w = random(minSize,maxSize);
h = random(minSize,maxSize);

void display() {
if (w > 0 && h > 0) {
float a = max(0,min(lightness-100, 255));
float b = max(0,min(blue-50, 255));
fill(lightness, lightness, blue, opacity);
rect(x,y,w*factor,h*factor, curvature);

void update() {
// change color slightly
lightness = max(0,min(lightness+random(-4,4),255));
blue = max(lightness+50,min(blue+random(-4,4),lightness+100));
blue = max(0, min(blue,255));

// slightly change shape curvature, size, and location
curvature = max(minCurvature,min(lightness+random(-5,5),maxCurvature));
w = max(minSize,min(w + random(-4,4),maxSize));
h = max(minSize,min(h + random(-4,4),maxSize));
x = max(0,min(x + random(-5,5),width));
y = max(0,min(y + random(-5,5),height));

Leave a Reply

Your email address will not be published. Required fields are marked *