Gulper Pelican Eel

Eurypharynx pelecanoides abyssal morphology displaying a cavernous hinged jaw and distensible pouch capable of swallowing large prey, paired with a bioluminescent caudal whip-tail.

Playground

60 FPS • Canvas 2D

Click + Drag to interact with field

</>

Full Executable Algorithm Code

175 lines 6391 chars

// 049 - Gulper Pelican Eel (creatures)
// 1:1 Original algorithm engine source
function createGulperEel() {
  const POUCH_RIBS = 32;
  const TAIL_NODES = 65;
  return {
    setup() {
    },
    render(context, timeState, params) {
      const { ctx, width, height } = context;
      const swimSpeed = Number(params.swimSpeed || 1.1);
      const jawExpansion = Number(params.jawInflation || 1);
      const t = timeState.time * swimSpeed;
      ctx.fillStyle = "#020306";
      ctx.fillRect(0, 0, width, height);
      const cx = width * 0.42;
      const cy = height * 0.46 + Math.sin(t * 1.2) * 8;
      const eelScale = Math.min(width, height) / 520;
      ctx.save();
      ctx.translate(cx, cy);
      ctx.globalCompositeOperation = "screen";
      const baseHue = (210 + Math.sin(t * 0.5) * 15) % 360;
      const gapePulse = 1 + 0.28 * Math.sin(t * 2.2) * jawExpansion;
      for (let r = 1; r <= POUCH_RIBS; r++) {
        const normR = r / POUCH_RIBS;
        const curScale = normR * eelScale;
        ctx.beginPath();
        ctx.moveTo(-15 * curScale, -15 * curScale);
        ctx.quadraticCurveTo(45 * curScale, -35 * curScale, 115 * curScale, -10 * curScale);
        ctx.bezierCurveTo(
          (95 + Math.sin(r * 0.4 + t * 3) * 6) * curScale,
          90 * gapePulse * curScale,
          (-12 + Math.cos(r * 0.3 - t * 2) * 6) * curScale,
          115 * gapePulse * curScale,
          -40 * curScale,
          18 * curScale
        );
        ctx.closePath();
        const ribHue = (baseHue + normR * 30) % 360;
        ctx.strokeStyle = hsla(ribHue, 95, 68, 0.05 + normR * 0.38);
        ctx.lineWidth = r === POUCH_RIBS ? 2.2 : 0.9;
        ctx.stroke();
        if (r % 6 === 0) {
          ctx.fillStyle = hsla(ribHue, 85, 45, 0.04);
          ctx.fill();
        }
      }
      for (let s = 1; s <= 12; s++) {
        const normS = s / 12;
        ctx.beginPath();
        ctx.moveTo(10 * eelScale, -10 * eelScale);
        ctx.quadraticCurveTo(
          (20 + s * 8) * eelScale,
          (15 + s * 8 * gapePulse) * eelScale,
          (-35 + s * 12) * eelScale,
          65 * gapePulse * eelScale
        );
        ctx.strokeStyle = hsla(190, 100, 75, 0.35);
        ctx.lineWidth = 1;
        ctx.stroke();
      }
      ctx.beginPath();
      ctx.moveTo(-20 * eelScale, -18 * eelScale);
      ctx.quadraticCurveTo(48 * eelScale, -38 * eelScale, 118 * eelScale, -10 * eelScale);
      ctx.strokeStyle = "#38bdf8";
      ctx.lineWidth = 2.4 * eelScale;
      ctx.stroke();
      ctx.beginPath();
      ctx.moveTo(-40 * eelScale, 18 * eelScale);
      ctx.quadraticCurveTo(40 * eelScale, 85 * gapePulse * eelScale, 118 * eelScale, -10 * eelScale);
      ctx.strokeStyle = "#38bdf8";
      ctx.lineWidth = 2.4 * eelScale;
      ctx.stroke();
      for (let tooth = 0; tooth < 18; tooth++) {
        const normT = tooth / 17;
        const tx = (-15 + normT * 130) * eelScale;
        const ty = (-25 + normT * 15) * eelScale;
        ctx.fillStyle = "#f0f9ff";
        ctx.fillRect(tx, ty, 1.5, 3.5 * eelScale);
      }
      ctx.fillStyle = "#0f172a";
      ctx.beginPath();
      ctx.arc(105 * eelScale, -16 * eelScale, 4.5 * eelScale, 0, Math.PI * 2);
      ctx.fill();
      ctx.strokeStyle = "#38bdf8";
      ctx.lineWidth = 1.2;
      ctx.stroke();
      ctx.fillStyle = "#38bdf8";
      ctx.beginPath();
      ctx.arc(106 * eelScale, -16 * eelScale, 2 * eelScale, 0, Math.PI * 2);
      ctx.fill();
      const tailRoots = [-40 * eelScale, -35 * eelScale, -30 * eelScale];
      for (let tr = 0; tr < 3; tr++) {
        ctx.beginPath();
        let prevX = tailRoots[tr];
        let prevY = (15 + tr * 4) * eelScale;
        ctx.moveTo(prevX, prevY);
        for (let s = 1; s <= TAIL_NODES; s++) {
          const normS = s / TAIL_NODES;
          const w1 = Math.sin(t * 3.5 - normS * 8 + tr * 0.3) * (34 * Math.pow(normS, 1.2) * eelScale);
          const w2 = Math.cos(t * 2.2 - normS * 14) * (12 * normS * eelScale);
          const curX = prevX - 200 * normS * eelScale;
          const curY = prevY - s * 3.4 * eelScale + w1 + w2;
          ctx.lineTo(curX, curY);
          if (s % 6 === 0 && tr === 1) {
            ctx.fillStyle = hsla(190, 100, 80, 0.85);
            ctx.fillRect(curX - 1, curY - 1, 2.5, 2.5);
          }
          if (s === TAIL_NODES && tr === 1) {
            const pulse = 1 + 0.35 * Math.sin(t * 5);
            const glowR = 16 * pulse * eelScale;
            const glowGrad = ctx.createRadialGradient(curX, curY, 2, curX, curY, glowR * 3.5);
            glowGrad.addColorStop(0, "rgba(239, 68, 68, 0.95)");
            glowGrad.addColorStop(0.4, "rgba(239, 68, 68, 0.45)");
            glowGrad.addColorStop(1, "rgba(239, 68, 68, 0)");
            ctx.fillStyle = glowGrad;
            ctx.beginPath();
            ctx.arc(curX, curY, glowR * 3.5, 0, Math.PI * 2);
            ctx.fill();
            ctx.fillStyle = "#fee2e2";
            ctx.beginPath();
            ctx.arc(curX, curY, 4.5 * eelScale, 0, Math.PI * 2);
            ctx.fill();
          }
        }
        ctx.strokeStyle = hsla((baseHue + tr * 15) % 360, 95, 75, 0.7 - tr * 0.18);
        ctx.lineWidth = tr === 1 ? 2.2 * eelScale : 1.2 * eelScale;
        ctx.stroke();
      }
      ctx.restore();
    }
  };
}

// Default parameters from content metadata
const defaultParams = [
  {
    "key": "swimSpeed",
    "label": "Tail Wave Frequency",
    "type": "range",
    "min": 0.4,
    "max": 2.5,
    "step": 0.1,
    "defaultValue": 1.1,
    "description": "Ribbon whip-tail undulation rate"
  },
  {
    "key": "jawInflation",
    "label": "Gape Distension",
    "type": "range",
    "min": 0.4,
    "max": 2,
    "step": 0.1,
    "defaultValue": 1,
    "description": "Pelican pouch volume expansion"
  }
];

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

const instance = window.__art_instances['gulper-eel'];
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

\mathbf{p}_{\text{pouch}}(\theta, t) = \begin{bmatrix} L_x \cos\theta \\ L_y \sin\theta \left[ 1 + \delta \sin(\omega t) \right] \end{bmatrix}, \quad y_{\text{tail}}(s, t) = A_w s^{1.5} \sin(\omega_t t - k s)

Click to expand

Compact Formula

pouch = bezierCurve(top_jaw, 95 + 85*pulse, -10 + 110*pulse, tail_root), tail_organ = radialGradient(tip, 24*pulse)

Mathematical Tags

#gulper-eel #pelican-eel #deep-sea #abyss #creatures #jaw #bioluminescence

Author: Math Art Core Target: 60 FPS

Gulper Pelican Eel

Full Executable Algorithm Code

Mathematical Formulation

Mathematical Tags

Export & Embed: Gulper Pelican Eel

4K PNG Snapshot

WebM Video (5s Loop)

Standalone JS Script

HTML Iframe Embed

Support the Project