This example has 3 files:

  • hello_p5.js: your p5 sketch
  • hello_p5.html: your webpage
  • p5.min.js: the p5 library

Your p5 sketch

p5 sketches look a lot like Processing sketches, except that they are written in Javascript.

hello_p5.js

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

let x = 50;

function draw() {
  background(0);
  ellipse(x, 200, 100, 50);
  x++;

  if (x > width+50) 
    x = -50;
}

Your webpage

Your webpage needs to load p5.min.js and hello_p5.js.

p5 will place the sketch inside the <main> element.

hello_p5.html

<html>
    <head>
        <script src="p5.min.js"></script>
        <script src="hello_p5.js"></script>
    </head>
    <body>
        The little dog laughed to see such sport,
        <main></main>
        and the dish ran away with the spoon.
    </body>
</html>

You can download p5.min.js from the p5 website:
[download page] [direct link]

As an alternative to keeping your own copy of p5.min.js, you can tell your webpage to load it from a Content Delivery Network (CDN):

<script src="https://cdn.jsdelivr.net/npm/p5@1.4.0/lib/p5.min.js"></script>