Jackson Pollack was a painter during the abstract expressionist movement known for his paint drip paintings. He would splash paint onto a surface using the force of his entire body and painted from every angle. Due to him using his body to propel the paint, this combined with the use of colors create strongly emotional paintings where every drop of paint has deep emotion and meaning behind it.
As someone who enjoys abstract art, Pollack was one of the first abstract artists I was exposed to. His paintings hold special meaning to me due to this. When thinking of a generative art piece to create, I knew I wanted to do something more abstract, and I felt that using layers of randomly generated lines to emulate a Pollack painting would be a really interesting idea. My code randomly generates layers of lines and blobs that are place on top of another. The colors are semi random, some are lighter/darker shades of a randomly chosen color, while others are simply black or white. Shown below are some of the pictures that were generated, along with a pen-plotted image time-lapse video.
Video: https://drive.google.com/file/d/1zT2N_VmV7RY4kdVUCM4nddNGrpFSZkek/view?usp=sharing
There was much trouble using the pen plotter. First, since the lines are individual segments, it was really difficult to modify the layers of the SVG file. This is one of the reasons why I changed the line algorithm which will be explained later. Once this was fixed, I was now worried about how long the plotter would take to finish, and the fact that I had to constantly change the color of the pen to emulate the different colors. The colors did not necessarily work as I wanted, as the black would often drown out the other colors, making the colors look less layered. There was also a limitation regarding the thickness of the pens, which meant I could not really show the extremely varying widths of the lines on the plotter. I had made a separate program specifically to make my program work with the plotter, which can be seen here. Finally, I had issues relating to the plotter, which would malfunction at times and jerk downwards, messing up the home position. This meant it occasionally would draw outside the paper, and I would have to pause and reset the positioning often to make the plotter work again. While it is not perfect, it came out nice enough for what I wanted.
Sketch:
The code features an algorithm that will generate lines and blobs layer-by-layer. It first chooses a random color for the first layer. From there, it has a 65% to make the current color slightly lighter or darker. The other 35% chance has a 50% chance to choose a new color, or a 50% chance to choose white or black. The final two layers will always be white then black, respectively. The reason I chose to make the colors sometimes black or white is because I felt like using those colors more made the paintings have a more similar color scheme to Pollack’s. I also found it more aesthetically pleasing to look at, which is also why I did this. The reason for having a bias towards hues was because it also makes the piece more aesthetically pleasing to look at, since having only randomized colors created ugly and less coherent paintings.
The lines of the painting are generated in small segments. Each point will rotate slightly over sin for x and cos for y in a random direction, making the lines sort of snake around the canvas. When they are too far out of bounds, the lines will change course to ensure it remains visible. The newly created point is then connected to the previous point. There is a low chance for the algorithm to also randomly end the line and choose a new random starting place, so that it’s not all just one line. The line will also vary in its thickness from point to point, and new lines will have a more varying thickness. Once the lines of one layer have finished, it will then generate a random amount of paint blobs in the same color. These are made similarly, except that the points will move in a circular way so that it creates an irregularly shaped circle. Once this is finished, the code will start the next layer and repeat this until it finishes. At any time you can press a button labeled “Generate” to clear the canvas and start a new painting.
I am particularly proud of the Drawer object, the one that makes the lines. I based it off of this reference here, and then modified it to make it an object that I could call instead. I also slightly changed the way it draws, because the reference code uses line() instead of curveVertex(). The reason I changed this was because I found that using lines made the program really slow and it made it difficult to generate a lot of layers, which I wanted. When I changed to curveVertex(), the program worked much faster and was actually able to complete the painting relatively quickly. The code for the drawer object can be seen here:
class Drawer {
//drawer class, this draws all the lines
constructor() {
this.seg = 0;
this.swScale = 0; //line width multiplier
this.sw = width * random(0.0002, 0.005); //choose random line width
this.angVary = PI * 0.02; //how much the line varies its path
this.lineLength = height * 0.001; //length of each segment
this.x = 0;
this.y = 0;
this.setXY(); //choose random starting position
}
setXY() {
//choose random starting point, angle, and line width
this.x = round(random(width * 0.1, width - width * 0.1));
this.y = round(random(height * 0.1, height - height * 0.1));
this.ang = random(PI * 2);
if (random(2) < 1) {
//randomly vary the angle a bit more
this.ang = PI * 0.25;
} else {
this.ang = PI * 0.75;
}
this.sw = width * random(0.0002, 0.005); //set width
}
makeLines(seg, swScale) {
//line drawer. creates a small segment that will connect and form a line. once in a while, end the line and start randomly in a new place
this.seg = seg;
this.swScale = swScale;
beginShape();
for (let i = 0; i < this.seg; i++) {
this.ang = this.ang + random(-this.angVary, this.angVary); //randomly choose a direction for the line to go
this.x = this.lineLength * sin(this.ang) + this.x; //add angle to xy coords
this.y = this.lineLength * cos(this.ang) + this.y;
if (
width * 0.1 * sin(this.ang) + this.x > width + width * 0.05 ||
width * 0.1 * sin(this.ang) + this.x < 0 - width * 0.05 ||
height * 0.1 * cos(this.ang) + this.y > height + height * 0.05 ||
height * 0.1 * cos(this.ang) + this.y < 0 - height * 0.05
) {
//if the next segment will go too far out of bounds, have it turn so it doesnt do that
this.ang += 0.2;
}
this.sw += width * random(-0.00005, 0.00005); //make the line width get slightly smaller/larger for each segment
this.sw = constrain(this.sw, width * 0.0001, width * 0.009); //make sure its not too big or small
strokeWeight(this.sw * this.swScale); //apply line width and scaling
curveVertex(this.x, this.y); //connect the new point to the previous one
if (random(1000) < 1) {
//once in a while, stop the line and start a new one
this.setXY();
endShape();
beginShape();
}
}
endShape();
this.reset();
}
reset() {
//reset the position
this.setXY();
}
}
Trying to understand this code and optimize it was definitely the most difficult part. It took much trial and error and tinkering with numbers to make the program work in a way that I liked it. This and making the colors look aesthetically pleasing were the two hardest parts for me. It took a lot of trial and error with the coloring to make sure it looked nice.
Some parts I would try to improve is make the code show itself drawing out the lines. I had this originally, but the program would slow down too much and would never be able to finish a painting because of the speed. Also, when using curveVertex(), the entire shape is made at once meaning it’s impossible to show this anyway. I would have to go back to using line(), which is really slow and inefficient. I also would want to add more user interaction, adding ways to modify parts of the paintings like how many layers, color schemes, or how many lines or blobs are drawn. I was having a lot of trouble adding these, so I decided against adding them, so all that’s left is the generate button. One last problem I have is that the lines seem to draw more towards the right, meaning sometimes the left side will have more empty space. I wasn’t sure at all how to fix this issue. These would be the things I would try to add for future iterations of the program.