Add p5.record example (#520)

Author: jamesrweb

demo/app.jsx

@@ -5,14 +5,18 @@ import { ReactP5Wrapper } from "../src/main.tsx";
 import "./demo.css";
 import { sketch as box } from "./sketches/box";
 import { sketch as plane } from "./sketches/plane";
+import { sketch as record } from "./sketches/record";
 import { sketch as torus } from "./sketches/torus";
 
 function App() {
-  const sketches = useMemo(() => [box, torus, plane], [box, torus, plane]);
+  const sketches = useMemo(
+    () => [box, torus, plane, record],
+    [box, torus, plane, record]
+  );
 
   const [state, setState] = useState({
     rotation: 160,
-    sketch: box,
+    sketch: record,
     unmount: false
   });
 
@@ -58,6 +62,14 @@ function App() {
   return (
     <>
       <ReactP5Wrapper sketch={state.sketch} rotation={state.rotation} />
+      {state.sketch === record && (
+        <div style={{ marginTop: "1rem", marginBottom: "1rem" }}>
+          <button id="start-recording">Start Recording</button>
+          <button id="stop-recording">Stop Recording</button>
+          <button id="pause-recording">Pause Recording</button>
+          <button id="resume-recording">Resume Recording</button>
+        </div>
+      )}
       <input
         type="range"
         defaultValue={state.rotation}

demo/sketches/record.jsx

@@ -0,0 +1,43 @@
+import * as record from "p5.record.js";
+
+export function sketch(p5) {
+  let recording;
+
+  p5.setup = () => {
+    const canvas = p5.createCanvas(400, 400);
+    p5.background(200);
+
+    recording = new record.Recorder({
+      frameRate: 60,
+      source: canvas.elt
+    });
+
+    const startBtn = p5.select("#start-recording");
+    startBtn.mouseClicked(() => recording.start());
+
+    const stopBtn = p5.select("#stop-recording");
+    stopBtn.mouseClicked(() => recording.stop());
+
+    const pauseBtn = p5.select("#pause-recording");
+    pauseBtn.mouseClicked(() => recording.pause());
+
+    const resumeBtn = p5.select("#resume-recording");
+    resumeBtn.mouseClicked(() => recording.resume());
+  };
+
+  p5.draw = () => {
+    p5.line(p5.mouseX, p5.mouseY, p5.pmouseX, p5.pmouseY);
+  };
+
+  p5.keyPressed = () => {
+    if (p5.key === "a") {
+      recording.start();
+    } else if (p5.key === "s") {
+      recording.stop();
+    } else if (p5.key === "d") {
+      recording.pause();
+    } else if (p5.key === "f") {
+      recording.resume();
+    }
+  };
+}

package.json

@@ -89,35 +89,36 @@
   "devDependencies": {
     "@babel/eslint-plugin": "^7.27.1",
     "@eslint/compat": "^1.3.1",
-    "@eslint/js": "^9.30.1",
+    "@eslint/js": "^9.32.0",
     "@testing-library/jest-dom": "6.6.3",
     "@testing-library/react": "^16.3.0",
     "@trivago/prettier-plugin-sort-imports": "^5.2.2",
     "@types/jest": "^30.0.0",
-    "@types/node": "^24.0.10",
+    "@types/node": "^24.1.0",
     "@types/p5": "^1.7.6",
-    "@types/react": "^19.1.8",
-    "@types/react-dom": "^19.1.6",
-    "@typescript-eslint/eslint-plugin": "^8.35.1",
-    "@vitejs/plugin-react": "^4.6.0",
+    "@types/react": "^19.1.9",
+    "@types/react-dom": "^19.1.7",
+    "@typescript-eslint/eslint-plugin": "^8.38.0",
+    "@vitejs/plugin-react": "^4.7.0",
     "@vitest/coverage-v8": "^3.2.4",
     "babel-plugin-react-compiler": "19.1.0-rc.2",
-    "eslint": "^9.30.1",
+    "eslint": "^9.32.0",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-compiler": "19.1.0-rc.2",
     "eslint-plugin-react-hooks": "^5.2.0",
     "gh-pages": "^6.3.0",
-    "jiti": "^2.4.2",
+    "jiti": "^2.5.1",
     "js": "^0.1.0",
     "jsdom": "^26.1.0",
     "p5.capture": "^1.6.0",
+    "p5.record.js": "^0.2.0",
     "prettier": "^3.6.2",
     "react": "19.1.0",
     "react-dom": "19.1.0",
     "rimraf": "^6.0.1",
     "typescript": "^5.8.3",
-    "typescript-eslint": "^8.35.1",
-    "vite": "^7.0.2",
+    "typescript-eslint": "^8.38.0",
+    "vite": "^7.0.6",
     "vite-plugin-dts": "^4.5.4",
     "vitest": "^3.2.4",
     "vitest-canvas-mock": "^0.3.3"