p5js.org

Start at p5js.org and work through three sections in order: Examples for runnable code, Reference for function-level explanations, and Community for real projects to study. The site is the official home of p5.js, a JavaScript library for creative coding, and its own navigation is the fastest beginner path — no separate course required.

The three official entry points

The p5.js homepage presents these directly:

The homepage also offers a Download link for the library itself, which you need if you want to run sketches locally rather than in the web editor.

A concrete first-week plan

1. Open the Examples page. Pick the simplest drawing example you can find. Read the code top to bottom before running it.
2. Change one number at a time. Adjust a coordinate, a color value, or a size, and re-run. This is how you learn what each line controls.
3. Move to animation. Once static drawing makes sense, find an example that changes over time. The key idea is that p5.js redraws the canvas continuously, so anything you change inside the draw loop produces motion.
4. Look up anything unfamiliar in the Reference. When you hit a function you don't recognize, search it there rather than guessing.
5. Browse Community work. Pick one sketch whose effect you like and try to reproduce a simplified version. The listed community pieces — generative plants, geometric patterns, glitch effects — are good targets because they combine a few basic techniques rather than dozens.

What to expect and where beginners get stuck

• Setup confusion. The Download option gives you the library files, but you still need an HTML page that loads them. If wiring that up is the obstacle, use the web editor first and switch to local files later.
• Reading without running. Examples are meant to be executed. Changing values and watching the result is the actual learning step, not reading the source.
• Skipping the Reference. Guessing at function arguments wastes time; the Reference exists precisely to answer "what does this take and what does it return."
• Jumping to complex community sketches too early. The showcased projects are finished, polished work. Treat them as goals, not starting points.

Choosing your path

If you want the shortest route to a running sketch, start with Examples and stay in the browser editor. If you prefer to understand each function before using it, read Reference entries alongside your first example. If you learn best by imitation, start from a Community sketch and rebuild it piece by piece. All three routes use the same site; the difference is only which section you open first.

The p5.js website shows community work through a rotating gallery of sketches and points you to three concrete actions: browse the examples, explore the reference, and support the project through donations. If you want to see what people build with the library or find a way to take part, the homepage and its linked sections are the starting points.

What the community gallery actually shows

The homepage features screenshots of sketches made by community members, each credited to its creator. The examples named on the page include:

• Geodata Weaving by Kaspar Ravel
• Slime Molds by Patt Vira
• Generative Succulents by newyellow
• Padrão Geométrico by Guilherme Vieira
• Zen Pots by newyellow
• Glitch animation by Karakure178

These titles suggest the range of directions people work in: generative art, data-driven visuals, organic simulation, pattern design, and animation. The gallery is a showcase rather than a tutorial, so treat each sketch as a prompt for your own experiments rather than a step-by-step lesson.

Ways to participate

The site lists a small set of entry points, each tied to a different level of involvement:

The homepage headings map directly onto these: "Explore the p5.js library reference," "Learn p5.js with examples," "See the p5.js community in action," "Donate to p5.js," and "Download p5.js."

How to use the gallery as a learning tool

1. Pick a sketch that interests you — for example, a generative or animation piece from the list above.
2. Identify the technique it implies — a slime mold simulation points toward agent-based movement; a glitch animation points toward pixel manipulation.
3. Find the matching reference entry — use the library reference to look up the functions that technique would need.
4. Rebuild a simplified version — start from the examples section rather than the finished artwork, since examples are written to be read.

The expected result is not a copy of the original sketch but a working piece of your own that uses the same underlying idea.

Supporting the project

The site includes a Donate page alongside the community section. Donations are presented as a way to support p5.js development. The page does not state specific amounts, tiers, or what a donation includes, so check the Donate page directly if you want those details before contributing.

Common sticking points

• The gallery is inspiration, not documentation. Sketches are shown as screenshots with creator credits; they are not presented as annotated source code.
• Community work spans many skill levels. Some pieces rely on techniques well beyond beginner material, so match what you study to your current comfort with JavaScript.
• Donation terms are not summarized on the homepage. If cost, recurring status, or processing details matter to you, read the Donate page itself rather than assuming.

p5.js is a JavaScript library for creative coding, and you can get it in two ways: download the library files from the official site, or link to a hosted copy (CDN) in your HTML. For most beginners and quick sketches, the CDN route is fastest because there is nothing to manage locally. Downloading is useful when you want an offline copy, a fixed version, or to work without an internet connection. Either way, you end up with a p5.js file loaded into an HTML page, and then you write your sketch in JavaScript.

Getting p5.js

The official site, p5js.org, provides a Download entry on its homepage. From there you obtain the library file you will include in your project.

You have two practical options:

The site also links to the library reference and examples, which are the two resources you will use most once the library is loaded.

Using p5.js in an HTML page

A p5.js project is just an HTML file plus your sketch code. The library must be loaded before your sketch runs.

Step 1: Create an HTML file

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>My p5.js sketch</title>
    <!-- Load p5.js here -->
  </head>
  <body>
    <!-- Your sketch code goes here -->
  </body>
</html>

Step 2: Load the library

If you downloaded p5.js, reference the local file:

<script src="p5.js"></script>

If you are using a CDN, reference the hosted URL instead. The exact URL depends on the version you choose, so copy the current link from the official site rather than guessing it.

Step 3: Write your sketch

p5.js sketches define two functions: setup() runs once, and draw() runs repeatedly.

<script>
  function setup() {
    createCanvas(400, 400);
  }

  function draw() {
    background(220);
    circle(200, 200, 100);
  }
</script>

Expected result: opening the HTML file in a browser shows a 400×400 canvas with a gray background and a circle drawn in the center.

Verifying it works

• The canvas appears in the page at the size you passed to createCanvas().
• draw() runs continuously, so anything you animate updates frame by frame.
• If nothing appears, check the browser console: a failed script load or a typo in a function name will show up there.

Common sticking points

• Script order. Your sketch code must come after the p5.js <script> tag, or createCanvas and the other p5.js functions will not exist yet.
• File path. If you downloaded p5.js, the src path must match where the file actually sits relative to your HTML file.
• One canvas per sketch. Calling createCanvas() more than once creates multiple canvases; keep it in setup().
• Version drift. A CDN link points at whatever version that URL serves. If you need reproducible behavior, download a specific version instead.

Where to go next

Once the library loads, the official reference documents every function, and the examples show complete working sketches you can read and modify. Starting from a small example and changing one value at a time is the quickest way to confirm your setup is correct before writing a sketch from scratch.

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