Recreation of a Computer Graphic

Unlike many others perhaps, I didn’t start off with a particular image that I wanted to recreate. I first resorted to doing some research on the potential functions that I could use that I could incorporate into my recreation that we may not have learned in class yet.

I found a website (http://zenbullets.com/book.php) which is basically a webpage for a book called “GENERATIVE ART: A PRACTICAL GUIDE”. I realised that many of the example projects that the author had created used the noise() function, lots of +=s and drawPoint() functions. I, therefore, started out my project by researching what these pieces of language meant.

I then chose this image to try and recreate.

I decided that it was easier for me to start with the random lines and work them out first and then layer the rectangle and lines on top, which would be the easier part. To do the background lines part, I used one of the examples that I followed in the book, but altered it so that it fit what I wanted to do.

I thought that it would be cool if I inverted the colours. The following picture is a side by side comparison of the graphic vs what I recreated.

Though I realise that the lines that I have created still look different to the image, I am happy with the results!

As a development to this recreation though I could work on making those random white splotches that don’t really have any shape to them (as seen in the original graphic). I’m assuming that they’re actually splotches because they look too thick to be the overlaps of the lines.

 

Here is the code that I used:

float xstart, xnoise;
float ystart, ynoise;
float xstartNoise, ystartNoise;

void setup() {
size(300,300);
smooth();
background(255);
noLoop();

xstart = random(10);
ystart = random(10);
}

void draw () {
background(255);

for (int y = 0; y <= height; y+=5) {
ynoise += 0.5;
xnoise = xstart;
for (int x = 0; x <= width; x+=5) {
xnoise += 0.5;
drawPoint(x, y, noise(xnoise, ynoise));
}
}

fill(0);
rect (95, 165, 10, 30);
rect (65, 165, 10, 30);
rect (95, 135, 10, 30);
rect (20, 105, 10, 30);
rect (8, 60, 15, 28);
rect (150, 135, 10, 25);
rect (40, 0, 13, 13);

stroke (255);
strokeWeight(1);
fill (255);
rect (0, 195, 300, 195);
strokeWeight(3.25);
line (0, 165, 300, 165);
line (0, 105, 300, 105);
line (0, 60, 300, 60);
line (0, 33, 300, 33);

}

void drawPoint(float x, float y, float noiseFactor) {
pushMatrix();
translate(x,y);
rotate(noiseFactor * radians(360));
stroke(0, 150);
strokeWeight(1.25);
line(0,0,8,0);
popMatrix();
}

Leave a Reply

Your email address will not be published. Required fields are marked *