228

Bioluminescent Comb Jelly

Marine ctenophore exhibiting 8 longitudinal rows of fused microscopic cilia (ctenes) beating metachronally to produce spectral rainbow optical diffraction waves.

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

Full Executable Algorithm Code

// 046 - Bioluminescent Comb Jelly (creatures)
// 1:1 Original algorithm engine source
function createCombJellyCtenophore() {
  const BODY_LOOPS = 36;
  const COMB_ROWS = 8;
  const PLATES_PER_ROW = 36;
  return {
    setup() {
    },
    render(context, timeState, params) {
      const { ctx, width, height } = context;
      const beatSpeed = Number(params.ciliaSpeed || 1.3);
      const glowScale = Number(params.glowBoost || 1.2);
      const t = timeState.time * beatSpeed;
      ctx.fillStyle = "#020307";
      ctx.fillRect(0, 0, width, height);
      const cx = width * 0.5;
      const cy = height * 0.46 + Math.sin(t * 0.8) * 10;
      const bodyW = Math.min(width, height) * 0.24;
      const bodyH = Math.min(width, height) * 0.35;
      ctx.save();
      ctx.translate(cx, cy);
      ctx.globalCompositeOperation = "screen";
      for (let l = 0; l < BODY_LOOPS; l++) {
        const normL = (l + 1) / BODY_LOOPS;
        const curW = bodyW * normL;
        const curH = bodyH * Math.pow(normL, 0.85);
        ctx.beginPath();
        const steps = 60;
        for (let i = 0; i <= steps; i++) {
          const theta = i / steps * Math.PI * 2;
          const rip = Math.sin(theta * 6 + t * 2 + normL * 3) * (3 * normL);
          const px = Math.cos(theta) * (curW + rip);
          const py = Math.sin(theta) * (curH + rip * 0.5);
          if (i === 0) ctx.moveTo(px, py);
          else ctx.lineTo(px, py);
        }
        ctx.closePath();
        const loopHue = (185 + normL * 40 + Math.sin(t) * 15) % 360;
        const loopAlpha = (0.04 + normL * 0.28) * glowScale;
        ctx.strokeStyle = hsla(loopHue, 95, 70, loopAlpha);
        ctx.lineWidth = normL > 0.9 ? 1.6 : 0.8;
        ctx.stroke();
      }
      ctx.beginPath();
      ctx.arc(0, -bodyH * 0.96, 4.5, 0, Math.PI * 2);
      ctx.fillStyle = "#f0f9ff";
      ctx.shadowColor = "#38bdf8";
      ctx.shadowBlur = 14;
      ctx.fill();
      ctx.shadowBlur = 0;
      for (let r = 0; r < COMB_ROWS; r++) {
        const phi = r / COMB_ROWS * Math.PI * 2;
        const rowXOffset = Math.sin(phi) * (bodyW * 0.92);
        const depth = Math.cos(phi);
        const depthAlpha = 0.35 + (depth + 1) * 0.35;
        for (let p = 0; p < PLATES_PER_ROW; p++) {
          const normP = p / (PLATES_PER_ROW - 1);
          const plateAngle = (normP - 0.5) * Math.PI * 0.88;
          const px = rowXOffset * Math.cos(plateAngle);
          const py = Math.sin(plateAngle) * (bodyH * 0.95);
          const wavePhase = t * 4.5 - normP * 9 + r * 0.5;
          const beatAmplitude = Math.sin(wavePhase);
          const spectralHue = (normP * 360 + wavePhase * 45) % 360;
          const plateLen = (8 + Math.abs(beatAmplitude) * 7) * (depth > 0 ? 1 : 0.6);
          ctx.beginPath();
          ctx.moveTo(px, py);
          ctx.lineTo(px + Math.sin(phi) * plateLen, py + depth * 2);
          ctx.strokeStyle = hsla(spectralHue, 100, 72, depthAlpha * glowScale);
          ctx.lineWidth = 2.2;
          ctx.stroke();
          if (Math.abs(beatAmplitude) > 0.65) {
            ctx.fillStyle = hsla(spectralHue, 100, 90, depthAlpha);
            ctx.fillRect(px - 1, py - 1, 3, 3);
          }
        }
      }
      for (let side = -1; side <= 1; side += 2) {
        for (let th = 0; th < 24; th++) {
          const normTh = th / 23;
          const rootX = side * (bodyW * (0.3 + normTh * 0.25));
          const rootY = bodyH * 0.25;
          ctx.beginPath();
          ctx.moveTo(rootX, rootY);
          const tentSteps = 40;
          const tentLen = bodyH * 1.6;
          for (let s = 1; s <= tentSteps; s++) {
            const ns = s / tentSteps;
            const w1 = Math.sin(t * 3.5 - ns * 6 + th * 0.3 + side) * (28 * ns);
            const w2 = Math.cos(t * 2.2 + ns * 12 - th * 0.2) * (14 * ns);
            const tx = rootX + side * (ns * 35) + w1 + w2;
            const ty = rootY + ns * tentLen;
            ctx.lineTo(tx, ty);
          }
          const thHue = (175 + normTh * 50 + t * 15) % 360;
          ctx.strokeStyle = hsla(thHue, 95, 75, (th % 3 === 0 ? 0.6 : 0.22) * glowScale);
          ctx.lineWidth = th % 3 === 0 ? 1.4 : 0.8;
          ctx.stroke();
        }
      }
      ctx.restore();
    }
  };
}

// Default parameters from content metadata
const defaultParams = [
  {
    "key": "ciliaSpeed",
    "label": "Ciliary Beat Frequency",
    "type": "range",
    "min": 0.4,
    "max": 3,
    "step": 0.1,
    "defaultValue": 1.3,
    "description": "Metachronal wave transmission rate"
  },
  {
    "key": "glowBoost",
    "label": "Iridescent Diffraction",
    "type": "range",
    "min": 0.5,
    "max": 2,
    "step": 0.1,
    "defaultValue": 1.2,
    "description": "Spectral rainbow intensity multiplier"
  }
];

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

const instance = window.__art_instances['comb-jelly-ctenophore'];
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
θcilia(s,t)=Acsin(ωtks+ϕr),λdiffract(s,t)=λ0[1+γcos(ωdtks)]\theta_{\text{cilia}}(s, t) = A_c \sin(\omega t - k s + \phi_r), \quad \lambda_{\text{diffract}}(s, t) = \lambda_0 \left[ 1 + \gamma \cos(\omega_d t - k s) \right]
Click to expand
Compact Formula
ctene_wave = sin(4t - 8s + 0.5r), hue_diffract = (360s + wave*40) % 360

Mathematical Tags

#comb-jelly #ctenophore #diffraction #rainbow #cilia #creatures #marine
Author: Math Art Core Target: 60 FPS

Export & Embed: Bioluminescent Comb Jelly

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/comb-jelly-ctenophore" 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! ✨