Introduction
For today’s recitation, we were tasked with choosing an image, and then to either recreate the image, or use the image as a motif and create a piece of art as an interpretation of the piece in Processing. The purpose of this exercise was to get introduced to the basic drawing functions available to us in Processing, as well as seeing the similarities between the processing program and that of Arduino.
Bent Dark Grey – Josef Albers
I chose this image because of its use of different lines and shapes, as well as how those lines and shapes interact with each other through transparency and symmetry. I was thinking that the best way to reproduce this image would be to split it up into sections, foreground, and background, as well as the different shapes that make it up.
I wanted to recreate the piece in Processing as faithfully as I could. In order to do this in the most efficient and organized way possible, I split my code up accordingly to each of the shapes that I saw as I inspected the painting, and then worked from there in order to piece the shape together to create the coherent piece. Other than the shapes, I also had to work with the transparency of each of the shapes in order to make the blending effect seen in the original painting– how the shapes overlap with each other and create darker regions. Another thing that pops out of the painting was the white line in the center of the image that almost separates the painting into two. The hardest part about recreating this piece faithfully was getting the proportions of each of the shapes to look correct. This required me to fine tune the pixel values through trial and error, as well as some math calculations in order to find the exact pixel values that I needed.
In order to make this piece different from the original, I used the keyPressed() function to make the piece interactive. If a key was not pressed, the details of the painting would be covered by a slightly transparent dark rectangle– although, this was not the original plan. Originally, I wanted to create a negative version of the original painting through reversing the colors when a key is pressed, however the values I inputted weren’t correct. Instead, they made the whole middle section a dark grey when a button is pressed. So I just went with this version in order to make the audience of my piece “work” to see the piece by pressing a button.
Code
void setup() {
size(575,787);
background(220);
}
void draw() {
if (keyPressed == false) {
//outer rectangle
noStroke();
fill(150);
rect(15,15,545,757);
//inner rectangle
noStroke();
fill(25);
rect(75,105,425,577);
//topleft upper rectangle
noStroke();
fill(0,85);
rect(75,105,40,150);
//topleft lower rectangle
noStroke();
fill(0,85);
rect(75,205,40,50);
//back square
noStroke();
fill(0,85);
rect(155,155,290,290);
//back trapezoid below square
noStroke();
fill(0,85);
quad(155,445,445,445,445,632,310,632);
//back rectangle
noStroke();
fill(0,85);
rect(115,305,155,277);
//triangle beside back rectangle
noStroke();
fill(0,85);
triangle(270,443,390,582,270,582);
//back rectangle lowest
noStroke();
fill(0,85);
rect(115,585,153,47);
//low traingle x2
noStroke();
fill(0,85);
triangle(268,585,307,632,268,632);
noStroke();
fill(0,85);
triangle(268,585,307,632,268,632);
//top parallelogram
noStroke();
fill(0,85);
quad(272,105,392,244,392,582,272,445);
//top line
stroke(25);
strokeWeight(3);
line(270,110,270,445);
//bottom line
stroke(25);
strokeWeight(3);
line(270,445,388,580);
}
else {
//outer rectangle
noStroke();
fill(150);
rect(15,15,545,757);
//inner rectangle
noStroke();
fill(230);
rect(75,105,425,577);
//topleft upper rectangle
noStroke();
fill(0,170);
rect(75,105,40,150);
//topleft lower rectangle
noStroke();
fill(0,170);
rect(75,205,40,50);
//back square
noStroke();
fill(0,170);
rect(155,155,290,290);
//back trapezoid below square
noStroke();
fill(0,170);
quad(155,445,445,445,445,632,310,632);
//back rectangle
noStroke();
fill(0,170);
rect(115,305,155,277);
//triangle beside back rectangle
noStroke();
fill(0,170);
triangle(270,443,390,582,270,582);
//back rectangle lowest
noStroke();
fill(0,170);
rect(115,585,153,47);
//low traingle x2
noStroke();
fill(0,170);
triangle(268,585,307,632,268,632);
noStroke();
fill(0,170);
triangle(268,585,307,632,268,632);
//top parallelogram
noStroke();
fill(0,170);
quad(272,105,392,244,392,582,272,445);
//top line
stroke(230);
strokeWeight(3);
line(270,110,270,445);
//bottom line
stroke(230);
strokeWeight(3);
line(270,445,388,580);
}
}