Physilinks/scenes.js

(() => {
  const { Bodies } = Matter;

  const scenes = [
    {
      id: "scene1",
      name: "Balanced (default)",
      config: {
        gravity: 0.88,
        spawnIntervalMs: 520,
        minChain: 3,
        palette: ["#ff595e", "#ffca3a", "#8ac926", "#1982c4", "#6a4c93"],
        ballRadius: 38,
        link: {
          stiffness: 0.85,
          lengthScale: 1.05,
          damping: 0.08,
          lineWidth: 3,
          rope: true,
          renderType: "line",
          maxLengthMultiplier: 3.2,
        },
      },
      createBodies: (w, h) => [
        Bodies.rectangle(w / 2, h + 40, w, 80, {
          isStatic: true,
          restitution: 0.8,
          render: { fillStyle: "#0ea5e9", strokeStyle: "#0ea5e9" },
        }),
        Bodies.rectangle(-40, h / 2, 80, h * 2, {
          isStatic: true,
          render: { fillStyle: "#f97316", strokeStyle: "#f97316" },
        }),
        Bodies.rectangle(w + 40, h / 2, 80, h * 2, {
          isStatic: true,
          render: { fillStyle: "#f97316", strokeStyle: "#f97316" },
        }),
        Bodies.rectangle(w * 0.25, h * 0.55, 160, 20, {
          isStatic: true,
          angle: -0.3,
          render: { fillStyle: "#22c55e", strokeStyle: "#22c55e" },
          plugin: { rotSpeed: 0.1 },
        }),
        Bodies.rectangle(w * 0.7, h * 0.4, 220, 24, {
          isStatic: true,
          angle: 0.26,
          render: { fillStyle: "#a855f7", strokeStyle: "#a855f7" },
          plugin: { rotSpeed: -0.08 },
        }),
      ],
    },
    {
      id: "scene2",
      name: "Low-G terraces",
      config: {
        gravity: 0.65,
        spawnIntervalMs: 600,
        minChain: 3,
        palette: ["#fb7185", "#fbbf24", "#34d399", "#38bdf8"],
        ballRadius: 22,
        link: {
          stiffness: 0.6,
          lengthScale: 1,
          damping: 0.01,
          lineWidth: 4,
          rope: false,
          renderType: "spring",
          maxLengthMultiplier: 4.7,
        },
      },
      createBodies: (w, h) => [
        Bodies.rectangle(w / 2, h + 50, w, 100, {
          isStatic: true,
          restitution: 0.9,
          render: { fillStyle: "#0ea5e9", strokeStyle: "#0ea5e9" },
        }),
        Bodies.rectangle(-50, h / 2, 100, h * 2, {
          isStatic: true,
          render: { fillStyle: "#fb7185", strokeStyle: "#fb7185" },
        }),
        Bodies.rectangle(w + 50, h / 2, 100, h * 2, {
          isStatic: true,
          render: { fillStyle: "#fb7185", strokeStyle: "#fb7185" },
        }),
        Bodies.rectangle(w * 0.2, h * 0.45, 200, 18, {
          isStatic: true,
          angle: 0.08,
          render: { fillStyle: "#fbbf24", strokeStyle: "#fbbf24" },
        }),
        Bodies.rectangle(w * 0.5, h * 0.6, 260, 18, {
          isStatic: true,
          angle: -0.04,
          render: { fillStyle: "#34d399", strokeStyle: "#34d399" },
        }),
        Bodies.rectangle(w * 0.8, h * 0.42, 180, 18, {
          isStatic: true,
          angle: 0.14,
          render: { fillStyle: "#38bdf8", strokeStyle: "#38bdf8" },
        }),
      ],
    },
    {
      id: "scene3",
      name: "Fast drop maze",
      config: {
        gravity: 1.25,
        spawnIntervalMs: 420,
        minChain: 3,
        palette: ["#e879f9", "#38bdf8", "#f97316", "#22c55e"],
        ballRadius: 16,
        link: {
          stiffness: 1,
          lengthScale: 0.85,
          damping: 0.15,
          lineWidth: 3,
          rope: false,
          renderType: "line",
          maxLengthMultiplier: 23.8,
        },
      },
      createBodies: (w, h) => {
        const bodies = [
          Bodies.rectangle(w / 2, h + 40, w, 80, {
            isStatic: true,
            restitution: 0.75,
            render: { fillStyle: "#0ea5e9", strokeStyle: "#0ea5e9" },
          }),
          Bodies.rectangle(-40, h / 2, 80, h * 2, {
            isStatic: true,
            render: { fillStyle: "#e879f9", strokeStyle: "#e879f9" },
          }),
          Bodies.rectangle(w + 40, h / 2, 80, h * 2, {
            isStatic: true,
            render: { fillStyle: "#e879f9", strokeStyle: "#e879f9" },
          }),
        ];
        for (let i = 0; i < 5; i += 1) {
          const x = (w * (i + 1)) / 6;
          const y = h * 0.35 + (i % 2 === 0 ? 40 : -30);
          bodies.push(
            Bodies.circle(x, y, 18, {
              isStatic: true,
              restitution: 0.9,
              render: { fillStyle: "#f97316", strokeStyle: "#f97316" },
            }),
          );
        }
        bodies.push(
          Bodies.rectangle(w * 0.3, h * 0.55, 140, 16, {
            isStatic: true,
            angle: -0.3,
            render: { fillStyle: "#38bdf8", strokeStyle: "#38bdf8" },
          }),
          Bodies.rectangle(w * 0.7, h * 0.58, 160, 16, {
            isStatic: true,
            angle: 0.28,
            render: { fillStyle: "#22c55e", strokeStyle: "#22c55e" },
          }),
        );
        return bodies;
      },
    },
  ];

  window.PhysilinksScenes = {
    scenes,
    defaultSceneId: scenes[0]?.id || "scene1",
  };
})();