Merge pull request #81 from cmpadden/feat/remove-p5js-dependency

Remove dependency on p5.js (moved to cmpadden/p5)

Author: cmpadden

components/ModelPreview.global.vue

@@ -1,9 +1,18 @@
 <template>
-  <div ref="container" class="h-64" />
+  <div class="relative h-64 w-full overflow-hidden border border-white/40">
+    <iframe
+      :src="iframeSrc"
+      class="h-full w-full"
+      loading="lazy"
+      referrerpolicy="no-referrer"
+      title="Embedded p5 model preview"
+    />
+  </div>
 </template>
 
 <script setup lang="ts">
-import { onBeforeUnmount, onMounted, ref } from "vue";
+import { computed } from "vue";
+const PLAYGROUND_ORIGIN = "https://cmpadden.github.io/p5";
 
 const props = withDefaults(
   defineProps<{
@@ -15,75 +24,29 @@ const props = withDefaults(
   },
 );
 
-const container = ref<HTMLElement | null>(null);
-let p5Instance: any = null;
-
-onMounted(async () => {
-  if (!container.value) {
-    return;
-  }
-
-  const { $p5 } = useNuxtApp();
-  const p5 = await $p5();
-  const host = container.value;
-
-  const sketch = (s: any) => {
-    let model;
-    let angle = 0;
-    let rotate = true;
-
-    const getSize = () => {
-      return {
-        width: host.clientWidth || 0,
-        height: host.clientHeight || 0,
-      };
-    };
-
-    s.preload = () => {
-      model = s.loadModel(props.path, true);
-    };
-
-    s.setup = () => {
-      const { width, height } = getSize();
-      s.createCanvas(width, height, s.WEBGL);
-    };
-
-    s.windowResized = () => {
-      const { width, height } = getSize();
-      s.resizeCanvas(width, height);
-    };
-
-    s.mouseClicked = () => {
-      rotate = false; // disable object rotation on click
-    };
-
-    s.draw = () => {
-      const bg = Number(props.backgroundColor ?? 100);
-
-      s.background(bg);
-      s.lights();
-
-      if (rotate) {
-        angle = s.frameCount * 0.005;
-      }
-
-      s.rotateX(angle);
-      s.rotateY(angle);
-      s.orbitControl();
-
-      if (model) {
-        s.model(model);
-      }
-    };
+const sanitizePath = (path: string) => {
+  const ensureAbsolute = (p: string) => {
+    const base = PLAYGROUND_ORIGIN.replace(/\/$/, "");
+    const suffix = p.startsWith("/") ? p : `/${p}`;
+    return `${base}${suffix}`;
   };
 
-  p5Instance = new p5(sketch, host);
-});
-
-onBeforeUnmount(() => {
-  if (p5Instance) {
-    p5Instance.remove?.();
-    p5Instance = null;
+  if (!path) {
+    return ensureAbsolute("/models/mac_mini_macbook_stand.stl");
+  }
+  if (/^https?:/i.test(path)) {
+    return path;
   }
+  return ensureAbsolute(path);
+};
+
+const iframeSrc = computed(() => {
+  const modelPath = sanitizePath(props.path);
+  const search = new URLSearchParams({
+    path: modelPath,
+    bg: String(props.backgroundColor ?? 100),
+  });
+  const viewerBase = `${PLAYGROUND_ORIGIN.replace(/\/$/, "")}/experiments/model-viewer.html`;
+  return `${viewerBase}?${search.toString()}`;
 });
 </script>

components/playground/Wave.vue

@@ -7,6 +7,8 @@ categories: ["examples"]
 
 Three-dimensional models, whether they be of the format `.obj` or `.stl`, can be easily rendered in your Nuxt project by using the [p5js.org](https://p5js.org/) library.
 
+> Update 2025: the interactive demos on this site now load the standalone [p5 playground](https://cmpadden.github.io/p5/) within an iframe. The component API described below still works when embedding the GitHub Pages build of that project.
+
 <!--more-->
 
 I've been using p5 for a while now to tinker and explore generative art, some of which can be found in the [/playground](/playground) section of this website. To use it with Nuxt, a [client-side plugin](https://github.com/cmpadden/cmpadden.github.io/blob/70ba674acdbe80c4a41b510a9b54edcddb19f489/plugins/p5.client.js) was created like so:

content/blog/nuxt-p5js-3d-models.md

@@ -2,7 +2,7 @@
   <main>
     <Header />
     <div class="container mx-auto h-screen bg-background font-display">
-      <div class="flex flex-col border-2 bg-white">
+      <div class="flex flex-col border-2">
         <slot />
       </div>
     </div>

layouts/light.vue

@@ -58,16 +58,21 @@ export default defineNuxtConfig({
   hooks: {
     // Generate HTML redirect files for `/articles/**` to `/blog/**`
     async 'close'() {
-      const { readdirSync, statSync } = await import('fs')
+      const { readdirSync, statSync, existsSync } = await import('fs')
       const distBlogPath = join(process.cwd(), 'dist', 'blog')
       const distArticlesPath = join(process.cwd(), 'dist', 'articles')
 
       try {
-        if (!statSync(distBlogPath).isDirectory()) {
+        if (!existsSync(distBlogPath)) {
           console.log('Blog directory not found, skipping redirect generation')
           return
         }
 
+        if (!statSync(distBlogPath).isDirectory()) {
+          console.log('Blog directory path is not a directory, skipping redirect generation')
+          return
+        }
+
         const blogDirs = readdirSync(distBlogPath, { withFileTypes: true })
           .filter(dirent => dirent.isDirectory())
           .map(dirent => dirent.name)

nuxt.config.ts

@@ -24,7 +24,6 @@
   },
   "dependencies": {
     "chords.ts": "^0.1.0",
-    "p5": "^1.11.7",
     "tailwindcss": "^3.4.17"
   },
   "packageManager": "pnpm@10.8.0+sha512.0e82714d1b5b43c74610193cb20734897c1d00de89d0e18420aebc5977fa13d780a9cb05734624e81ebd81cc876cd464794850641c48b9544326b5622ca29971"

package.json

@@ -3,11 +3,7 @@ definePageMeta({ layout: "light" });
 </script>
 
 <template>
-  <main class="flex h-[1024px] justify-center border-2 border-gray-500">
-    <iframe
-      src="https://cmpadden.github.io/conway/"
-      width="100%"
-      height="100%"
-    ></iframe>
-  </main>
+    <main class="bg-white flex h-[1024px] justify-center border-2 border-gray-500">
+        <iframe src="https://cmpadden.github.io/conway/" width="100%" height="100%"></iframe>
+    </main>
 </template>