Abstract PaintingGenerative Art

Using Generative Art to Inform Hard Edge Abstract Paintings (with p5.js code snippet)

Generative Inspired Hard Edge Abstract Triangle Painting

I like using Generative art to iterate quickly. I don’t always know how colors and shapes will look together and through the use of randomness with a predefined palette I can quickly see how colors and themes feel. Changing out colors is as simple as refreshing the random number generator and that allows us to see hundreds of variations on a theme in minutes. 

Iteration and idea generation are great, but I feel like generative art that lives in a computer is lonely.  It wants to come into the world and it does that by becoming real (physical).  At work, I told one of the interns that the real reason computers were invented was to make art.  Sure, it might not be “the” original reason, but it’s the unexpected outcome.  Knowing that, we have something of a moral imperative to help generative art manifest itself in the world.  

Making Generative Art Real

There are a number of ways to make generative art real:  pen plots, prints, CNC, 3D Printing, or using the ideas as inspiration for hand made art.  Hand made art is wide ranging and it could be sculpture, painting, drawing, etc.  This post is about using generative art to inform hard edge abstract paintings.

Generative art can inform many types of paintings, but hard edge abstract painting is one of the simplest places to start.  Hard edge painting is approachable because you just need some paint, blue tape, brushes, and a painting surface.

When I started painting, I painted triangles. Triangles led to more triangles and I just kept going. Lately I’ve been painting some orderly triangles like the image below and realized that I could write a generative script to see different color variations.  I can then take those variations and use them as inspiration for other paintings.

Generative Inspired Hard Edge Abstract Triangle Painting
This is a small 5.5″ square hard edge abstract triangle painting on birch plywood.

 

Generative Inspired Hard Edge Abstract Triangle Painting
Side view of the hard edge abstract triangle painting.

p5.js Code

Let’s take a look at some of the p5.js code to iterate and create variations of the image above.  To start, we need nested loops to roll through the grid and create squares.  After that, we’ll draw triangles in the grid and randomly choose colors from a predefined palette.  Here’s the script.  You can check it out or scroll past it to keep reading this post.

//orderly hard edge iteration tool
//use for pixel paintings and triangle paintings

var colors = [
    [111, 191, 183],
    [242, 198, 65],
    [242, 149, 68],
    [242, 102, 102],
    [3, 101, 140],
    [80, 191, 191]
];

var tw = 70;
var th = 70;

function setup() {
  createCanvas(700, 700);
  noLoop();
}

function draw() {
  
//   strokeWeight(1);
  noStroke();
  for (var x = 0; x < width; x+=tw) {
    for (var y = 0; y < height; y+=th) {

    
      /* logic for squares - pixel images */
      //drawSquare(x, y, tw, th);

      /* logic for two triangles per box */
      let rando = random();
      console.log(rando);
      drawTriangles(x, y, rando);

    }
  }
}

function drawSquare(x, y, w, h) {
    if (random() < 0.8) {
        fill(colors[parseInt(random()*colors.length)]);
        rect(x, y, w, h);
      } else {
          fill(100);
          rect(x, y, w, h);
      }
}

//for splitting squares into two trianges
function drawTriangles(x, y, dir){
    //dir > .5 draws line ul to lr
    //dir < .5 draws line lr to ur
    
    //define triangle points
    let ulx = x;
    let uly = y;
    let llx = x;
    let lly = y + th;
    let urx = x + tw; 
    let ury = y;
    let lrx = x + tw;
    let lry = y + th;
    
    //draw triangles by dir
    if (dir > .5) {
      fill(getColor());
      triangle(ulx, uly, llx, lly, urx, ury);
      fill(getColor());
      triangle(llx, lly, urx, ury, lrx, lry);
    } else if (dir <= .5) {
      fill(getColor());
      triangle(ulx, uly, llx, lly, lrx, lry);
      fill(getColor());
      triangle(ulx, uly, urx, ury, lrx, lry);
    }

}

function getColor() {
  // grab a fil color
  let col;
  
  if (random() < 0.8) {
    col = colors[parseInt(random(colors.length))];
  } else {
    col = 100;
  }
  stroke(col);
  return col;
}

Variation 1

A simple variation of the script above is swapping out the colors for different colors.  I can’t remember where I heard about it, but this adobe site is my preferred source for color palettes.  The images below show a couple different color palettes.

Generative Art Random Fill Color Triangles in p5.js

Generative Art Random Fill Color Triangles in p5.js

Variation 2

We can also change the triangles so that they don’t always draw in the same direction.  Changing the direction randomly changes the way the triangles line up.  It’s a little like 10 print.  

Abstract Generative Art Triangles p5.js

Abstract Generative Art Triangles p5.js

Variation 3

A few famous painters, notably Gerhard Richter (4096 Colors) and Ellsworth Kelly (Spectrum Colors Arranged By Chance), painted pixelated similar to the one shown below.  This script above can be modified to draw squares rather than triangles similar to the ones shown below.

Generative Art Random Pixelated Color Rectangles p5.js

 

What else?

In addition to the triangle paintings above, I’m planning to start working on a larger 2′ square hard edge painting similar to the pixelated rectangles above.  I have a few variations and ideas to explore.  More to come . . .

Thanks for reading!  Want to know what’s next?

Sign up for the email list below to get regular updates about new projects and posts!

 

 

0 0 vote
Article Rating

Leave a Reply

0 Comments
Inline Feedbacks
View all comments