Coloring the Borders of Shapes in 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.

Are you ready to add some color to your coding life? Then let's get started! With the stroke() function in p5.js, a JavaScript library, we can paint the town red... or any color you like!

The Basics

In p5.js, shapes are drawn with a border, or "stroke", by default. This stroke is black unless we tell it otherwise. And how do we tell it otherwise? You guessed it - with the stroke() function.

function setup() {
    createCanvas(400, 400);
    background("white");
}

function draw() {
    stroke("red");
    rect(100, 100, 200, 200);
}

In this example, we've created a square with a red border.

The stroke() Function

The stroke() function takes either three arguments (for RGB values) or one argument (for grayscale or color names). If you're feeling like a grayscale kind of day:

function draw() {
    stroke(50);
    rect(100, 100, 200, 200);
}

This will draw a square with a gray border.

If you're feeling a bit more colorful, you can use RGB values:

function draw() {
    stroke(255, 0, 0);
    rect(100, 100, 200, 200);
}

This will draw a square with a bright red border. The RGB values can be between 0 and 255.

No Stroke?

What if you don't want a border at all? No problem! The noStroke() function has you covered.

function draw() {
    noStroke();
    rect(100, 100, 200, 200);
}

This gives us a borderless square.

And there you have it! With the stroke() function in p5.js, you've got the power to bring color to your code. So go ahead and paint the town red... or blue, or green, or whatever color your heart desires!

FAQ