News Center

Current Location:Home page  <  Product Tutorials
[Creator weapon] Processing change shape attribute
2019-09-26

     Through the simple programming of the Processing language, we can draw a lot of different graphics, and display these graphics by running the program. This is the feature of Processing interactive programming. It is written in code, and the program is more graphically displayed at runtime. . In the previous article, I shared with you how to use the Processing code to draw simple graphics, such as lines, rectangles, etc., but all of them are the same color, the same line of graphics, can we change them by programming? The answer is "Of course!" So what do you do? How do I change the properties of a graphic by writing a Processing code? Here are a few sample programs to learn how to use the Processing code to graph properties such as line width, background color, and more.


1, smooth curve and non-smooth curve

Processing example program:

Turn off the line sleek:

Size(480, 120);
noSmooth();//Close the line smoothing command
Ellipse (140, 60, 90, 90);

Open the line sleek:

Size(480, 120);
Smooth();//Open the line smooth command
Ellipse (140, 60, 90, 90);


Copy the two codes into the Processing software, and you can run the program. As shown in the figure below, the smoothness of the graphics edges drawn by the Processing code is different.

 1.png  

1-1.png


2, change the graphics edge

(1) hide the edges of the graphics

Processing example program:


Size(480, 120);

Smooth();

Fill(153); // Fill the grayscale to 153

Ellipse (132, 82, 200, 200);

noFill(); //close the fill

Ellipse (228, -16, 200, 200);

noStroke(); // close the outline line

Ellipse(268, 118, 200, 200); // This graphic will not be drawn


The running program shows the effect as shown below. We can see that the last graphic is not displayed in the running window.

2.png


(2) Set the pixels of the graphics edge


Size(480, 120);

Smooth();

Ellipse(75, 60, 90, 90);

strokeWeight(8); // Set the width pixel to 8

Ellipse(175, 60, 90, 90);

Ellipse (279, 60, 90, 90);

strokeWeight(20); // Set the width pixel to 20

Ellipse(389, 60, 90, 90);


As shown in the figure below, the effect of the program running is to draw a circle with four edges and pixels.

3.png


3, change the color of the graphics

(1) Set the grayscale of the graphic

Processing example program:

Size(480, 120);
Smooth();
Background(0); // black
Fill(204); // Grayscale is 204
Ellipse (132, 82, 200, 200);
Fill(153); // Fill the grayscale to 153
Ellipse (228, -16, 200, 200);
Fill(102);
Ellipse (268, 118, 200, 200);

As shown in the figure below, the effect of the program running is to change the grayscale of the drawn graphics.

4.png

(2) draw color graphics

Size(480, 120);
noStroke();
Smooth();
Background(0, 26, 51); // Set the background color
Fill(255, 0, 0); // fill the red
Ellipse(132, 82, 200, 200); // red arc
Fill(0, 255, 0); // fill the green
Ellipse(228, -16, 200, 200); // green arc
Fill(0, 0, 255); // fill blue
Ellipse(268, 118, 200, 200); // blue arc

5.png

As shown in the figure below, after the program runs, draw a circle with red, green, and blue as the background color in the window.

A few simple graphical property modification commands are introduced here, let's try it out!



Create source maker, creative from ALSROBOT