ƒ(x)
MATH.ART
228

Mathematical Crab

Decapod crustacean mechanics featuring eight-legged inverse kinematic walking gaits, an elliptic carapace with marginal spines, and articulated pinching chelae.

Playground
60 FPS • Canvas 2D
Click + Drag to interact with field
</>

Full Executable Algorithm Code 

// 027 - Mathematical Crab (creatures)
// 1:1 Original algorithm engine source
function createMathematicalCrab() {
  return {
    setup() {
    },
    render(context, timeState, params) {
      const { ctx, width, height } = context;
      const speed = Number(params.gaitSpeed || 1.4);
      const clawPinch = Number(params.clawPinch || 1);
      const t = timeState.time * speed;
      ctx.fillStyle = "#020409";
      ctx.fillRect(0, 0, width, height);
      const cx = width * 0.5;
      const cy = height * 0.52;
      const crabScale = Math.min(width, height) / 520;
      const rotY = Math.sin(t * 0.5) * 0.25;
      const rotX = 0.55 + Math.sin(t * 0.7) * 0.12;
      const rotZ = Math.sin(t * 0.5) * 0.08;
      ctx.save();
      ctx.globalCompositeOperation = "screen";
      const baseHue = (20 + Math.sin(t * 0.6) * 15) % 360;
      ctx.beginPath();
      for (let gx = -300; gx <= 300; gx += 60) {
        const p1 = project3D(gx * crabScale, 110 * crabScale, -300 * crabScale, rotX, rotY, rotZ, cx, cy, 450, 520);
        const p2 = project3D(gx * crabScale, 110 * crabScale, 300 * crabScale, rotX, rotY, rotZ, cx, cy, 450, 520);
        ctx.moveTo(p1.x, p1.y);
        ctx.lineTo(p2.x, p2.y);
      }
      for (let gz = -300; gz <= 300; gz += 60) {
        const p1 = project3D(-300 * crabScale, 110 * crabScale, gz * crabScale, rotX, rotY, rotZ, cx, cy, 450, 520);
        const p2 = project3D(300 * crabScale, 110 * crabScale, gz * crabScale, rotX, rotY, rotZ, cx, cy, 450, 520);
        ctx.moveTo(p1.x, p1.y);
        ctx.lineTo(p2.x, p2.y);
      }
      ctx.strokeStyle = "rgba(56, 189, 248, 0.12)";
      ctx.lineWidth = 1;
      ctx.stroke();
      for (let side = -1; side <= 1; side += 2) {
        for (let leg = 0; leg < 4; leg++) {
          const legPhase = t * 4 + leg * 0.85 + (side === 1 ? Math.PI : 0);
          const baseAngle = side * 0.35 + (leg - 1.5) * 0.25;
          const coxaX = side * (Math.cos(baseAngle) * 55 * crabScale);
          const coxaY = 0;
          const coxaZ = (leg - 1.5) * (26 * crabScale);
          const kneeLift = Math.sin(legPhase) * (22 * crabScale);
          const kneeReach = Math.cos(legPhase) * (26 * crabScale);
          const merusX = coxaX + side * ((52 + leg * 6) * crabScale) + kneeReach;
          const merusY = coxaY - (38 - leg * 4) * crabScale + kneeLift;
          const merusZ = coxaZ + (leg - 1.5) * (14 * crabScale);
          const carpusX = merusX + side * ((32 + leg * 4) * crabScale);
          const carpusY = merusY + (22 + leg * 3) * crabScale;
          const carpusZ = merusZ + 10 * crabScale;
          const dactylX = carpusX + side * (24 * crabScale);
          const dactylY = 110 * crabScale;
          const dactylZ = carpusZ + 15 * crabScale;
          const p1 = project3D(coxaX, coxaY, coxaZ, rotX, rotY, rotZ, cx, cy, 450, 520);
          const p2 = project3D(merusX, merusY, merusZ, rotX, rotY, rotZ, cx, cy, 450, 520);
          const p3 = project3D(carpusX, carpusY, carpusZ, rotX, rotY, rotZ, cx, cy, 450, 520);
          const p4 = project3D(dactylX, dactylY, dactylZ, rotX, rotY, rotZ, cx, cy, 450, 520);
          ctx.beginPath();
          ctx.moveTo(p1.x, p1.y);
          ctx.lineTo(p2.x, p2.y);
          ctx.lineTo(p3.x, p3.y);
          ctx.lineTo(p4.x, p4.y);
          const legHue = (baseHue + leg * 8) % 360;
          ctx.strokeStyle = hsla(legHue, 90, 65, 0.75 * p2.depth);
          ctx.lineWidth = Math.max(0.8, 2.8 * p2.depth);
          ctx.stroke();
          ctx.fillStyle = hsla(legHue + 20, 95, 80, 0.95);
          ctx.beginPath();
          ctx.arc(p2.x, p2.y, 3.2 * p2.depth, 0, Math.PI * 2);
          ctx.arc(p3.x, p3.y, 2.6 * p3.depth, 0, Math.PI * 2);
          ctx.arc(p4.x, p4.y, 2 * p4.depth, 0, Math.PI * 2);
          ctx.fill();
        }
      }
      for (let ring = 1; ring <= 10; ring++) {
        const normR = ring / 10;
        const curW = 75 * normR * crabScale;
        const curZ = 52 * normR * crabScale;
        const curY = -Math.sin(normR * Math.PI * 0.5) * (24 * crabScale);
        ctx.beginPath();
        const steps = 40;
        let avgDepth = 0;
        for (let i = 0; i <= steps; i++) {
          const theta = i / steps * Math.PI * 2;
          const rx = Math.cos(theta) * curW;
          const rz = Math.sin(theta) * curZ;
          const p = project3D(rx, curY, rz, rotX, rotY, rotZ, cx, cy, 450, 520);
          avgDepth += p.depth;
          if (i === 0) ctx.moveTo(p.x, p.y);
          else ctx.lineTo(p.x, p.y);
        }
        avgDepth /= steps + 1;
        ctx.strokeStyle = hsla(baseHue, 95, 68, (0.08 + normR * 0.3) * avgDepth);
        ctx.lineWidth = Math.max(0.8, (ring === 10 ? 2.2 : 1) * avgDepth);
        ctx.stroke();
      }
      for (let side = -1; side <= 1; side += 2) {
        const armBaseX = side * 50 * crabScale;
        const armBaseY = -5 * crabScale;
        const armBaseZ = -35 * crabScale;
        const merusX = armBaseX + side * (42 * crabScale);
        const merusY = armBaseY - 30 * crabScale;
        const merusZ = armBaseZ - 45 * crabScale;
        const clawX = merusX + side * (25 * crabScale);
        const clawY = merusY - 10 * crabScale;
        const clawZ = merusZ - 35 * crabScale;
        const pBase = project3D(armBaseX, armBaseY, armBaseZ, rotX, rotY, rotZ, cx, cy, 450, 520);
        const pMerus = project3D(merusX, merusY, merusZ, rotX, rotY, rotZ, cx, cy, 450, 520);
        const pClaw = project3D(clawX, clawY, clawZ, rotX, rotY, rotZ, cx, cy, 450, 520);
        ctx.beginPath();
        ctx.moveTo(pBase.x, pBase.y);
        ctx.lineTo(pMerus.x, pMerus.y);
        ctx.lineTo(pClaw.x, pClaw.y);
        ctx.strokeStyle = hsla(baseHue - 10, 95, 70, 0.85 * pClaw.depth);
        ctx.lineWidth = Math.max(1.2, 4.5 * pClaw.depth);
        ctx.stroke();
        const pinch = (0.35 + 0.25 * Math.sin(t * 3 + side)) * clawPinch;
        const pDactylTip = project3D(clawX + side * 15 * crabScale, clawY - 18 * pinch * crabScale, clawZ - 25 * crabScale, rotX, rotY, rotZ, cx, cy, 450, 520);
        const pPollexTip = project3D(clawX + side * 15 * crabScale, clawY + 18 * pinch * crabScale, clawZ - 25 * crabScale, rotX, rotY, rotZ, cx, cy, 450, 520);
        ctx.beginPath();
        ctx.moveTo(pClaw.x, pClaw.y);
        ctx.lineTo(pDactylTip.x, pDactylTip.y);
        ctx.moveTo(pClaw.x, pClaw.y);
        ctx.lineTo(pPollexTip.x, pPollexTip.y);
        ctx.strokeStyle = hsla(baseHue - 15, 100, 75, 0.95);
        ctx.lineWidth = Math.max(1, 3.2 * pClaw.depth);
        ctx.stroke();
      }
      ctx.restore();
    }
  };
}

// Default parameters from content metadata
const defaultParams = [
  {
    "key": "gaitSpeed",
    "label": "Gait Crawl Speed",
    "type": "range",
    "min": 0.5,
    "max": 3,
    "step": 0.1,
    "defaultValue": 1.4,
    "description": "Sideways walking cycle frequency"
  },
  {
    "key": "clawPinch",
    "label": "Claw Pinch Aperture",
    "type": "range",
    "min": 0.2,
    "max": 2,
    "step": 0.1,
    "defaultValue": 1,
    "description": "Chela finger opening amplitude"
  }
];

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

const instance = window.__art_instances['mathematical-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
  );
}
Edit in Interactive Playground Zero Dependencies • Standalone Canvas 2D
ƒ

Mathematical Formulation

high
Analytical Equation
pknee=pcoxa+R(θ1)L1+R(ωt+ϕi)Alift\mathbf{p}_{\text{knee}} = \mathbf{p}_{\text{coxa}} + \mathbf{R}(\theta_1) \mathbf{L}_1 + \mathbf{R}(\omega t + \phi_i) \mathbf{A}_{\text{lift}}
Click to expand
Compact Formula
knee = coxa + [cos(θ)*45 + reach, -20 + lift], pinch = 0.35 + 0.3*sin(3t)

Mathematical Tags

#crab #crustacean #creatures #kinematics #gait #biomechanics
Author: Math Art Core Target: 60 FPS

Export & Embed: Mathematical Crab

4K PNG Snapshot

High-resolution single frame render

WebM Video (5s Loop)

60 FPS browser-captured stream

Standalone JS Script

Complete executable Canvas 2D algorithm

HTML Iframe Embed

<iframe src="https://art.fazleyrabbi.xyz/embed/mathematical-crab" width="500" height="500" frameborder="0" loading="lazy"></iframe>
ESC
↑↓ Navigate ↵ Select
110 Mathematical Artworks
Made by Fazley Rabbi
☕

Support the Project

Keep mathematical creative coding alive & open source

Or via Direct Payoneer ($0 Fee)
Payoneer Customer ID: $0 Fee Direct
24076084

💡 Payoneer app: Go to Pay → Pay to recipient → Enter ID 24076084.

Thank you for supporting generative mathematical animations! ✨