What Is p5.js? A JavaScript Library for Creative Coding

p5.js is a JavaScript library for creative coding: you write JavaScript in a web page, and it gives you ready-made functions for drawing shapes, animating them, and responding to mouse, keyboard, and other input. It is aimed at artists, designers, beginners, and educators who want to make visual or interactive work in the browser without building a graphics stack from scratch. The official site, p5js.org, is where you find the library download, the reference, examples, and community work.

What p5.js actually does

At its core, p5.js gives you a small set of drawing and interaction commands that run inside a sketch. A sketch is your program — typically two functions:

• setup() runs once, at the start. You use it to create the canvas and set initial values.
• draw() runs repeatedly, many times per second. You use it to redraw the scene, which is what produces animation.

Because draw() loops continuously, motion comes from changing values slightly on each pass rather than from manually scheduling frames. That single idea is what makes p5.js approachable for animation and generative work.

Typical things people build with it:

• 2D drawing: shapes, lines, text, color, images
• Animation: moving, rotating, scaling objects over time
• Interaction: reacting to mouse position, clicks, key presses, and other input
• Data-driven visuals: mapping numbers to position, size, or color
• Generative and experimental pieces: patterns, simulations, and rule-based visuals

The official site's own examples illustrate the range — the homepage features community sketches such as Geodata Weaving by Kaspar Ravel, Slime Molds by Patt Vira, Generative Succulents and Zen Pots by newyellow, Padrão Geométrico by Guilherme Vieira, and Glitch animation by Karakure178. These are useful as a reality check on what the library is used for in practice: data visualization, simulation, generative pattern-making, and animation.

Who it is for

p5.js is explicitly positioned around learning and creative practice, not around shipping production web apps. The homepage points to three things that match three audiences:

If you already know JavaScript, p5.js is a thin layer over the canvas rather than a framework with a large API surface to learn. If you do not know JavaScript yet, p5.js is often used as a first step because the feedback is immediate and visual.

How to start

1. Get the library. The p5.js site has a Download section for the library itself. You can also reference it from a CDN in a script tag, which avoids managing files locally.
2. Create a sketch. A minimal sketch defines setup() and draw(). In setup(), create the canvas; in draw(), draw something.
3. Run it in a browser. Because p5.js is JavaScript, the sketch runs in a web page. Open the page and you should see your canvas.
4. Change one thing at a time. Adjust a coordinate, a color, or a value inside draw() and reload. This is the fastest way to build intuition for how the loop behaves.

Expected result: a visible canvas that redraws continuously. The most common early snag is putting drawing code in setup() instead of draw() — it will render once and then appear frozen, because nothing is being redrawn.

Where to go next on p5js.org

The homepage organizes the site into a few clear entry points:

• Reference — the library reference, for looking up what a specific function does and what arguments it takes.
• Examples — runnable sketches to learn from, which is usually faster than reading the reference cold.
• Community — sketches by other people, useful for seeing what is possible and for borrowing techniques.
• Download — getting the library.
• Donate — the project accepts donations; this is a funding path for the project, not a requirement to use the library.

A practical order for a beginner: run a few Examples first, then look up the functions you saw in the Reference, then try modifying an example until it breaks and you understand why.

What p5.js is not

It is not a general-purpose web framework, and it is not a 3D engine by default — it is a creative coding library centered on drawing and interaction in the browser. If your goal is a conventional website or app UI, p5.js is the wrong tool. If your goal is a visual, animated, or interactive piece where the drawing is the point, it is a direct fit.

The clearest way to decide is to open the Examples on p5js.org and ask whether you want to make something in that family. If yes, download the library and start with a single shape in draw().