p5.js Getting Started

a painting with different colored spots on it with a brush in the middle and a purple and pink brush in front of it

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.

Ah, the world of creative coding! It's a magical place where art and technology collide, and p5.js is the perfect tool to dive into this enchanting realm. Think of p5.js as a paintbrush that can translate your imagination into colorful animations and interactive experiences on the canvas of a web browser.

But before you start painting the digital skies with code, let's get you acquainted with the ins and outs of p5.js.

What is p5.js?

p5.js is a JavaScript library that simplifies creative coding, making it more accessible and enjoyable for artists, designers, educators, and beginners. It is inspired by Processing, a popular creative coding environment, and brings its powerful features to the web.

Setting Up The Environment

Before you can start creating your first p5.js masterpiece, you need to set up your coding environment. Fret not, the process is easier than solving a 2-piece jigsaw puzzle.

Option 1: p5.js Web Editor

The quickest way to get started is by using the p5.js Web Editor. This nifty online tool lets you write, run, and share your p5.js sketches without needing to install anything on your computer. Just open the link, and you're ready to code!

Option 2: Local Development

If you prefer working offline or want more control over your development environment, you can set up p5.js on your local machine. Here's how:

  1. Download the p5.js library from the official website.
  2. Extract the downloaded archive and create a new HTML file in the same folder as the p5.js file.
  3. Add the following code to your HTML file:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>p5.js Sketch</title>
    <script src="p5.js"></script>
    <script src="sketch.js"></script>
</head>
<body>
</body>
</html>
  1. Create a new JS file in the same folder called sketch.js. This is where you'll write your p5.js code.

And that's it! You can now open the HTML file in your favorite web browser and see your p5.js sketch come to life.

Your First p5.js Sketch

Now that your environment is set up, it's time to unleash your creativity. We'll start with a simple example to get a feel for p5.js.

In your sketch.js file, add the following code:

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

function draw() {
    background(220);
    ellipse(mouseX, mouseY, 50, 50);
}

This code creates a 400x400 pixel canvas and draws a circle that follows your mouse cursor. The setup() function runs once at the beginning, and the draw() function loops continuously, redrawing the canvas.

If you're using the p5.js Web Editor, simply add the code to the sketch.js tab and click the "Play" button.

Next Steps

Now that you've dipped your toes into p5.js, it's time to explore the ocean of possibilities. Learn about shapes, colors, animations, interactivity, and more to transform your ideas into mesmerizing visual creations.

Happy coding, and may your digital canvas overflow with creativity!

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!).

Similar Articles