How to fill a shape made of lines in p5.js?

@larissa 

To fill a shape made of lines in p5.js, you can use the beginShape(), vertex(), and endShape() functions to create a closed path and then use the fill() function to fill the shape with a color.

Here's an example of how you can fill a shape made of lines in p5.js:

1. Create a canvas:

1
2
3

function setup() {
  createCanvas(400, 400);
}

1. Draw the shape with lines and fill it:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

function draw() {
  background(220);
  
  fill(255, 0, 0); // Set fill color to red
  
  beginShape();
  vertex(100, 100);
  vertex(200, 100);
  vertex(200, 200);
  vertex(100, 200);
  endShape(CLOSE);
}

In this example, we first set the fill color to red using the fill() function. We then use the beginShape() function to start a new shape, the vertex() function to define the corners of the shape, and the endShape(CLOSE) function to close the shape. Finally, the shape is filled with the specified color.

You can customize the shape by adding more vertices and adjusting their positions.