[p5.js learning notes] basic knowledge of code drawing

Catalog

One 、 Preparation before painting

1. Prepare the canvas ：  createCanvas(720, 400);

2. Set the background color ： background(r,g,b,a); / background(gray)

3. Whether to draw shapes ：noStroke(); / noFill();

Two 、 Select the drawing mode

1. bound box ：stroke(r,g,b,a);

2. Fill in the border ：fill(r,g,b,a);

3、 ... and 、 Draw the base shape

---

Online editor ：https://editor.p5js.org/#

Reference documents ：https://p5js.org/zh-Hans/reference/

The official sample ：https://p5js.org/zh-Hans/examples/

---

One 、 Preparation before painting

1. Prepare the canvas ：  createCanvas(720, 400);

To make a 720 Pixel width 400 Pixel high canvas .

2. Set the background color ： background(r,g,b,a); / background(gray)

Common forms ： The incoming parameter is RGBA Four channel values or A gray value .

For other forms, please refer to  https://p5js.org/zh-Hans/reference/#/p5/background

3. Whether to draw shapes ：noStroke(); / noFill();

If noStroke() and noFill() Are called , No shape will be painted on the screen .

 

Two 、 Select the drawing mode

1. bound box ：stroke(r,g,b,a);

Set the shape outline color . This color is available RGB or HSB Color definition , It depends on the color mode at that time （ The default color space is RGB, And each value is between 0 to 255 Between ）. The default transparency value is also between 0 to 255 Between .
If the supplied parameter is a single string ,RGB、RGBA And hex CSS Color strings and all named colors can be used . In this case , Providing a second parameter to define transparency values is not supported , It needs to be used RGBA character string .

stroke('red');      //  Set the stroke color 
strokeWeight(4);    //  Set the stroke thickness 

2. Fill in the border ：fill(r,g,b,a);

Set the fill color of the shape .

 

3、 ... and 、 Draw the base shape