docs: add new demos

package.json

@@ -4,7 +4,7 @@
   "version": "0.0.1",
   "private": true,
   "packageManager": "[email protected]",
-  "description": "Flow wallpaper creator.",
+  "description": "A library for creating patterns quickly and easily",
   "author": {
     "name": "Cole",
     "email": "[email protected]"

packages/core/package.json

@@ -3,7 +3,7 @@
   "type": "module",
   "version": "0.0.1",
   "packageManager": "[email protected]",
-  "description": "Flow wallpaper creator.",
+  "description": "A library for creating patterns quickly and easily",
   "author": {
     "name": "Cole",
     "email": "[email protected]",

packages/react/package.json

@@ -3,7 +3,7 @@
   "type": "module",
   "version": "0.0.1",
   "packageManager": "[email protected]",
-  "description": "Flow wallpaper creator.",
+  "description": "React port for backmoji",
   "author": {
     "name": "Cole",
     "email": "[email protected]",

packages/vue/package.json

@@ -3,7 +3,7 @@
   "type": "module",
   "version": "0.0.1",
   "packageManager": "[email protected]",
-  "description": "Flow wallpaper creator.",
+  "description": "Vue port for backmoji",
   "author": {
     "name": "Cole",
     "email": "[email protected]",

playground/src/components/Welcome.astro

@@ -2,10 +2,11 @@
 import Badge from "./Badge.astro";
 ---
 
-<section class="h-screen flex flex-col items-center justify-center">
+<section class="h-100dvh h-screen flex flex-col items-center justify-center px-4">
   <h1 class="h1">
     Backmoji
   </h1>
+  <h3 class="my-3 text-center md:my-5 h3">A library for creating patterns quickly and easily</h3>
   <div class="mt-2 flex gap-3">
     <Badge type="npm"></Badge>
     <Badge type="github"></Badge>

playground/src/demos/AnimationPattern.astro

@@ -0,0 +1,81 @@
+<div id="demo-animation-pattern" class="relative h-full w-full overflow-hidden rounded-md bg-orange-50"></div>
+
+<script>
+import { backmoji, createImageRenderer } from "backmoji";
+import { animate } from "@/utils/animation";
+import Paw from "/paw.svg?url";
+
+const { play, setCallback, getTimestamp, stat } = animate({
+  speed: 0.3,
+});
+
+const canvas = document.createElement("canvas");
+const parent = document.querySelector<HTMLDivElement>("#demo-animation-pattern")!;
+
+function loadImage(url: string) {
+  const image = new Image();
+  image.src = url;
+  return new Promise<HTMLImageElement>((resolve) => {
+    image.onload = () => resolve(image);
+  });
+}
+
+async function createRenderer() {
+  return createImageRenderer(await loadImage(Paw), {
+    customRender({ ctx, item, renderItemWidth, renderItemHeight, rowGap, columnGap, columnCount, rowCount }) {
+      for (let rowIndex = 0; rowIndex < rowCount; rowIndex++) {
+        let from: number, to: number;
+        if (rowIndex % 2 === 0) {
+          from = -2;
+          to = columnCount;
+        } else {
+          from = 0;
+          to = columnCount + 2;
+        }
+        for (let columnIndex = from; columnIndex < to; columnIndex++) {
+          let offset = getTimestamp();
+          offset = offset % (2 * (renderItemWidth + columnGap));
+          const x = columnIndex * (renderItemWidth + columnGap) + (rowIndex % 2 === 0 ? 1 : -1) * offset;
+          const y = rowIndex * (renderItemHeight + rowGap);
+          if ((columnIndex - rowIndex) % 2 === 0) {
+            ctx.drawImage(item, x, y, renderItemWidth, renderItemHeight);
+          }
+        }
+      }
+    },
+  });
+}
+
+const height = 300;
+const { render, setSize } = backmoji(canvas, createRenderer(), {
+  degree: 30,
+});
+
+function animationCb() {
+  const ctx = canvas.getContext("2d")!;
+  const w = canvas.width;
+  const h = canvas.height;
+  ctx.clearRect(0, 0, w, h);
+  render();
+}
+
+setCallback(animationCb);
+
+const observer = new ResizeObserver((entries) => {
+  for (const entry of entries) {
+    setSize(entry.contentRect.width, height);
+    render();
+  }
+});
+observer.observe(parent);
+
+parent.appendChild(canvas);
+const statDom = stat.dom;
+statDom.style.position = "absolute";
+statDom.style.top = "0";
+statDom.style.right = "0";
+statDom.style.left = "unset";
+parent.appendChild(statDom);
+
+play();
+</script>

playground/src/demos/CustomPattern.astro

@@ -0,0 +1,55 @@
+<div id="demo-custom-pattern" class="h-full w-full overflow-hidden rounded-md bg-orange-50"></div>
+
+<script>
+import { backmoji, createImageRenderer } from "backmoji";
+import JSLogo from "/javascript.png?url";
+
+const canvas = document.createElement("canvas");
+const parent = document.querySelector<HTMLDivElement>("#demo-custom-pattern")!;
+
+function loadImage(url: string) {
+  const image = new Image();
+  image.src = url;
+  return new Promise<HTMLImageElement>((resolve) => {
+    image.onload = () => resolve(image);
+  });
+}
+
+async function createRenderer() {
+  return createImageRenderer(await loadImage(JSLogo), {
+    customRender({ ctx, item, renderItemWidth, renderItemHeight, rowGap, columnGap, columnCount, rowCount }) {
+      for (let rowIndex = 0; rowIndex < rowCount; rowIndex++) {
+        let from: number, to: number;
+        if (rowIndex % 2 === 0) {
+          from = -2;
+          to = columnCount;
+        } else {
+          from = 0;
+          to = columnCount + 2;
+        }
+        for (let columnIndex = from; columnIndex < to; columnIndex++) {
+          const x = columnIndex * (renderItemWidth + columnGap);
+          const y = rowIndex * (renderItemHeight + rowGap);
+          if ((columnIndex - rowIndex) % 2 === 0) {
+            ctx.drawImage(item, x, y, renderItemWidth, renderItemHeight);
+          }
+        }
+      }
+    },
+  });
+}
+
+const height = 300;
+const { render, setSize } = backmoji(canvas, createRenderer());
+
+const observer = new ResizeObserver((entries) => {
+  for (const entry of entries) {
+    setSize(entry.contentRect.width, height);
+    render();
+  }
+});
+observer.observe(parent);
+
+parent.appendChild(canvas);
+render();
+</script>

playground/src/demos/EmojiPattern.astro

@@ -0,0 +1,31 @@
+<div id="demo-emoji-pattern" class="h-full w-full overflow-hidden rounded-md bg-orange-50"></div>
+
+<script>
+import { backmoji, createTextRenderer } from "backmoji";
+
+const parent = document.querySelector<HTMLDivElement>("#demo-emoji-pattern")!;
+const canvas = document.createElement("canvas");
+
+const renderer = createTextRenderer("👌", {
+  font: "30px Aria",
+});
+const height = 160;
+const { render, setSize } = backmoji(canvas, renderer, {
+  degree: -45,
+  rowGap: 50,
+  columnGap: 40,
+});
+
+setSize(parent.clientWidth, height);
+
+const observer = new ResizeObserver((entries) => {
+  for (const entry of entries) {
+    setSize(entry.contentRect.width, height);
+    render();
+  }
+});
+observer.observe(parent);
+
+parent.appendChild(canvas);
+render();
+</script>

playground/src/demos/ImagePattern.astro

@@ -1,55 +1,26 @@
 <div id="demo-image-pattern" class="h-full w-full overflow-hidden rounded-md bg-orange-50"></div>
 
 <script>
-import { type Renderer, backmoji, createImageRenderer } from "backmoji";
-import Avatar from "/avatar.png?url";
+import { backmoji, createImageRenderer } from "backmoji";
+import JSLogo from "/javascript.png?url";
 
 const canvas = document.createElement("canvas");
 const parent = document.querySelector<HTMLDivElement>("#demo-image-pattern")!;
 
-function loadImage() {
+function loadImage(url: string) {
+  const image = new Image();
+  image.src = url;
   return new Promise<HTMLImageElement>((resolve) => {
-    const image = document.createElement("img");
-    image.onload = () => {
-      resolve(image);
-    };
-    image.src = Avatar;
-    image.width = 200;
-    image.height = 200;
+    image.onload = () => resolve(image);
   });
 }
 
-function createRenderer() {
-  return new Promise<Renderer>(async (resolve) => {
-    const img = await loadImage();
-    const renderer = createImageRenderer(img, {
-      customRender({ ctx, item, renderItemWidth, renderItemHeight, rowGap, columnGap, columnCount, rowCount }) {
-        for (let rowIndex = 0; rowIndex < rowCount; rowIndex++) {
-          let from: number, to: number;
-          if (rowIndex % 2 === 0) {
-            from = -2;
-            to = columnCount;
-          } else {
-            from = 0;
-            to = columnCount + 2;
-          }
-          for (let columnIndex = from; columnIndex < to; columnIndex++) {
-            const x = columnIndex * (renderItemWidth + columnGap);
-            const y = rowIndex * (renderItemHeight + rowGap);
-            if ((columnIndex - rowIndex) % 2 === 0) {
-              ctx.drawImage(item, x, y, renderItemWidth, renderItemHeight);
-            }
-          }
-        }
-      },
-    });
-    resolve(renderer);
-  });
+async function createRenderer() {
+  return createImageRenderer(await loadImage(JSLogo));
 }
 
 const height = 300;
-const renderer = createRenderer();
-const { render, setSize } = backmoji(canvas, renderer, {
+const { render, setSize } = backmoji(canvas, createRenderer(), {
   degree: -30,
   rowGap: 50,
   columnGap: 60,

playground/src/demos/TextPattern.astro

@@ -0,0 +1,31 @@
+<div id="demo-text-pattern" class="h-full w-full overflow-hidden rounded-md bg-orange-50"></div>
+
+<script>
+import { backmoji, createTextRenderer } from "backmoji";
+
+const parent = document.querySelector<HTMLDivElement>("#demo-text-pattern")!;
+const canvas = document.createElement("canvas");
+
+const renderer = createTextRenderer("Hello World!", {
+  font: "30px Aria",
+});
+const height = 160;
+const { render, setSize } = backmoji(canvas, renderer, {
+  degree: -45,
+  rowGap: 50,
+  columnGap: 40,
+});
+
+setSize(parent.clientWidth, height);
+
+const observer = new ResizeObserver((entries) => {
+  for (const entry of entries) {
+    setSize(entry.contentRect.width, height);
+    render();
+  }
+});
+observer.observe(parent);
+
+parent.appendChild(canvas);
+render();
+</script>

playground/src/demos/WithReact.tsx

@@ -1,7 +1,6 @@
 import { useBackmoji, useImageLoader, useImageRenderer } from "@backmoji/react";
-import ReactLogo from "/react.svg?url";
 import { useEffect, useRef, useState } from "react";
-import { useResizeObserver } from "../hooks/useResizeObserver";
+import ReactLogo from "/react.svg?url";
 
 export function WithReact() {
   const canvasRef = useRef<HTMLCanvasElement>(null);
@@ -13,29 +12,17 @@ export function WithReact() {
 
   const img = useImageLoader(ReactLogo);
   const renderer = useImageRenderer(img);
-  const { render, setSize } = useBackmoji(canvasRef, renderer, {
+  const { render } = useBackmoji(canvasRef, renderer, {
     rowGap: 15,
-    columnGap: 30,
-  });
-  const divRef = useResizeObserver<HTMLDivElement>((entries) => {
-    for (const entry of entries) {
-      const { width, height } = entry.contentRect;
-      setSize(width, height);
-      render();
-    }
+    columnGap: 20,
+    degree: 30,
   });
 
   useEffect(() => {
     if (mounted) {
-      const div = divRef.current!;
-      setSize(div.clientWidth, 150);
       render();
     }
-  }, [mounted, render, setSize]);
+  }, [mounted, render]);
 
-  return (
-    <div ref={divRef} className="rounded-md bg-orange-50">
-      <canvas ref={canvasRef}></canvas>
-    </div>
-  );
+  return <canvas ref={canvasRef}></canvas>;
 }

playground/src/demos/WithVanilla.astro

@@ -0,0 +1,29 @@
+<div id="demo-usage"></div>
+
+<script>
+import { backmoji, createImageRenderer } from "backmoji";
+import JSLogo from "/javascript.png?url";
+
+const div = document.querySelector<HTMLDivElement>("#demo-usage")!;
+const canvas = document.createElement("canvas");
+div.appendChild(canvas);
+
+async function loadImage(url: string) {
+  const image = new Image();
+  image.src = url;
+  return new Promise<HTMLImageElement>(resolve => {
+    image.onload = () => resolve(image);
+  })
+}
+
+async function createRenderer() {
+  return createImageRenderer(await loadImage(JSLogo));
+}
+
+const { render } = backmoji(canvas, createRenderer(), {
+  rowGap: 15,
+  columnGap: 20,
+  degree: 30,
+});
+render();
+</script>