/** @jsxImportSource https://esm.sh/react */ import React, { useState, useRef, useEffect } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; function PotteryPlate({ radius, color, wobbliness, wobbleFrequency, wobbleIrregularity, rotation }) { const points = []; const centerX = 250; const centerY = 250; const numPoints = 180; const irregularities = Array.from({ length: wobbleFrequency }, () => Math.random() * 2 * Math.PI); for (let i = 0; i < numPoints; i++) { const angle = (i / numPoints) * 2 * Math.PI; let noise = 0; for (let j = 0; j < wobbleFrequency; j++) { const irregularAngle = (angle + irregularities[j] * wobbleIrregularity) % (2 * Math.PI); noise += Math.sin(irregularAngle * wobbleFrequency) * (wobbliness / wobbleFrequency); } const r = radius + noise; const x = r * Math.cos(angle); const y = r * Math.sin(angle); points.push(`${x},${y}`); } return ( ); } function App() { const [plate, setPlate] = useState(null); const [svgString, setSvgString] = useState(''); const svgRef = useRef(null); const textAreaRef = useRef(null); const addPlate = () => { const newPlate = { radius: 140 + Math.random() * 20, color: `hsl(${Math.random() * 360}, 70%, 75%)`, wobbliness: Math.random() * 15, wobbleFrequency: Math.floor(Math.random() * 8) + 2, wobbleIrregularity: Math.random(), rotation: Math.floor(Math.random() * 360), }; setPlate(newPlate); }; useEffect(() => { if (svgRef.current && plate) { const svgString = new XMLSerializer().serializeToString(svgRef.current); setSvgString(svgString); } }, [plate]); const copySVG = () => { if (!textAreaRef.current) return; textAreaRef.current.select(); try { document.execCommand('copy'); // alert('SVG code copied to clipboard! You can now paste it elsewhere.'); } catch (err) { // alert('Failed to copy SVG code. Please manually select and copy the text in the textarea.'); } }; const updatePlate = (key, value) => { if (plate) { setPlate({...plate, [key]: value}); } }; return (

Wobble Shape Generator

{plate && (

Color: updatePlate('color', e.target.value)} className="w-16 h-8" />

{['wobbliness', 'wobbleFrequency', 'wobbleIrregularity', 'rotation'].map((prop) => (

{prop.charAt(0).toUpperCase() + prop.slice(1)}: updatePlate(prop, Number(e.target.value))} className="w-48 mr-2" /> {prop === 'rotation' ? `${plate[prop]}°` : plate[prop].toFixed(prop === 'wobbleFrequency' ? 0 : 2)}

))}

)}

        <p className="mt-4 text-sm text-gray-500">
          <small>
            View source: <a href={import.meta.url.replace("esm.town", "val.town")} className="underline">val.town</a>
          </small>
        </p>
      </div>
    </div>
  );
}

function client() {
  createRoot(document.getElementById("root")).render(<App />);
}
if (typeof document !== "undefined") { client(); }

async function server(request: Request): Promise<Response> {
  return new Response(`
    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Wobble Shape Generator</title>
        <script src="https://cdn.tailwindcss.com"></script>
      </head>
      <body class="bg-gray-100">
        <div id="root" class="flex items-center justify-center min-h-screen"></div>
        <script src="https://esm.town/v/std/catch"></script>
        <script type="module" src="${import.meta.url}"></script>
      </body>
    </html>
  `,
  {
    headers: {
      "content-type": "text/html",
    },
  });
}

export default server;</article></body></html>

WobbleShapes