ƒ(x)
MATH.ART
97

Iridescent Jewel Scarab Beetle

Coleopteran anatomical simulation featuring superelliptic chitinous split elytra, metallic optical thin-film interference gradients, serrated clypeus horns, and 6-legged articulated crawling kinematics.

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

Full Executable Algorithm Code 

// 072 - Iridescent Jewel Scarab Beetle (insects)
// 1:1 Original algorithm engine source
function createScarabBeetle() {
  return {
    setup() {
    },
    render(context, timeState, params) {
      const { ctx, width, height } = context;
      const crawlSpeed = Number(params.gaitSpeed ?? 0.8);
      const sheenIntensity = Number(params.iridescentLuster ?? 1);
      const elytraSpread = Number(params.elytraFlare ?? 0.25);
      const t = timeState.time * crawlSpeed;
      ctx.fillStyle = "#030504";
      ctx.fillRect(0, 0, width, height);
      const cx = width * 0.5;
      const cy = height * 0.5;
      const maxR = Math.min(width, height) * 0.42;
      const bobY = Math.sin(t * 2) * 4;
      ctx.save();
      ctx.translate(cx, cy + bobY);
      const baseHue = (145 + Math.sin(t * 0.8) * 35) % 360;
      for (const side of [-1, 1]) {
        for (let leg = 0; leg < 3; leg++) {
          const legPhase = t * 3 + leg * 1.2 + (side === 1 ? Math.PI : 0);
          const reach = Math.sin(legPhase) * 12;
          const lift = Math.cos(legPhase) * 6;
          const baseAngle = (leg - 1) * 0.45 + side * 0.35;
          const coxaX = side * (maxR * 0.15);
          const coxaY = (leg - 1) * (maxR * 0.14);
          const femurLen = maxR * (0.28 + leg * 0.04);
          const kneeAngle = (leg === 0 ? -Math.PI * 0.25 : leg === 1 ? 0 : Math.PI * 0.28) + side * 0.2;
          const kneeX = coxaX + side * Math.cos(kneeAngle) * femurLen + reach * 0.5;
          const kneeY = coxaY + Math.sin(kneeAngle) * femurLen + lift;
          const tibiaLen = maxR * 0.24;
          const ankleAngle = kneeAngle + side * 0.45;
          const footX = kneeX + side * Math.cos(ankleAngle) * tibiaLen + reach;
          const footY = kneeY + Math.sin(ankleAngle) * tibiaLen;
          ctx.beginPath();
          ctx.moveTo(coxaX, coxaY);
          ctx.lineTo(kneeX, kneeY);
          ctx.lineTo(footX, footY);
          ctx.strokeStyle = hsla(baseHue - 30, 85, 45, 0.9);
          ctx.lineWidth = 2.4 - leg * 0.2;
          ctx.stroke();
          for (let sp = 1; sp <= 3; sp++) {
            const spFrac = sp / 4;
            const sx = kneeX + (footX - kneeX) * spFrac;
            const sy = kneeY + (footY - kneeY) * spFrac;
            ctx.beginPath();
            ctx.moveTo(sx, sy);
            ctx.lineTo(sx + side * 4, sy - 3);
            ctx.strokeStyle = hsla(45, 95, 75, 0.7);
            ctx.lineWidth = 1;
            ctx.stroke();
          }
          ctx.fillStyle = hsla(45, 100, 85, 0.95);
          ctx.beginPath();
          ctx.arc(footX, footY, 2, 0, Math.PI * 2);
          ctx.fill();
        }
      }
      if (elytraSpread > 0.05) {
        for (const wingSide of [-1, 1]) {
          const wFlare = elytraSpread * (0.8 + 0.1 * Math.sin(t * 12));
          ctx.save();
          ctx.rotate(wingSide * wFlare * 0.6);
          ctx.beginPath();
          ctx.moveTo(0, 0);
          ctx.bezierCurveTo(wingSide * (maxR * 0.45), maxR * 0.2, wingSide * (maxR * 0.55), maxR * 0.6, wingSide * (maxR * 0.2), maxR * 0.75);
          ctx.bezierCurveTo(wingSide * (maxR * 0.1), maxR * 0.5, 0, maxR * 0.3, 0, 0);
          ctx.fillStyle = hsla(200, 90, 70, 0.25 * sheenIntensity);
          ctx.fill();
          ctx.strokeStyle = hsla(190, 95, 80, 0.6);
          ctx.lineWidth = 1;
          ctx.stroke();
          ctx.restore();
        }
      }
      const elytraLen = maxR * 0.58;
      const elytraWidth = maxR * 0.28;
      for (const eSide of [-1, 1]) {
        ctx.save();
        ctx.rotate(eSide * elytraSpread * (0.4 + 0.05 * Math.sin(t * 2)));
        ctx.beginPath();
        ctx.moveTo(0, -maxR * 0.02);
        ctx.bezierCurveTo(
          eSide * elytraWidth * 1.3,
          -maxR * 0.02,
          eSide * elytraWidth * 1.3,
          elytraLen * 0.85,
          eSide * 2,
          elytraLen
        );
        ctx.lineTo(0, -maxR * 0.02);
        ctx.closePath();
        const eHue = (baseHue + eSide * 15 + Math.sin(t * 2) * 10) % 360;
        ctx.fillStyle = hsla(eHue, 88, 42, 0.9 * sheenIntensity);
        ctx.fill();
        ctx.strokeStyle = hsla(eHue + 30, 95, 78, 0.95);
        ctx.lineWidth = 1.6;
        ctx.stroke();
        for (let g = 1; g <= 4; g++) {
          const gFrac = g / 5;
          ctx.beginPath();
          ctx.moveTo(eSide * (elytraWidth * gFrac * 0.7), 0);
          ctx.quadraticCurveTo(
            eSide * (elytraWidth * gFrac * 1.2),
            elytraLen * 0.5,
            eSide * (elytraWidth * gFrac * 0.5),
            elytraLen * 0.92
          );
          ctx.strokeStyle = hsla(eHue + 50, 90, 72, 0.45);
          ctx.lineWidth = 0.9;
          ctx.stroke();
        }
        ctx.restore();
      }
      const pWidth = maxR * 0.26;
      const pHeight = maxR * 0.18;
      ctx.beginPath();
      ctx.moveTo(-pWidth * 0.7, -maxR * 0.22);
      ctx.bezierCurveTo(-pWidth, -maxR * 0.14, -pWidth, -maxR * 0.04, -pWidth * 0.85, -maxR * 0.02);
      ctx.lineTo(pWidth * 0.85, -maxR * 0.02);
      ctx.bezierCurveTo(pWidth, -maxR * 0.04, pWidth, -maxR * 0.14, pWidth * 0.7, -maxR * 0.22);
      ctx.closePath();
      ctx.fillStyle = hsla(baseHue + 20, 85, 38, 0.95);
      ctx.fill();
      ctx.strokeStyle = hsla(baseHue + 50, 95, 80, 0.9);
      ctx.lineWidth = 1.6;
      ctx.stroke();
      const hWidth = maxR * 0.16;
      ctx.beginPath();
      ctx.arc(0, -maxR * 0.26, hWidth, -Math.PI * 0.85, -Math.PI * 0.15);
      ctx.lineTo(hWidth * 0.8, -maxR * 0.22);
      ctx.lineTo(-hWidth * 0.8, -maxR * 0.22);
      ctx.closePath();
      ctx.fillStyle = "#06130b";
      ctx.fill();
      ctx.strokeStyle = hsla(baseHue + 10, 90, 70, 0.9);
      ctx.lineWidth = 1.4;
      ctx.stroke();
      for (const hSide of [-1, 1]) {
        ctx.beginPath();
        ctx.moveTo(hSide * (hWidth * 0.6), -maxR * 0.3);
        ctx.lineTo(hSide * (hWidth * 0.9), -maxR * 0.38);
        ctx.lineTo(hSide * (hWidth * 0.3), -maxR * 0.34);
        ctx.strokeStyle = hsla(45, 95, 75, 0.95);
        ctx.lineWidth = 1.5;
        ctx.stroke();
      }
      for (const eyeSide of [-1, 1]) {
        ctx.fillStyle = hsla(baseHue + 60, 100, 85, 0.95);
        ctx.beginPath();
        ctx.arc(eyeSide * (hWidth * 0.85), -maxR * 0.26, 2.8, 0, Math.PI * 2);
        ctx.fill();
      }
      ctx.restore();
    }
  };
}

// Default parameters from content metadata
const defaultParams = [
  {
    "key": "gaitSpeed",
    "label": "Gait Cycle Speed",
    "type": "range",
    "min": 0.2,
    "max": 2,
    "step": 0.1,
    "defaultValue": 0.8,
    "description": "Hexapod leg crawling oscillation cadence"
  },
  {
    "key": "iridescentLuster",
    "label": "Chitin Luster",
    "type": "range",
    "min": 0.4,
    "max": 1.6,
    "step": 0.1,
    "defaultValue": 1,
    "description": "Metallic emerald/gold thin-film interference sheen"
  },
  {
    "key": "elytraFlare",
    "label": "Elytra Shell Opening",
    "type": "range",
    "min": 0,
    "max": 0.6,
    "step": 0.05,
    "defaultValue": 0.25,
    "description": "Wing case split opening revealing flight wings"
  }
];

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

const instance = window.__art_instances['scarab-beetle'];
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
∣xa∣p+∣yb∣q=1,ptibia(t)=pfemur+L[cos⁡(αt+Δϕ)sin⁡(αt+Δϕ)]\left|\frac{x}{a}\right|^p + \left|\frac{y}{b}\right|^q = 1, \quad \mathbf{p}_{\text{tibia}}(t) = \mathbf{p}_{\text{femur}} + L \begin{bmatrix} \cos(\alpha_t + \Delta\phi) \\ \sin(\alpha_t + \Delta\phi) \end{bmatrix}
Click to expand
Compact Formula
elytra = superellipse(w, h, p=2.4), leg = coxa -> femur(t) -> tibia(t)

Mathematical Tags

#beetle #scarab #insect #coleoptera #creatures #chitin #iridescent #jewel
Author: Math Art Core Target: 60 FPS

Export & Embed: Iridescent Jewel Scarab Beetle

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/scarab-beetle" width="500" height="500" frameborder="0" loading="lazy"></iframe>
ESC
↑↓ Navigate ↵ Select
101 Mathematical Artworks
☕

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! ✨