How to Fill A Shape Made Of Lines In P5.js?

In p5.js, you can fill a shape made of lines by using the beginShape() and endShape() functions. First, use the beginShape() function to start defining the shape. Then, use the vertex() function to add points to the shape by specifying the x and y coordinates of each point. Finally, use the endShape() function to close the shape and fill it with the specified color using the fill() function. Make sure to set the fill color before calling the endShape() function. This will create a filled shape made of lines in p5.js.

How to use the fill() function in p5.js?

The fill() function in p5.js is used to set the color used to fill shapes. It can be used to set the color of shapes such as rectangles, ellipses, and polygons.

Here is how you can use the fill() function in p5.js:

1. Define the fill color using RGB values:

1

fill(255, 0, 0); // This will set the fill color to red

1. Set the fill color using a CSS color name:

1

fill('blue'); // This will set the fill color to blue

1. Set the fill color using a CSS color value:

1

fill('#ff0000'); // This will set the fill color to red using hexadecimal color value

1. Use the fill() function before drawing a shape to set the fill color for that shape:

1
2

fill(255, 0, 0);
rect(50, 50, 100, 100); // This will draw a red rectangle

1. You can also pass an optional fourth argument to the fill() function to set the alpha value (transparency) of the fill color:

1

fill(255, 0, 0, 100); // This will set the fill color to semi-transparent red

Remember to call the fill() function before drawing a shape that you want to fill with the specified color. You can reset the fill color to the default (black) by calling noFill().

Here is an example of using the fill() function in practice:

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

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

function draw() {
  background(220);
  
  fill(255, 0, 0);
  rect(50, 50, 100, 100);
  
  fill('blue');
  ellipse(200, 200, 50, 50);
}

How to fill a shape with a linear gradient in p5.js?

To fill a shape with a linear gradient in p5.js, you can use the beginGradientFill() and endFill() functions to create the gradient fill. Here's an example of how you can do this:

1. Use the beginGradientFill() function to specify the gradient parameters such as the start and end points, as well as the colors:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

function setup() {
  createCanvas(400, 400);
  // Define the start and end points of the gradient
  let x1 = 0;
  let y1 = 0;
  let x2 = width;
  let y2 = 0;

  // Define the colors of the gradient
  let c1 = color(255, 0, 0); // red
  let c2 = color(0, 0, 255); // blue

  // Create the linear gradient fill
  beginGradientFill(0, x1, y1, x2, y2);
  setGradient(x1, y1, x2, y2, c1, c2);
}

function setGradient(x1, y1, x2, y2, c1, c2) {
  noFill();
  for (let i = y1; i <= y2; i++) {
    let inter = map(i, y1, y2, 0, 1);
    let c = lerpColor(c1, c2, inter);
    stroke(c);
    line(x1, i, x2, i);
  }
  endGradientFill();
}

1. Then use the setGradient() function to draw the gradient:

1
2
3
4

function draw() {
  // Draw a rectangle with the gradient fill
  rect(50, 50, 300, 300);
}

By following these steps, you can fill a shape with a linear gradient in p5.js.

What is the HSV color model in p5.js?

The HSV color model, also known as Hue, Saturation, and Value or HSB (Hue, Saturation, Brightness), is a color space that is often used in computer graphics and image processing. In p5.js, the color() function can accept parameters in the HSV color model, allowing you to specify colors based on their hue, saturation, and value/brightness. This allows you to create a wider range of colors and control the intensity and brightness of the colors in your sketches.

How to change the fill color in p5.js?

To change the fill color in p5.js, you can use the fill() function. Here is an example of how to change the fill color to red:

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

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

function draw() {
  background(220);
  
  // Set fill color to red
  fill(255, 0, 0);
  
  // Draw a rectangle with the specified fill color
  rect(50, 50, 100, 100);
}

In the example above, the fill() function is used to set the fill color to red (255, 0, 0). This will change the fill color for any shapes drawn after the fill() function is called.

What is the strokeWeight() function in p5.js?

The strokeWeight() function in p5.js is used to set the thickness or weight of the line drawn by the line(), point(), rect(), and other shape drawing functions in the p5.js library. It takes a single parameter that specifies the weight of the stroke in pixels. The default stroke weight is 1.