Generative ArtProjects

Cubic Disarray in p5.js

Cubic Disarray p5.js

George Nees was an early adopter of generative art and design.  Cubic Disarray is one of his better known works (per the Google).  It’s also a simple, yet satisfying, p5.js project.  This post walks through creating the basic version of Cubic Disarray, adds color, and shows a printed version of the image.

The Basics:

At a really simple level, Cubic Disarray is just a grid of squares.  Creating a square grid in p5 is simple using nested for loops as shown below.

function setup() {
  createCanvas(600, 800);
  background(255);
  noLoop();
}

function draw() {
  noFill();
  strokeWeight(2);

  var size = 50;  
  var across = 9;
  var down = 13;

  for (var x = 0; x < across; x++) {
    for (var y = 0; y < down; y++) {

      push();
      translate(x*size+size, y*size+size);
      rect(0, 0, size, size);
      pop();
    }
  }
}

With that, you get this:

Square Grid p5.js

The next step is applying randomness to the location as a multiple of the distance down the grid.  The full p5 code is shown below.

var multiplier = 0.77;

function setup() {
  createCanvas(600, 800);
  background(255);
  angleMode(DEGREES);
  noLoop();
}

function draw() {
  noFill();
  strokeWeight(2);

  var size = 50;
  var across = 9;
  var down = 13;
  var rotateMult = 3;

  for (var x = 0; x < across; x++) {
    for (var y = 0; y < down; y++) {

      //without plusMinus all the squares will rotate in one direction
      var plusMinus = random() > .5 ? 1 : -1;
      var rotateAmt = y * plusMinus * random() * rotateMult * multiplier;

      push();
      translate(x*size+size, y*size+size);
      rotate(rotateAmt);
      rect(0, 0, size, size);
      pop();
    }
  }
}

And with that, you’re there . . .

Cubic Disarray in p5.js

Oops Reel:

Along the way, I made a few “mistakes.”  These images were taken as I worked through the logic to create the image.  Sometimes the “mistakes” create some cool results as well.

Cubic Disarray Gone Bad
In this image, my randomness was a little out of whack and the image sort of blew up.
Cubic Disarray Oops
In this version I didn’t have enough randomness and the Cubes needed more disarray.

Variation #1, Color:

To add color, I chose a 5 color palette from the Adobe Color site.  Those colors were fed into an array.  From the array, we randomly select a color and fill the squares giving us a colorful version of Cubic Disarray.

Cubic Disarray in Color

Variation #2, Pen Plotting:

It only took me 15 hours to print Cubic Disarray using a pen plotter.  (That’s both a joke and the truth)  I have access to a Cameo Silhouette and the confounded tool likes to print on either side of the lines.  Basically, the machine cuts out images.

I spend a significant amount of time trying to trace the Center Line of my jpeg before finding a more native SVG solution.  We’ll probably talk about it in another post, but you want to draw SVG’s if you want to use a pen plotter to draw along the line.

Here’s a link to p5.SVG that will help.

This is the pen plot.

Cubic Disarray Pen Plot p5.js
Pen plot version of Cubic Disarray in a Bronze color.
Pen Plotter Cubic Disarray p5.js
Blue version of Cubic Disarray going through the pen plotter.

 

0 0 vote
Article Rating

Leave a Reply

0 Comments
Inline Feedbacks
View all comments