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.

FAQ