[Processing 3.5.3] #2 Paint Mondrian's works in Processing Basic figure

"Point, Line, Face"

Point, line, and face are the most basic unit of all figures. This note covers expressing point, line, and face using basic figure functions of Processing. At the end of this note, there is an application process that  imitates a modern art piece.

 

• screen resizing

• screen background color

• line drawing, thickness

• shape drawing and coloring (circle, square, rectangle, triangle)

 

---

△If you have successfully installed Processing in past note, you will see a screen where you can write code. From now on, all the codes will be written here, and run with a upper left play button. Executing screen will be closed with next stop button.

△Since no code has been written yet, if executing, a small black screen will be appear.

△Let me make the screen get bigger. I'll grow it to 800*800 pixels. 

size(x, y);
//resize a screen with x by y pixels.

size(800, 800);

△It looks better. Let's change the color of background this time. I'll pick purple because there is a grape flavored candy next to me. (100, 0, 100) is the most simple RGB value of purple. 

background(r, g, b); 
//change background color
//if there are three factors, each specified in order as RGB(red, green, blue). 
//if there is one, it means brightness(black and white).

background(100, 0, 100);

△Did you change the color you like? Very well. Next is point and line. The origin of coordinates of screen(0, 0) is upper left. 

point(x, y); 
//draw a point at location of (x, y). 

line(x1, y1, x2, y2); 
//draw a line connecting point(x1, y1) and point(x2, y2).

line(0, 0, 800, 800);

△I drew a line. Take a dot at another location. Let's change the thickness of the dot and line. You must set it before you draw a bold(or thin) point or line.

strokeWeight(weight); 
//Change the weight of the dot and line to the specified weight.

strokeWeight(5);

△Specifying thickness will make the lines as well as points thick.Try it yourself and check it out. The following are shapes.

circle(x, y, extent); 
//Draw a circle with a 'extent' diameter centered on the point (x, y). 

square(x, y, extent); 
//Draw a square of width 'extent' with point (x, y) as the upper left point.

rect(x, y, a, b); 
//Draw a rectangle of width a and height b with the point (x, y) as the upper left point.

triangle(x1, y1, x2, y2, x3, y3); 
//Draw a triangle connecting points (x1, y1), points (x2, y2), and points (x3, y3).

circle(400, 400, 30);

rect(350, 350, 100, 100);

fill(255, 255, 0);

△As with the background of the screen, figures and borders color can be changed.

fill(r, g, b); 
//Paint the inside of the figure that will be drawn later with the specified RGB value.

stroke(r, g, b); 
//Paint the border of the figure that will be drawn later with the specified RGB value.

noStroke(); 
//Remove the border of the figure that will be drawn later.

triangle(300, 30, 200, 200, 500, 490);

noStroke();

stroke(255, 0, 0);

 

---

 

△What kind of picture does this code draw?

△Um, boring yellow circles. It looks like lemon juice. or toxic drops of oil.

Piet Mondrian, <Composition with Red, Blue and Yellow>, 1929. Oil on canvas, 50x50cm.

△The end of this note is a simple application. These are famous squers, isn't it? Mondrian's artwork Composition with Red, Blue, and Yellow. You'll imitate this artwork in the simplest form using functions of this note.

Ototot, <Processing note #2-1>, 2019. Processing 3.5.3.

Ototot, <Processing note #2-2>, 2019. Processing 3.5.3.

△Well, not difficult, right? Very well.

▽The code for the second figure.

size(800,800);
background(51);
noStroke();

fill(249,251,248);
rect(0,322,79,165);

fill(220,7,40);
rect(107,90,203,153);
fill(249,251,248);
rect(107,268,203,327);
fill(253,229,0);
rect(107,616,203,94);

fill(249,251,248);
rect(325,0,264,173);
rect(325,193,264,240);
rect(325,451,264,232);

fill(68,54,111);
rect(602,451,155,150);
fill(249,251,248);
rect(602,193,199,238);


fill(255);
triangle(0,0,400,0,0,400);
triangle(400,0,800,0,800,400);
triangle(0,400,400,800,0,800);
triangle(400,800,800,800,800,400);

[Processing 3.5.3] #2 Basic figure drawing fin.