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

When you're just getting started with p5.js, a JavaScript library with a full set of drawing functionality, one of the first things you'll want to do is start drawing shapes. In p5.js, these shapes are known as primitives. Primitives are the building blocks of your p5.js sketches, the basic elements that you can combine and manipulate to create more complex visuals.

Primitives List

p5.js offers an array of primitives for you to play with. These include:

1. Points
2. Lines
3. Rectangles
4. Circles
5. Ellipses
6. Triangles
7. Quadrilaterals

Points and Lines

The simplest primitives are points and lines. You might think of a point as the most basic shape, just a single spot in space. In p5.js, you can draw a point using the point() function:

function draw() {
    point(30, 20);
}

This would draw a point at the position (30, 20). A line, on the other hand, is simply a connection between two points. You can draw a line using the line() function:

function draw() {
    line(30, 20, 80, 60);
}

This would draw a line from the point (30, 20) to the point (80, 60).

Rectangles and Circles

Moving on to 2D shapes, we have rectangles and circles. To draw a rectangle in p5.js, you'd use the rect() function, like so:

function draw() {
    rect(30, 20, 50, 100);
}

This would draw a rectangle with the top-left corner at (30, 20), a width of 50, and a height of 100. Circles are similar, but instead of width and height, you specify a diameter. Use the circle() function for that:

function draw() {
    circle(30, 20, 50);
}

This draws a circle with the center at (30, 20) and a diameter of 50.

Other Shapes

There are other shapes to explore in p5.js as well, like ellipses, triangles, and quadrilaterals. Once you've mastered the basics, feel free to dive deeper into these more complex primitives. The sky's the limit!

FAQ