p5

docs/lib/p5.md

@@ -0,0 +1,45 @@
+---
+index: true
+---
+
+# p5.js
+
+[p5.js](https://p5js.org) 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.
+
+```js echo
+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:
+
+```js run=false
+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.
+
+```js run=false
+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;
+}
+```

src/client/stdlib/p5.js

@@ -0,0 +1,13 @@
+import P5 from "npm:p5";
+
+export default 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;
+}

src/client/stdlib/recommendedLibraries.js

@@ -13,6 +13,7 @@ export const Inputs = () => import("npm:@observablehq/inputs");
 export const L = () => import("npm:leaflet");
 export const mapboxgl = () => import("npm:mapbox-gl").then((module) => module.default);
 export const mermaid = () => import("observablehq:stdlib/mermaid").then((mermaid) => mermaid.default);
+export const p5 = () => import("observablehq:stdlib/p5").then((p5) => p5.default);
 export const Plot = () => import("npm:@observablehq/plot");
 export const sql = () => import("observablehq:stdlib/duckdb").then((duckdb) => duckdb.sql);
 export const SQLite = () => import("observablehq:stdlib/sqlite").then((sqlite) => sqlite.default);

src/libraries.ts

@@ -26,6 +26,7 @@ export function getImplicitInputImports(inputs: Iterable<string>): Set<string> {
   if (set.has("L")) implicits.add("npm:leaflet");
   if (set.has("mapboxgl")) implicits.add("npm:mapbox-gl");
   if (set.has("mermaid")) implicits.add("npm:@observablehq/mermaid");
+  if (set.has("p5")) implicits.add("observablehq:stdlib/p5");
   if (set.has("Plot")) implicits.add("npm:@observablehq/plot");
   if (set.has("SQLite") || set.has("SQLiteDatabaseClient")) implicits.add("npm:@observablehq/sqlite");
   if (set.has("tex")) implicits.add("npm:@observablehq/tex");
@@ -159,6 +160,7 @@ export function getImplicitDependencies(imports: Iterable<string>): Set<string>
   if (set.has("npm:@observablehq/tex")) implicits.add("npm:katex");
   if (set.has("npm:@observablehq/xlsx")) implicits.add("npm:exceljs");
   if (set.has("npm:@observablehq/zip")) implicits.add("npm:jszip");
+  if (set.has("observablehq:stdlib/p5")) implicits.add("npm:p5");
   if (set.has("observablehq:stdlib/vega-lite")) implicits.add("npm:vega-lite-api").add("npm:vega-lite").add("npm:vega");
   if (set.has("observablehq:stdlib/vgplot")) implicits.add("npm:@uwdata/vgplot").add("npm:@observablehq/duckdb").add("npm:@duckdb/duckdb-wasm"); // prettier-ignore
   return implicits;