Tidy the demo examples (#515)

* Tidy the demo examples

* Formatting fixes

Author: jamesrweb

demo/app.jsx

@@ -1,22 +1,21 @@
 import React, { useCallback, useMemo, useState } from "react";
 import { createRoot } from "react-dom/client";
 
-import * as box from "./sketches/box";
-import * as plane from "./sketches/plane";
-import * as torus from "./sketches/torus";
 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 torus } from "./sketches/torus";
 
 function App() {
-  const sketches = useMemo(
-    () => [box.sketch, torus.sketch, plane.sketch],
-    [box, torus, plane]
-  );
+  const sketches = useMemo(() => [box, torus, plane], [box, torus, plane]);
+
   const [state, setState] = useState({
     rotation: 160,
-    sketch: box.sketch,
+    sketch: box,
     unmount: false
   });
+
   const onChangeSketch = useCallback(() => {
     setState(state => {
       const currentSketchIndex = sketches.findIndex(sketch => {
@@ -32,9 +31,11 @@ function App() {
       return { ...state, sketch };
     });
   }, [sketches]);
+
   const onMountStateChange = useCallback(() => {
     setState(state => ({ ...state, unmount: !state.unmount }));
   }, []);
+
   const onRotationChange = useCallback(
     event => {
       setState(state => ({

demo/sketches/capture.jsx

@@ -0,0 +1,30 @@
+import "p5.capture";
+
+export function sketch(p5) {
+  p5.setup = () => {
+    p5.createCanvas(300, 300);
+    p5.capture.initialize(p5);
+  };
+
+  p5.draw = () => {
+    if (p5.frameCount === 1) {
+      const capture = p5.capture.getInstance();
+      capture.start({
+        format: "gif",
+        duration: 100
+      });
+    }
+  };
+
+  p5.keyPressed = () => {
+    if (key === "c") {
+      const capture = p5.capture.getInstance();
+
+      if (capture.state === "idle") {
+        capture.start();
+      } else {
+        capture.stop();
+      }
+    }
+  };
+}

package.json

@@ -110,6 +110,7 @@
     "jiti": "^2.4.2",
     "js": "^0.1.0",
     "jsdom": "^26.1.0",
+    "p5.capture": "^1.6.0",
     "prettier": "^3.6.2",
     "react": "19.1.0",
     "react-dom": "19.1.0",