228

Retinal Iris Trabeculae

Ophthalmic human iris architecture showing hundreds of undulating radial collagen trabeculae, pupillary light reflex sphincter contraction, and heterochromia pigmentation.

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

Full Executable Algorithm Code

// 038 - Retinal Iris Trabeculae (anatomy)
// 1:1 Original algorithm engine source
function createRetinalIris() {
  const TRABECULAE_COUNT = 360;
  return {
    setup() {
    },
    render(context, timeState, params) {
      const { ctx, width, height } = context;
      const speed = Number(params.pupilSpeed || 0.8);
      const irisRadius = Math.min(width, height) * 0.42;
      const t = timeState.time * speed;
      ctx.fillStyle = "#040508";
      ctx.fillRect(0, 0, width, height);
      const cx = width * 0.5;
      const cy = height * 0.5;
      const pupilConstriction = 0.28 + 0.12 * Math.sin(t * 1.5);
      const pupilRadius = irisRadius * pupilConstriction;
      ctx.beginPath();
      ctx.arc(cx, cy, irisRadius, 0, Math.PI * 2);
      ctx.strokeStyle = "rgba(56, 189, 248, 0.5)";
      ctx.lineWidth = 3;
      ctx.stroke();
      for (let i = 0; i < TRABECULAE_COUNT; i++) {
        const phi = i / TRABECULAE_COUNT * Math.PI * 2;
        const fiberWobble = Math.sin(phi * 18 + t * 2) * (irisRadius * 0.05);
        const startR = pupilRadius;
        const endR = irisRadius + fiberWobble;
        const x1 = cx + Math.cos(phi) * startR;
        const y1 = cy + Math.sin(phi) * startR;
        const midR = (startR + endR) * 0.52;
        const midAngle = phi + Math.sin(phi * 6 + t) * 0.04;
        const xMid = cx + Math.cos(midAngle) * midR;
        const yMid = cy + Math.sin(midAngle) * midR;
        const x2 = cx + Math.cos(phi) * endR;
        const y2 = cy + Math.sin(phi) * endR;
        ctx.beginPath();
        ctx.moveTo(x1, y1);
        ctx.quadraticCurveTo(xMid, yMid, x2, y2);
        const normR = i / TRABECULAE_COUNT;
        const fiberHue = (180 + Math.sin(normR * Math.PI * 4) * 40 + t * 10) % 360;
        ctx.strokeStyle = hsla(fiberHue, 85, 60, 0.45);
        ctx.lineWidth = 1.1;
        ctx.stroke();
      }
      const collaretteR = (pupilRadius + irisRadius) * 0.48;
      ctx.beginPath();
      const cSteps = 72;
      for (let i = 0; i <= cSteps; i++) {
        const a = i / cSteps * Math.PI * 2;
        const r = collaretteR + (i % 2 === 0 ? 6 : -6);
        const px = cx + Math.cos(a) * r;
        const py = cy + Math.sin(a) * r;
        if (i === 0) ctx.moveTo(px, py);
        else ctx.lineTo(px, py);
      }
      ctx.closePath();
      ctx.strokeStyle = hsla(45, 95, 70, 0.7);
      ctx.lineWidth = 1.6;
      ctx.stroke();
      ctx.fillStyle = "#020305";
      ctx.beginPath();
      ctx.arc(cx, cy, pupilRadius, 0, Math.PI * 2);
      ctx.fill();
      ctx.strokeStyle = hsla(38, 90, 60, 0.9);
      ctx.lineWidth = 2;
      ctx.stroke();
      ctx.fillStyle = "rgba(255, 255, 255, 0.85)";
      ctx.beginPath();
      ctx.arc(cx - pupilRadius * 0.35, cy - pupilRadius * 0.35, 5, 0, Math.PI * 2);
      ctx.fill();
    }
  };
}

// Default parameters from content metadata
const defaultParams = [
  {
    "key": "pupilSpeed",
    "label": "Light Reflex Speed",
    "type": "range",
    "min": 0.2,
    "max": 2.5,
    "step": 0.1,
    "defaultValue": 0.8,
    "description": "Pupillary dilation / constriction rate"
  }
];

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

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

medium
Analytical Equation
rpupil(t)=Riris[c0+c1sin(ωt)],pi(s)=ppupil+s(plimbusppupil)+w(s,θi)r_{\text{pupil}}(t) = R_{\text{iris}} \left[ c_0 + c_1 \sin(\omega t) \right], \quad \mathbf{p}_i(s) = \mathbf{p}_{\text{pupil}} + s (\mathbf{p}_{\text{limbus}} - \mathbf{p}_{\text{pupil}}) + \mathbf{w}(s, \theta_i)
Click to expand
Compact Formula
pupil_r = R * (0.28 + 0.12*sin(1.5t)), trabecula = quadCurve(pupil, furrow, limbus)

Mathematical Tags

#eye #iris #retina #anatomy #optics #biology #collagen
Author: Math Art Core Target: 60 FPS

Export & Embed: Retinal Iris Trabeculae

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/retinal-iris" 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! ✨