Drawing 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.

There's no denying that the world of programming can be a little dry at times. All those variables, loops, and functions can make for some pretty dull viewing. Until, that is, you stumble across the vibrant and colorful world of p5.js.

p5.js - The Artist's Paintbrush

p5.js is a JavaScript library that brings the power of interactivity and graphics to your web pages. With p5.js, you can create everything from simple geometric shapes to complex interactive graphics and animations, all with just a few lines of code.

To give you a taste of what this library can do, let's dive right into the basics.

Setup and Draw

In p5.js, every sketch (that's what p5.js calls your programs) starts with two special functions: setup() and draw().

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

function draw() {
    background(220);
}

The setup() function is run once, at the very beginning. It's where you set up your canvas and any initial settings you need. The draw() function, on the other hand, is run continuously. Anything you put in draw() will be re-drawn on your canvas 60 times per second!

Drawing Shapes

Now that we have our canvas, it's time to start drawing. Let's start with some basic shapes: a line, a rectangle, and a circle.

function draw() {
    background(220);

    line(50, 50, 350, 350);
    rect(100, 100, 200, 200);
    circle(200, 200, 100);
}

The line() function draws a line from point (50, 50) to point (350, 350). The rect() function draws a rectangle at position (100, 100) with a width and height of 200. Similarly, the circle() function draws a circle centered at position (200, 200) with a radius of 100.

Adding Color

What's a painting without color? Luckily, p5.js makes it easy to add color to your sketches. You can change the color of your shapes using the fill() function and the color of your lines with the stroke() function.

function draw() {
    background(220);

    stroke(255, 0, 0);
    line(50, 50, 350, 350);

    fill(0, 255, 0);
    rect(100, 100, 200, 200);

    fill(0, 0, 255);
    circle(200, 200, 100);
}

In the above example, the line is red, the rectangle is green, and the circle is blue. Colors in p5.js are defined using RGB (Red, Green, Blue) values.

FAQ