Recitation 5: Processing Basics by Eleanor Wade

This image by Victor Vasarely is one I find particularly intriguing.  Both the colors and the complexity of the design seemed very interesting to me, as I was approaching this assignment.  I especially enjoy the contrast in the greens and reds, combined with the various shades of blues.  

In beginning of working with processing, I felt very intimidated and confused.  Eventually, however, the coding became easier and more intuitive in how I am able to translate shapes and colors into letters and numbers.  In thinking about this assignment on a plane of x and y, I was able to better understand the process and code the correct placement of various shapes.  Using processing to achieve the goal of recreating this image proved to be somewhat tedious, so I decided to replicate only the top half of the image.  It was definitely a challenge for me to conceptualize the image in terms of coordinates on a grid, so I did make a few notes on paper to aid in the process.  After learning how to code triangles, I found it to be quite straightforward to put the entire work into code via various triangles.  

One difference that stands out to me when comparing the top halves of each image are the slight differences in the colors.  I found it to be a tiny bit frustrating to try and recreate the beauty of the muted tones by using the color selector tool on my computer.  If I were using acrylic paints, it would seem natural to me to be able to mix a small amount of red  into the greens to dull the color slightly, but it was much less intuitive for me to be able to  find the shades I was looking for by using this tool.  I am sure that as I become more familiar with both processing and the color selector tool this is something that would become easier, however, currently when comparing the colors I used with the ones in the original I am off-put by the starkness of my new image.  

But for many elements, specifically the precision of the lines and crispness of the angles, I found myself pleasantly surprised at how satisfying it is to use processing as an artistic tool.  In this regard, I can fully see how using software such as processing can give artists far more options to create highly specific images.  In taking advantage of the software’s ability to produce exceptionally accurate, straight lines, clear angles, perfect shapes, literally every color (even though I struggled to find them) I can now see how beneficial it is to be able to use this as an artistic medium.  It is very inspiring to me to think about what I can create using this tool when I fully understand how to use all that it has to offer.  

Additionally, I decided to take the artistic liberty to make the canvas size 500 by 500 pixels.  Although the assignment instructed to go above 600 by 600 I felt that the original image can so perfectly be divided into 5 distinct sections, that it made much more sense for me to be able to graph everything by 100 pixel increments.  This also made it slightly more straightforward to graph the various points that did not fall on the 100 pixel splits.  

The code:

size(500, 500);

background(82, 138, 185);

noStroke();

fill(196, 24, 55);

triangle(0, 0, 100, 100, 0, 100);

fill(60, 67, 100);

triangle(0, 0, 100, 0, 100, 100);

fill(201, 231, 240);

triangle(100, 0, 200, 0, 100, 100);

fill(60, 67, 100);

triangle(100, 100, 200, 0, 200, 50);

fill(83, 149, 106);

triangle(100, 100, 200, 50, 200, 100);

fill(60, 67, 100);

triangle(200, 0, 200, 50, 300, 100);

fill(83, 149, 106);

triangle(200, 0, 300, 100, 400, 0);

fill(83, 149, 106);

triangle(200, 50, 200, 100, 300, 100);

fill(60, 67, 100);

triangle(333, 100, 400, 33, 466, 100);

fill(82, 138, 185);

triangle(0, 100, 100, 100, 0, 200);

fill(83, 149, 106);

triangle(100, 100, 0, 200, 50, 200);

fill(60, 67, 100);

triangle(100, 100, 50, 200, 100, 300);

fill(196, 24, 55);

triangle(100, 100, 100, 300, 150, 200);

fill(83, 149, 106);

triangle(0, 200, 50, 200, 100, 300);

fill(83, 149, 106);

triangle(100, 100, 150, 200, 200, 200);

fill(83, 149, 106);

triangle(150, 200, 200, 200, 100, 300);

fill(60, 67, 100);

triangle(100, 100, 200, 150, 300, 100);

fill(160, 245, 91);

triangle(200, 200, 300, 100, 400, 200);

fill(160, 245, 91);

triangle(200, 200, 300, 300, 400, 200);

fill(60, 67, 100);

triangle(400, 100, 466, 100, 400, 166);

fill(196, 24, 55);

triangle(400, 200, 500, 100, 500, 300);

fill(201, 231, 240);

triangle(266, 133, 336, 166, 263, 243);

fill(201, 231, 240);

triangle(263, 243, 336, 166, 323, 273);

Leave a Reply