Step 1: Choose an image to be your motif
In the suggested sources below I picked the penetrating (B) from the website “Computer Graphics and Arts”:
-
-
- Computer Graphics and Arts (1976 – 1978)
- https://www.guggenheim.org/artwork/162
-
I chose this because though it was only made up of a few quads, it was full of orders. The contrast between the colors is also interesting while the yellow, bright lines catch most of my attention.
Step 2: Draw your image in Processing
I decided to directly emulate my motif’s design because the order of coding must be very logical. I started with the background first and then the blue quads. The lines were the last part I drew. It was really difficult to calculate those points to make sure each line was parallel to the others.
I drew the draft on the paper first and did all those calculations. However, there were still some mistakes and deviations, which made the final product different from the original one.
The ratio is absolutely different and it is hard to simulate the same texture of those fills, which make the whole look so different from the original picture. I feel like processing is hard to use while other websites or apps can directly create a shape and fill the color I want without any coding and calculations. Though it is a funny experience, once it applies to a big project, which may need massive amounts of drawings, it may not be funny for its struggling calculations.
Here is my code:
size(800,600);
background(#670917);
fill(#3B010A);
stroke(#3B010A);
quad(100,50,500,50,450,300,50,300);
quad(790,150,765,300,365,300,390,150);
triangle(0,300,50,300,0,500);
quad(0,500,350,500,325,600,0,600);
quad(0,600,0,550,800,550,800,600);
quad(765,300,800,300,800,600,715,600);
fill(#1C2440);
stroke(#1C2440);
quad(200,150,300,150,275,300,175,300);
quad(300,150,400,210,400,300,275,300);
quad(400,210,650,210,635,300,385,300);
fill(#313E6C);
stroke(#313E6C);
quad(290,210,275,300,450,300,455,270);
triangle(455,270,290,210,400,210);
triangle(400,210,455,270,460,240);
stroke(#FAF7B8);
strokeWeight(5);
line(200,150,300,150);
line(300,150,460,240);
line(460,240,434.17,425);
line(434.17,425,350,390);
line(350,460,160.67,356);
line(160.67,356,200,150);
line(290,210,650,210);
line(650,210,620,390);
line(620,390,350,390);
line(350,390,260.67,345);
line(290,210,260.67,345);
line(350,390,350,460);