ƒ(x)
MATH.ART
97

Bioluminescent Odonata Dragonfly

High-agility Odonata flight simulation featuring four independently counter-phase flapping wings (90° lag), slender 10-segmented glowing abdomen, pterostigma leading-edge markers, and ambient water ripples.

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

Full Executable Algorithm Code 

// 074 - Bioluminescent Odonata Dragonfly (insects)
// 1:1 Original algorithm engine source
function createBioluminescentDragonfly() {
  return {
    setup() {
    },
    render(context, timeState, params) {
      const { ctx, width, height } = context;
      const flapRate = Number(params.flapSpeed ?? 1.5);
      const glowLevel = Number(params.bioluminescence ?? 1);
      const wingVenation = Math.max(3, Math.min(8, Math.round(Number(params.wingCells ?? 5))));
      const t = timeState.time * flapRate;
      ctx.fillStyle = "#020508";
      ctx.fillRect(0, 0, width, height);
      const cx = width * 0.5;
      const cy = height * 0.48;
      const maxR = Math.min(width, height) * 0.44;
      const hoverY = Math.sin(t * 2.5) * 8;
      ctx.save();
      ctx.translate(cx, cy + hoverY);
      const cyanHue = 175;
      for (let r = 1; r <= 3; r++) {
        const rippleR = maxR * (0.5 + 0.3 * r) * (1 + 0.08 * Math.sin(t * 2 + r));
        ctx.beginPath();
        ctx.ellipse(0, maxR * 0.4, rippleR, rippleR * 0.25, 0, 0, Math.PI * 2);
        ctx.strokeStyle = hsla(cyanHue, 90, 65, (0.15 - r * 0.03) * glowLevel);
        ctx.lineWidth = 1;
        ctx.stroke();
      }
      for (const wSide of [-1, 1]) {
        const forePhase = Math.sin(t * 8);
        const foreScale = 0.35 + 0.65 * Math.cos(t * 8);
        ctx.save();
        ctx.translate(wSide * (maxR * 0.05), -maxR * 0.06);
        ctx.rotate(wSide * (-Math.PI * 0.42 + forePhase * 0.15));
        ctx.scale(1, foreScale);
        const fwLen = maxR * 0.95;
        const fwWidth = fwLen * 0.22;
        ctx.beginPath();
        ctx.moveTo(0, 0);
        ctx.bezierCurveTo(wSide * fwWidth * 0.5, -fwLen * 0.3, wSide * fwWidth, -fwLen * 0.7, 0, -fwLen);
        ctx.bezierCurveTo(-wSide * fwWidth * 0.5, -fwLen * 0.7, -wSide * fwWidth * 0.3, -fwLen * 0.3, 0, 0);
        ctx.fillStyle = hsla(cyanHue, 95, 60, 0.2 * glowLevel);
        ctx.fill();
        ctx.strokeStyle = hsla(cyanHue + 15, 100, 80, 0.85 * glowLevel);
        ctx.lineWidth = 1.3;
        ctx.stroke();
        ctx.fillStyle = hsla(50, 100, 85, 0.95 * glowLevel);
        ctx.fillRect(wSide * (fwWidth * 0.55), -fwLen * 0.88, 4, 10);
        for (let v = 1; v <= wingVenation; v++) {
          const vFrac = v / (wingVenation + 1);
          ctx.beginPath();
          ctx.moveTo(0, -fwLen * vFrac);
          ctx.lineTo(wSide * (fwWidth * 0.8 * (1 - Math.abs(vFrac - 0.5) * 1.2)), -fwLen * vFrac);
          ctx.strokeStyle = hsla(cyanHue + 30, 90, 85, 0.35 * glowLevel);
          ctx.lineWidth = 0.75;
          ctx.stroke();
        }
        ctx.restore();
        const hindPhase = Math.sin(t * 8 - Math.PI * 0.5);
        const hindScale = 0.35 + 0.65 * Math.cos(t * 8 - Math.PI * 0.5);
        ctx.save();
        ctx.translate(wSide * (maxR * 0.05), maxR * 0.02);
        ctx.rotate(wSide * (-Math.PI * 0.55 + hindPhase * 0.15));
        ctx.scale(1, hindScale);
        const hwLen = maxR * 0.88;
        const hwWidth = hwLen * 0.26;
        ctx.beginPath();
        ctx.moveTo(0, 0);
        ctx.bezierCurveTo(wSide * hwWidth * 0.6, -hwLen * 0.3, wSide * hwWidth, -hwLen * 0.65, 0, -hwLen);
        ctx.bezierCurveTo(-wSide * hwWidth * 0.4, -hwLen * 0.65, -wSide * hwWidth * 0.2, -hwLen * 0.3, 0, 0);
        ctx.fillStyle = hsla(cyanHue - 20, 95, 55, 0.18 * glowLevel);
        ctx.fill();
        ctx.strokeStyle = hsla(cyanHue, 100, 75, 0.75 * glowLevel);
        ctx.lineWidth = 1.2;
        ctx.stroke();
        ctx.restore();
      }
      const abSegments = 10;
      for (let s = 1; s <= abSegments; s++) {
        const sNorm = s / abSegments;
        const sy = sNorm * maxR * 0.62 + maxR * 0.05;
        const sw = Math.max(1.8, maxR * 0.035 * (1 - sNorm * 0.4));
        const sh = maxR * 0.055;
        ctx.beginPath();
        ctx.ellipse(0, sy, sw, sh * 0.5, 0, 0, Math.PI * 2);
        ctx.fillStyle = hsla(cyanHue + s % 2 * 15, 90, 35 + s * 3, 0.95);
        ctx.fill();
        ctx.strokeStyle = hsla(cyanHue + 25, 100, 80, 0.8 * glowLevel);
        ctx.lineWidth = 1;
        ctx.stroke();
        ctx.fillStyle = hsla(cyanHue + 40, 100, 90, 0.95 * glowLevel);
        ctx.beginPath();
        ctx.arc(0, sy, 1.4, 0, Math.PI * 2);
        ctx.fill();
      }
      for (const cSide of [-1, 1]) {
        ctx.beginPath();
        ctx.moveTo(0, maxR * 0.68);
        ctx.lineTo(cSide * 4, maxR * 0.74);
        ctx.strokeStyle = hsla(cyanHue + 20, 95, 80, 0.9 * glowLevel);
        ctx.lineWidth = 1.2;
        ctx.stroke();
      }
      ctx.beginPath();
      ctx.ellipse(0, -maxR * 0.02, maxR * 0.065, maxR * 0.085, 0, 0, Math.PI * 2);
      ctx.fillStyle = "#062024";
      ctx.fill();
      ctx.strokeStyle = hsla(cyanHue + 10, 95, 78, 0.95 * glowLevel);
      ctx.lineWidth = 1.6;
      ctx.stroke();
      for (const eyeSide of [-1, 1]) {
        ctx.beginPath();
        ctx.arc(eyeSide * (maxR * 0.055), -maxR * 0.12, maxR * 0.05, 0, Math.PI * 2);
        ctx.fillStyle = hsla(cyanHue + 30, 95, 55, 0.95);
        ctx.fill();
        ctx.strokeStyle = hsla(cyanHue + 50, 100, 90, 0.95 * glowLevel);
        ctx.lineWidth = 1.4;
        ctx.stroke();
        ctx.fillStyle = "#ffffff";
        ctx.beginPath();
        ctx.arc(eyeSide * (maxR * 0.06), -maxR * 0.13, 2, 0, Math.PI * 2);
        ctx.fill();
      }
      ctx.restore();
    }
  };
}

// Default parameters from content metadata
const defaultParams = [
  {
    "key": "flapSpeed",
    "label": "Flight Frequency",
    "type": "range",
    "min": 0.5,
    "max": 2.5,
    "step": 0.1,
    "defaultValue": 1.5,
    "description": "Wing stroke cadence"
  },
  {
    "key": "bioluminescence",
    "label": "Cyan Glow Intensity",
    "type": "range",
    "min": 0.4,
    "max": 1.6,
    "step": 0.1,
    "defaultValue": 1,
    "description": "Bioluminescent emission strength"
  },
  {
    "key": "wingCells",
    "label": "Wing Cell Tracery",
    "type": "range",
    "min": 3,
    "max": 8,
    "step": 1,
    "defaultValue": 5,
    "description": "Number of delicate venation cross-cells"
  }
];

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

const instance = window.__art_instances['bioluminescent-dragonfly'];
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
zfore(t)=A1sin⁡(ωt),zhind(t)=A2sin⁡(ωt−π2),Sk=S0+k⋅Δyz_{\text{fore}}(t) = A_1 \sin(\omega t), \quad z_{\text{hind}}(t) = A_2 \sin\left(\omega t - \frac{\pi}{2}\right), \quad S_k = S_0 + k \cdot \Delta y
Click to expand
Compact Formula
forewing = sin(8t), hindwing = sin(8t - π/2), abdomen = 10_segments

Mathematical Tags

#dragonfly #insect #odonata #creatures #bioluminescent #cyan #wings #flight
Author: Math Art Core Target: 60 FPS

Export & Embed: Bioluminescent Odonata Dragonfly

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/bioluminescent-dragonfly" 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! ✨