Japanese Giant Spider Crab

// 053 - Japanese Giant Spider Crab (creatures)
// 1:1 Original algorithm engine source
function createGiantSpiderCrab() {
  const SHELL_RINGS = 20;
  return {
    setup() {
    },
    render(context, timeState, params) {
      const { ctx, width, height } = context;
      const crawlSpeed = Number(params.gaitSpeed || 1.1);
      const legSpread = Number(params.legReach || 1.2);
      const t = timeState.time * crawlSpeed;
      ctx.fillStyle = "#020306";
      ctx.fillRect(0, 0, width, height);
      const cx = width * 0.5;
      const cy = height * 0.52 + Math.sin(t * 1.2) * 4;
      const crabScale = Math.min(width, height) / 520;
      ctx.save();
      ctx.globalCompositeOperation = "screen";
      const baseHue = (18 + Math.sin(t * 0.5) * 15) % 360;
      const seafloorY = cy + 130 * crabScale;
      ctx.beginPath();
      ctx.moveTo(0, seafloorY);
      ctx.lineTo(width, seafloorY);
      ctx.strokeStyle = "rgba(249, 115, 22, 0.25)";
      ctx.lineWidth = 1.6;
      ctx.stroke();
      for (let side = -1; side <= 1; side += 2) {
        for (let leg = 0; leg < 4; leg++) {
          const legPhase = t * 3.2 + leg * 0.9 + (side === 1 ? Math.PI : 0);
          const coxaX = cx + side * (35 * crabScale);
          const coxaY = cy + (leg - 1.5) * (14 * crabScale);
          const kneeLift = Math.sin(legPhase) * (24 * crabScale);
          const kneeX = coxaX + side * ((80 + leg * 14) * legSpread * crabScale);
          const kneeY = coxaY - (88 - leg * 12) * legSpread * crabScale + kneeLift;
          const elbowX = kneeX + side * ((68 + leg * 14) * legSpread * crabScale);
          const elbowY = coxaY + (28 + leg * 14) * legSpread * crabScale;
          const propX = elbowX + side * (32 * legSpread * crabScale);
          const propY = elbowY + 45 * crabScale;
          const groundReach = Math.cos(legPhase) * (20 * crabScale);
          const tipX = propX + side * (18 * legSpread * crabScale) + groundReach;
          const tipY = seafloorY;
          for (let str = -1; str <= 1; str++) {
            ctx.beginPath();
            ctx.moveTo(coxaX, coxaY);
            ctx.lineTo(kneeX + str * 2, kneeY);
            ctx.lineTo(elbowX + str * 2, elbowY);
            ctx.lineTo(propX, propY);
            ctx.lineTo(tipX, tipY);
            const legHue = (baseHue + leg * 8) % 360;
            ctx.strokeStyle = hsla(legHue, 95, 65, str === 0 ? 0.85 : 0.4);
            ctx.lineWidth = str === 0 ? 2.8 * crabScale : 1.2;
            ctx.stroke();
          }
          ctx.fillStyle = "#fde047";
          ctx.beginPath();
          ctx.arc(kneeX, kneeY, 3.8 * crabScale, 0, Math.PI * 2);
          ctx.arc(elbowX, elbowY, 3.2 * crabScale, 0, Math.PI * 2);
          ctx.arc(propX, propY, 2.6 * crabScale, 0, Math.PI * 2);
          ctx.arc(tipX, tipY, 2 * crabScale, 0, Math.PI * 2);
          ctx.fill();
        }
      }
      for (let r = 1; r <= SHELL_RINGS; r++) {
        const normR = r / SHELL_RINGS;
        const curW = 42 * normR * crabScale;
        const curH = 52 * normR * crabScale;
        ctx.beginPath();
        const steps = 48;
        for (let i = 0; i <= steps; i++) {
          const phi = i / steps * Math.PI * 2;
          const spine = Math.sin(phi * 8) > 0.6 ? 1.08 : 1;
          const px = cx + Math.cos(phi) * curW * spine;
          const py = cy + Math.sin(phi) * curH * spine;
          if (i === 0) ctx.moveTo(px, py);
          else ctx.lineTo(px, py);
        }
        ctx.closePath();
        const sHue = (baseHue + normR * 20) % 360;
        ctx.strokeStyle = hsla(sHue, 95, 65, 0.08 + normR * 0.35);
        ctx.lineWidth = r === SHELL_RINGS ? 2.4 * crabScale : 1;
        ctx.stroke();
        if (r % 4 === 0) {
          ctx.fillStyle = hsla(sHue, 90, 50, 0.05);
          ctx.fill();
        }
      }
      for (let side = -1; side <= 1; side += 2) {
        const armBaseX = cx + side * (20 * crabScale);
        const armBaseY = cy - 38 * crabScale;
        const clawReach = 78 * legSpread * crabScale;
        const elbowAngle = -Math.PI / 2 + side * 0.35 + Math.sin(t * 2 + side) * 0.18;
        const armElbowX = armBaseX + Math.cos(elbowAngle) * clawReach;
        const armElbowY = armBaseY + Math.sin(elbowAngle) * clawReach;
        const clawTipX = armElbowX + side * (38 * crabScale);
        const clawTipY = armElbowY - 45 * crabScale;
        ctx.beginPath();
        ctx.moveTo(armBaseX, armBaseY);
        ctx.lineTo(armElbowX, armElbowY);
        ctx.lineTo(clawTipX, clawTipY);
        ctx.strokeStyle = hsla(baseHue - 10, 100, 70, 0.9);
        ctx.lineWidth = 4.2 * crabScale;
        ctx.stroke();
        ctx.fillStyle = "#f87171";
        ctx.beginPath();
        ctx.arc(clawTipX, clawTipY, 5 * crabScale, 0, Math.PI * 2);
        ctx.fill();
      }
      ctx.restore();
    }
  };
}

// Default parameters from content metadata
const defaultParams = [
  {
    "key": "gaitSpeed",
    "label": "Deep Floor Stride Speed",
    "type": "range",
    "min": 0.4,
    "max": 2.2,
    "step": 0.1,
    "defaultValue": 1.1,
    "description": "8-legged walking gait tempo"
  },
  {
    "key": "legReach",
    "label": "Leg Span Reach",
    "type": "range",
    "min": 0.8,
    "max": 1.6,
    "step": 0.1,
    "defaultValue": 1.2,
    "description": "Arthropod leg length scaling"
  }
];

if (!window.__art_instances) window.__art_instances = {};
if (!window.__art_instances['giant-spider-crab']) {
  const inst = typeof createGiantSpiderCrab === 'function' ? createGiantSpiderCrab() : null;
  if (inst && inst.setup) {
    inst.setup({ ctx, width, height, dpr: 1, aspectRatio: width / height }, defaultParams);
  }
  window.__art_instances['giant-spider-crab'] = inst;
}

const instance = window.__art_instances['giant-spider-crab'];
if (instance && instance.render) {
  instance.render(
    { ctx, width, height, dpr: 1, aspectRatio: width / height },
    { time, deltaTime: dt, frameCount: Math.floor(time * 60), fps: 60 },
    defaultParams
  );
}