Recitation 5. Processing Basics By Feifan Li

I chose my motif on a website called artnet. It is called Balaton, from Ion Album, made in 1989 by artist Victor Vasarely.

link: http://www.artnet.com/artists/victor-vasarely/balaton-from-ion-album-a-z95kw_9jDEPNSCeDfuVCRw2

I chose this motif simply because I like its color and design – the messy lines with arcs and semi-ellipses make an interesting combination and presents a visual impact to me. Also, I think it is a good practice for basic processing functions like line, rect, bezier, fill, nofill, stroke and so on.

I want to draw an exactly same picture in Processing.

My Code:

size(600, 600);
background(#212120);

fill(#A59E66);
rect(30, 35, 540, 540);

//the small rect
stroke(0, 0, 0);
strokeWeight(1.5);
fill(#CECECC);
rect(225, 280, 150, 150);

//the straight lines
stroke(#272726);
strokeWeight(4);
line(50, 300, 155, 300);
line(50, 320, 155, 320);
line(50, 340, 155, 340);

line(50, 380, 175, 380);
line(50, 410, 180, 410);

line(50, 410, 180, 410);
line(50, 430, 185, 430);
line(50, 485, 223, 485);
line(50, 530, 255, 530);


line(225, 430, 550, 430);
line(225, 280, 550, 280);
line(376, 310, 550, 310);
line(376, 440, 550, 440);
line(376, 460, 550, 460);
line(376, 490, 550, 490);

line(253, 520, 550, 520);
line(268, 538, 520, 540);

//diagonal
line(220, 480, 550, 516);
line(180, 410, 340, 490);
line(150, 230, 200, 300);

//the curves
noFill();
stroke(0, 0, 0);
bezier(450, 200, 120, 250, 120, 390, 280, 550);

stroke(0, 0, 0);
bezier(550, 75, 380, 250, 100, 280, 40, 65);
fill(0);
bezier(380, 188, 350, 35, 250, 35, 120, 180);
fill(#CECECC);
bezier(380, 190, 220, 270, 200, 260, 125, 182);

I think my drawing is pretty similar to the motif. I drew the lines and arcs using “line” and “bezier” function, and they resemble those in the motif a lot.

The difficult part in the process is how to draw the arcs. It is difficult to calculate exactly the position of the anchor/control points, so I have to constantly try and make the shapes fit. The most difficult part is to draw the small grey area above the big curve. I could not simply do it with “fill” function, so I drew another arc shape and filled it with grey color. This leads to upper curves appear a bit disconnected. But, overall, I think Processing is suitable for realizing my design.