zipping up, copyright, defaults

Author: mathematicalmichael

seeded_svg_splotch_generator_single_page_app.tsx

@@ -20,7 +20,9 @@ import {
   Droplets,
   Info,
   Dices,
+  Package,
 } from "lucide-react";
+import JSZip from "jszip";
 
 /**
  * Seeded SVG Splotch Generator
@@ -515,10 +517,13 @@ function simulate(params: Params) {
   // inside the huge workingW buffer.
   const physW = displayW;
 
-  // For spray geometry, offset the center opposite to spray direction
+  // For spray and line geometry, offset the center opposite to spray direction
   // to compensate for the drift caused by spray magnitude
   let center = { x: workingW / 2, y: workingW / 2 };
-  if (params.geometry === "spray" && params.sprayMagnitude > 0) {
+  if (
+    (params.geometry === "spray" || params.geometry === "line") &&
+    params.sprayMagnitude > 0
+  ) {
     const ang = (params.sprayAngleDeg * Math.PI) / 180;
     // Offset opposite to spray direction, scaled by magnitude and physics size
     const offsetAmount = params.sprayMagnitude * physW * 0.35;
@@ -542,13 +547,21 @@ function simulate(params: Params) {
     }
 
     if (params.geometry === "line") {
+      const ang = (params.sprayAngleDeg * Math.PI) / 180;
+      const dir = { x: Math.cos(ang), y: Math.sin(ang) };
+      const perp = { x: -dir.y, y: dir.x };
+
       const t = rng.range(-0.5, 0.5);
-      const lineLen = physW * 0.22;
-      const p = add(center, {
-        x: t * lineLen,
-        y: rng.normal() * (physW * 0.02),
-      });
-      const v = { x: speed * rng.range(0.6, 1.3), y: rng.normal() * 0.2 };
+      // Magnitude controls line length (0 to 1.6 maps to 0 to ~0.35 of physW)
+      const lineLen = physW * (0.05 + params.sprayMagnitude * 0.19);
+      const alongOffset = t * lineLen;
+      const perpOffset = rng.normal() * (physW * 0.02);
+      const p = add(center, add(mul(dir, alongOffset), mul(perp, perpOffset)));
+
+      // Add directional velocity bias based on magnitude
+      const drift = params.sprayMagnitude * 1.8;
+      const baseSpeed = speed * rng.range(0.6, 1.3);
+      const v = add(mul(dir, drift + baseSpeed), mul(perp, rng.normal() * 0.2));
       return { p, v, vz };
     }
 
@@ -998,7 +1011,7 @@ const DEFAULT: Params = {
   sprayMagnitude: 0.0,
   sprayCovariance: 0.0,
 
-  strokes: 4,
+  strokes: 1,
   flingPower: 22,
   directionality: 0.78,
   anisotropy: 4.6,
@@ -1231,7 +1244,16 @@ if (typeof window !== "undefined") {
 }
 
 export default function App() {
-  const [p, setP] = useState<Params>(DEFAULT);
+  const [p, setP] = useState<Params>(() => {
+    // Set magnitude to 1 for line geometry by default
+    const initial = { ...DEFAULT };
+    if (initial.geometry === "line") {
+      initial.sprayMagnitude = 1.0;
+    }
+    return initial;
+  });
+  const [variations, setVariations] = useState<number>(1);
+  const [isGeneratingVariations, setIsGeneratingVariations] = useState(false);
   const dp = useDebounced(p, 250);
 
   // Check if we're waiting for debounce (params changed but not yet processed)
@@ -1305,6 +1327,126 @@ export default function App() {
     return `splotch_${safe}_${p.geometry}.svg`;
   }, [p.seed, p.geometry]);
 
+  // Helper function to generate SVG text for a given seed offset
+  const generateSvgForSeed = (seedOffset: number): string => {
+    const modifiedParams: Params = {
+      ...p,
+      seed: `${p.seed}-${seedOffset}`,
+    };
+
+    try {
+      const simResult = simulate(modifiedParams);
+      const size = p.svgSize;
+      const d = simResult.d;
+
+      const meta = {
+        seed: modifiedParams.seed,
+        geometry: modifiedParams.geometry,
+        packets: modifiedParams.packets,
+        fieldSize: modifiedParams.fieldSize,
+        threshold: modifiedParams.threshold,
+        smooth: modifiedParams.smooth,
+        blur: modifiedParams.blur,
+        viscosity: modifiedParams.viscosity,
+        restitution: modifiedParams.restitution,
+        drag: modifiedParams.drag,
+        impactSpread: modifiedParams.impactSpread,
+        smear: modifiedParams.smear,
+        noise: modifiedParams.noise,
+        baseRadius: modifiedParams.baseRadius,
+        radiusJitter: modifiedParams.radiusJitter,
+        sprayAngleDeg: modifiedParams.sprayAngleDeg,
+        sprayMagnitude: modifiedParams.sprayMagnitude,
+        sprayCovariance: modifiedParams.sprayCovariance,
+        strokes: modifiedParams.strokes,
+        flingPower: modifiedParams.flingPower,
+        directionality: modifiedParams.directionality,
+        anisotropy: modifiedParams.anisotropy,
+        tail: modifiedParams.tail,
+        tailDroplets: modifiedParams.tailDroplets,
+        panX: modifiedParams.panX,
+        panY: modifiedParams.panY,
+        userScale: modifiedParams.userScale,
+      };
+
+      const desc = `Generated by Seeded SVG Splotch Generator. Params: ${JSON.stringify(meta)}`;
+
+      const flip = p.invertY
+        ? ` transform="translate(0 ${size}) scale(1 -1)"`
+        : "";
+
+      return (
+        `<?xml version="1.0" encoding="UTF-8"?>\n` +
+        `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 ${size} ${size}">\n` +
+        `  <desc>${desc.replace(/</g, "&lt;").replace(/>/g, "&gt;")}</desc>\n` +
+        `  <g${flip}>\n` +
+        `    <path d="${d}" fill="#000" fill-rule="evenodd"/>\n` +
+        `  </g>\n` +
+        `</svg>\n`
+      );
+    } catch {
+      return "";
+    }
+  };
+
+  // Generate filename for a variation
+  const getVariationFilename = (index: number): string => {
+    const safe =
+      p.seed
+        .trim()
+        .replace(/[^a-zA-Z0-9_-]+/g, "-")
+        .slice(0, 40) || "splotch";
+    return `splotch_${safe}_${p.geometry}_v${index + 1}.svg`;
+  };
+
+  // Generate and download variations as zip
+  const handleDownloadVariations = async () => {
+    if (variations < 1 || variations > 100) {
+      alert("Please enter a number between 1 and 100");
+      return;
+    }
+
+    setIsGeneratingVariations(true);
+
+    try {
+      const zip = new JSZip();
+
+      // Generate all variations (offset seed by 1, 2, 3, etc.)
+      for (let i = 0; i < variations; i++) {
+        const svgText = generateSvgForSeed(i + 1);
+        if (svgText) {
+          const filename = getVariationFilename(i);
+          zip.file(filename, svgText);
+        }
+      }
+
+      // Generate zip file
+      const zipBlob = await zip.generateAsync({ type: "blob" });
+
+      // Download zip
+      const safe =
+        p.seed
+          .trim()
+          .replace(/[^a-zA-Z0-9_-]+/g, "-")
+          .slice(0, 40) || "splotch";
+      const zipFilename = `splotch_${safe}_${p.geometry}_variations.zip`;
+
+      const url = URL.createObjectURL(zipBlob);
+      const a = document.createElement("a");
+      a.href = url;
+      a.download = zipFilename;
+      document.body.appendChild(a);
+      a.click();
+      a.remove();
+      URL.revokeObjectURL(url);
+    } catch (error) {
+      console.error("Error generating variations:", error);
+      alert("Error generating variations. Please try again.");
+    } finally {
+      setIsGeneratingVariations(false);
+    }
+  };
+
   return (
     <div className="min-h-screen bg-gradient-to-b from-zinc-50 to-white">
       <div className="max-w-6xl mx-auto px-4 py-6">
@@ -1404,11 +1546,16 @@ export default function App() {
                           geometry: g,
                           packets: Math.min(Math.max(p.packets, 800), 1200),
                           fieldSize: Math.min(p.fieldSize, 220),
-                          strokes: Math.min(Math.max(p.strokes, 3), 6),
+                          strokes: 1,
                         });
                         return;
                       }
-                      setP({ ...p, geometry: g });
+                      setP({
+                        ...p,
+                        geometry: g,
+                        // Set magnitude to 1 for line geometry by default
+                        sprayMagnitude: g === "line" ? 1.0 : p.sprayMagnitude,
+                      });
                     }}
                   >
                     <SelectTrigger className="rounded-xl">
@@ -1464,11 +1611,11 @@ export default function App() {
 
                 <div className="pt-2 border-t" />
 
-                {p.geometry === "spray" && (
+                {(p.geometry === "spray" || p.geometry === "line") && (
                   <>
                     <Row
-                      label={`Spray direction (${Math.round(p.sprayAngleDeg)}°)`}
-                      help="Direction of the spray bias (adds a dominant direction without expensive fling simulation)."
+                      label={`Direction (${Math.round(p.sprayAngleDeg)}°)`}
+                      help="Direction of the bias (adds a dominant direction without expensive fling simulation)."
                     >
                       <Slider
                         value={[p.sprayAngleDeg]}
@@ -1482,8 +1629,12 @@ export default function App() {
                     </Row>
 
                     <Row
-                      label={`Spray magnitude (${p.sprayMagnitude.toFixed(2)})`}
-                      help="Strength of the directional drift and mean shift. Higher = more fling-like throw."
+                      label={`Magnitude (${p.sprayMagnitude.toFixed(2)})`}
+                      help={
+                        p.geometry === "line"
+                          ? "Controls the length of the line. Higher = longer line."
+                          : "Strength of the directional drift and mean shift. Higher = more fling-like throw."
+                      }
                     >
                       <Slider
                         value={[p.sprayMagnitude]}
@@ -1495,7 +1646,11 @@ export default function App() {
                         }
                       />
                     </Row>
+                  </>
+                )}
 
+                {p.geometry === "spray" && (
+                  <>
                     <Row
                       label={`Spray covariance (${p.sprayCovariance.toFixed(2)})`}
                       help="Anisotropy of the spray cloud. Higher = stretched distribution along the spray direction."
@@ -1702,9 +1857,10 @@ export default function App() {
                     Reset all
                   </Button>
                   <div className="text-xs text-muted-foreground leading-relaxed">
-                    Tips: If you get &quot;no contour&quot;, lower <b>Threshold</b> or
-                    increase <b>Packets</b>/<b>Base radius</b>. Higher{" "}
-                    <b>Field res</b> yields more detail.
+                    Tips: If you get &quot;no contour&quot;, lower{" "}
+                    <b>Threshold</b> or increase <b>Packets</b>/
+                    <b>Base radius</b>. Higher <b>Field res</b> yields more
+                    detail.
                   </div>
                 </div>
               </CardContent>
@@ -1767,8 +1923,8 @@ export default function App() {
                 </Row>
 
                 <div className="text-xs text-muted-foreground">
-                  Manual placement is always on. It&apos;s OK if the blob goes out of
-                  frame — adjust Pan/Scale to compose it.
+                  Manual placement is always on. It&apos;s OK if the blob goes
+                  out of frame — adjust Pan/Scale to compose it.
                 </div>
               </CardContent>
             </Card>
@@ -1876,6 +2032,43 @@ export default function App() {
                   </pre>
                 </details>
 
+                <div className="flex items-center gap-3 pt-2 border-t">
+                  <div className="flex-1">
+                    <Label htmlFor="variations" className="text-xs">
+                      Number of variations
+                    </Label>
+                    <Input
+                      id="variations"
+                      type="number"
+                      min="1"
+                      max="100"
+                      value={variations}
+                      onChange={(e) => {
+                        const val = parseInt(e.target.value, 10);
+                        if (!isNaN(val) && val >= 1 && val <= 100) {
+                          setVariations(val);
+                        }
+                      }}
+                      className="mt-1"
+                      disabled={isGeneratingVariations}
+                    />
+                  </div>
+                  <div className="flex items-end">
+                    <Button
+                      onClick={handleDownloadVariations}
+                      className="rounded-2xl"
+                      disabled={
+                        !result.d || isGeneratingVariations || variations < 1
+                      }
+                    >
+                      <Package className="h-4 w-4 mr-2" />
+                      {isGeneratingVariations
+                        ? "Generating..."
+                        : "Download ZIP"}
+                    </Button>
+                  </div>
+                </div>
+
                 <div className="text-xs text-muted-foreground">
                   The export is a single <code>&lt;path&gt;</code> using{" "}
                   <code>fill-rule=&quot;evenodd&quot;</code>.
@@ -1897,6 +2090,20 @@ export default function App() {
             Changing any slider changes output deterministically.
           </motion.div>
         </AnimatePresence>
+
+        <footer className="mt-12 pt-6 border-t text-center text-xs text-muted-foreground space-y-1">
+          <div>© 2026 Mind the Math LLC</div>
+          <div>
+            <a
+              href="https://github.com/mindthemath/splotch"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="hover:text-foreground transition-colors underline"
+            >
+              github.com/mindthemath/splotch
+            </a>
+          </div>
+        </footer>
       </div>
     </div>
   );