Hello p5
This example has 3 files:
hello_p5.js
: your p5 sketchhello_p5.html
: your webpagep5.min.js
: the p5 library
Your p5 sketch
p5 sketches look a lot like Processing sketches, except that they are written in Javascript.
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.
<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>