Tweak relax scene soft blobs and spawn batches

scenes/scene-relax.js

@@ -1,5 +1,5 @@
 (() => {
-  const { Bodies } = Matter;
+  const { Bodies, Composites } = Matter;
   const scenes = (window.PhysilinksSceneDefs =
     window.PhysilinksSceneDefs || []);
 
@@ -16,7 +16,7 @@
       minChain: 2,
       palette: ["#38bdf8", "#f472b6", "#fbbf24", "#22c55e", "#a855f7"],
       ballRadius: 20,
-      blobBalls: true,
+      blobBalls: false,
       noGameOver: true,
       winCondition: {
         type: "timer",
@@ -38,6 +38,46 @@
       const wallHeight = h + wallThickness * 2;
       const floorHeight = Math.max(40, h * 0.08);
       const bumperRadius = Math.max(30, Math.min(w, h) * 0.04);
+      const makeSoft = (cx, cy, cols, rows, radius, color) => {
+        const particleOpts = {
+          friction: 0.02,
+          frictionStatic: 0.04,
+          restitution: 0.02,
+          render: { fillStyle: color, strokeStyle: color },
+          plugin: { draggable: true, nonLinkable: true },
+        };
+        const constraintOpts = {
+          stiffness: 0.08,
+          damping: 0.35,
+          render: { visible: false, type: "line", anchors: false },
+        };
+        const comp = Composites.softBody(
+          cx - cols * radius * 1.1,
+          cy - rows * radius * 1.1,
+          cols,
+          rows,
+          0,
+          0,
+          true,
+          radius,
+          particleOpts,
+          constraintOpts,
+        );
+        comp.bodies.forEach((b) => {
+          b.plugin = b.plugin || {};
+          b.plugin.draggable = true;
+          b.plugin.nonLinkable = true;
+        });
+        comp.constraints.forEach((c) => {
+          c.plugin = { soft: true };
+        });
+        return comp;
+      };
+
+      const softRadius = Math.max(18, w * 0.025);
+      const softA = makeSoft(w * 0.35, h * 0.4, 3, 3, softRadius, "#38bdf8");
+      const softB = makeSoft(w * 0.65, h * 0.55, 3, 3, softRadius, "#f472b6");
+
       return [
         Bodies.rectangle(
           w / 2,
@@ -84,6 +124,10 @@
           restitution: 1.05,
           render: { fillStyle: "#22c55e", strokeStyle: "#22c55e" },
         }),
+        ...softA.bodies,
+        ...softA.constraints,
+        ...softB.bodies,
+        ...softB.constraints,
       ];
     },
   });