p5.md

index
true

p5.js

p5.js is “a JavaScript library for creative coding, with a focus on making coding accessible and inclusive for artists, designers, educators, beginners, and anyone else!” p5.js is available by default as p5 in Markdown.

p5((p) => {
  const c = p.color("#dc3f74");
  p.setup = () => {
    p.createCanvas(640, 300);
    p.textAlign(p.CENTER);
    p.textFont("sans-serif");
    p.textStyle(p.BOLD);
  };
  p.draw = () => {
    p.translate((p.millis() / 10) % p.width, p.height / 2);
    p.clear();
    p.fill(c).textSize(100);
    p.text("p5.js", 0, 0);
  };
})

If you prefer, you can also import p5.js explicitly like so:

import P5 from "npm:p5";

You may also want the helper function below that defers the initialization of the sketch until the associated node is added to the DOM, and likewise removes the sketch (thereby terminating its associated animation loop) when the node is removed from the DOM.

function p5(sketch) {
  const node = document.createElement("div");
  Promise.resolve().then(() => {}).then(() => {
    const p = new P5(sketch, node);
    const draw = p.draw;
    p.draw = () => (node.isConnected ? draw.apply(p, arguments) : p.remove());
  });
  return node;
}