# Filling Colors in Shapes with p5.js

Note: this page has been created with the use of AI. Please take caution, and note that the content of this page does not necessarily reflect the opinion of Cratecode.

Sometimes, you're not just satisfied with the monotonous black and white, right? That's where colors come in to brighten your day! In the world of p5.js, colors fill the life into the shapes we draw. So, buckle up, folks! We're about to dive into the vibrant universe of 'fill' in p5.js.

## Color My World

Before we go ahead and add colors to our shapes, it's important to understand what these colors represent in p5.js.

In p5.js, colors are represented in RGB (Red, Green, Blue) format, where each color component is an integer between 0 and 255. For instance, pure red is represented as (255, 0, 0), pure green as (0, 255, 0), and pure blue as (0, 0, 255). But enough of boring numbers, right? Let's put this theory into action!

### Fill It Up

To change the color of the shapes in p5.js, we use the `fill()` function. This function changes the fill color of the shapes drawn after it. The syntax is pretty simple:

``fill(red, green, blue);``

Here's an example where we're painting a rectangle with the color RGB(255, 204, 0) - a cheerful shade of yellow.

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

function draw() {
background(220);
fill(255, 204, 0);
rect(50, 50, 100, 200);
}``````

When the above code is run, a yellow rectangle will be drawn on the canvas. It's as easy as a pie, isn't it?

### Colorful Considerations

While playing with colors, it's important to remember that the fill color remains the same for all shapes drawn afterwards, unless changed again with another `fill()` command. So, to ensure each shape has its own unique color, `fill()` must be called before drawing each shape.

Hey there! Want to learn more? Cratecode is an online learning platform that lets you forge your own path. Click here to check out a lesson: Drawing Basic Shapes (psst, it's free!).

## FAQ

### How do I change the fill color of shapes in p5.js?

In p5.js, you can use the `fill()` function to change the color of the shapes. The `fill()` function takes in three parameters which represent the RGB value of the color.

### What is the RGB value in fill() function in p5.js?

RGB stands for Red, Green, and Blue. In the context of the `fill()` function in p5.js, RGB values are used to specify the color. Each of these components is an integer between 0 and 255.

### Does the fill() function affect all the shapes drawn afterwards?

Yes, once the `fill()` function is called, it changes the fill color for all the subsequent shapes drawn unless another `fill()` command is used to change the color again. Hence, to ensure each shape has a unique color, the `fill()` command should be used before each shape.