The drawing of basic graphics is the basis for animation and interaction. Processing provides a wealth of graphics-related functions to meet our drawing needs.
1. Coordinates
Any graphics can not be separated from the coordinate system. In Processing, the origin is the upper left corner of the window, and the coordinate value increases from the left to the right x axis, and from the top to the y axis. In each Processing program, there is a ** size () ** function, which is used to set the width and height of the running window.
We use ** point () ** to draw the most basic pixel, its parameters are the x-axis and y-axis coordinates.
2. Basic graphics
- Straight line: line (x1, y1, x2, y2)
- Triangle: triangle (x1, y1, x2, y2, x3, y3)
- Quadrilateral: quad (x1, y1, x2, y2, x3, y3, x4, y4)
- Rectangle: rect (x, y, width, height)
- Ellipse: ellipse (x, y, width, height)
- 扇形：arc(x, y, width, height, start, stop)
line(10, 10, 100, 20);
triangle(160, 40, 180, 10, 200, 30);
quad(40, 30, 90, 50, 90, 80, 20, 70);
rect(150, 60, 50, 40);
ellipse(50,120,40,30);
ellipse(130,120,40,40);
arc(40, 150, 50,60,0,3);
It is worth noting that the last two parameters of arc () ** are the setting angle, and the unit is expressed in radians, where 180 °, 45 °, 90 °, 360 ° define the special names PI, QUARTER_PI, HALF_PI, TWO_PI .
3. Drawing order
Due to the sequential execution of the program, if the coordinates of the two graphics have overlapping parts, the graphics drawn later will overwrite the graphics drawn earlier.
4. Drawing properties
- Stroke thickness style: strokeWeight () , the default parameter is 1 pixel
size(480, 120);
ellipse(35,60,60,60);
strokeWeight(5);
ellipse(105,60,60,60);
strokeWeight(8);
ellipse(175,60,60,60);
strokeWeight(20);
ellipse(260,60,60,60);
- Stroke endpoint style: strokeCap () , parameters ROUND (circle), SQUARE (square), PROJECT (hybrid)
size(480, 120);
strokeWeight(20);
line(30,25,100,95);
strokeCap(SQUARE);
line(130,25,200,95);
strokeCap(PROJECT);
line(230,25,300,95);
strokeCap(ROUND);
line(330,25,400,95);
- Line corner style: strokeJoin () , parameters ROUND (circle), BEVEL (bevel cut), MITER (mitre joint)
size(480, 120);
strokeWeight(10);
rect(20,25,60,60);
strokeJoin(ROUND);
rect(100,25,60,60);
strokeJoin(BEVEL);
rect(180,25,60,60);
strokeJoin(MITER);
rect(260,25,60,60);
5. Color
All graphics are initially filled with white and black strokes. We can use the background () , fill () , and stroke () functions to change the color. We can use a 0-255 parameter to represent grayscale, but in more cases, we will use three 0-255 RGB parameters to create color.
size(480, 120);
noStroke(); //隐藏描边
background(0, 25, 50);
fill(255, 0, 0);
ellipse(120, 90, 200, 200);
fill(0, 255, 0);
ellipse(228, -8, 200, 200);
fill(0, 0, 255);
ellipse(256, 126, 200, 200);
The fourth optional parameter alpha can be set in the ** fill () and strock () ** functions to control transparency, and the value range is 0-255.
With these drawing functions, we can basically meet our various drawing needs, you can also try it.
Pay attention to the public number "TonyCode" and reply "1024" to get 1000G learning materials.
personal blog
