Characters in yellow…in code
Rewinding to last week, we went through some more art history lesson and how it has progressed over the years. The focus on the subject has shifted and there’s a lot of abstraction now. We browsed through examples of famous art that had a sense of “randomness” to them. We explored more art where the artists had zero control.
We discussed in class on how we can achieve this through code and saw a few examples of those artwork created in code back in the 60s. We decided to create Paul Klee’s “Characters in yellow” in code.
First thing we did was identify patterns because even though the painting is “random”, we as humans seek patterns. We found out that there is fixed color palette and that there are more boxes vertically than there are horizontally (which is pretty obvious since the painting is a longer than wider) but this also helped us identify our loop limit.
We managed to create the boxes in class with what little time we had left but it wasn’t really looking good so I decided to work on it at home. I realized that we had set the loop counter to a specified value so I was always getting x number of boxes across and y number of boxes down which wasn’t what I wanted. I needed those to be random as well and I did that, changed my values for the x,y axis for the rectangles and the width and height and I was able to make it look nice.
Did something similar with my “characters”. I decided to put them in a loop and pull random values to try and get random curves across the canvas which worked pretty well at times and at times it looked not as good. I produced 10 different results and out of those 10, I liked 2 of them.
I liked both of these because there’s more “character”, I guess. These two just felt right to me and I think that’s more important in art.
The following is the code I wrote to get the results:
color[] palette = new color[8];
void setup() {
size(343, 600);
background(#f0bc5d);
palette[0] = #ebd16e;
palette[1] = #e5b465;
palette[2] = #ffe064;
palette[3] = #fbc044;
palette[4] = #f1e1a2;
palette[5] = #f2b333;
palette[6] = #f9db36;
palette[7] = #ea832d;
noStroke();
}void draw() {
int iCount = 7;
int jCount = 9;
for (int i=0; i<iCount; i++) {
iCount = (int) random(4, 8);
//print(iCount);
for (int j=0; j<jCount; j++) {
jCount = (int) random(7, 10);
color currentColor = palette[(int) random(0, 8)];
fill(currentColor);
float x = ((width/iCount)*i);
float y = ((height/jCount)*j);
float w = (int) random(width/iCount, width);
float h = (int) random(height/jCount, height);
rect(x, y, w, h);
}
}
//CURVES AND LINESnoFill();
stroke(#000000);
strokeWeight(5);
int increment = 40;
for (int y=increment; y<height; y+=increment) {
//horizontal lines
increment = (int) random(20, 40);
float randomX = random(1, 10);
float randomX2 = random (1, 80);
line(height/randomX, y, (height/randomX)+randomX2, y);
//vertical lines
float randomY = random(0, 2);
float randomY2 = random (10, 100);
line(y, (width/randomY)+randomY2, y, width/randomY);
}
for(int i=0;i<height;i+=51){
//curves
float C1x = random(i, width);
float C1y = random(i, height);
float C3x = random(0,width);
float C3y = random(0,height);
float C2y = random(30,100);
beginShape();
curveVertex(C1x, C1y);
curveVertex(C1x, C1y);
if(i%2 == 0){
curveVertex(C1x, C1y+C2y);
}else{
curveVertex(C1x, C1y-C2y);
}
curveVertex(C3x, C3y);
endShape();
}
noStroke();
//ADD NOISE
for (int x=0; x<width; x++) {
for (int y=0; y<height; y++) {
float noiseVal = noise(x/1, y/1);
fill(255*noiseVal, 200*noiseVal, 0, 3);
float rectWidth = random(1, 3);
float rectHeight = random(1, 3);
rect(x, y, rectWidth, rectHeight);
}
}
noLoop();
}
Thanks for reading. If you have suggestions to improve this code then leave a comment.
