Fibonacci Sunflower Florets

// 070 - Fibonacci Sunflower Florets (botany)
// 1:1 Original algorithm engine source
function createFibonacciSunflower() {
  return {
    setup() {
    },
    render(context, timeState, params) {
      const { ctx, width, height } = context;
      const florets = Math.max(150, Math.min(900, Math.round(Number(params.floretCount ?? 450))));
      const divAngleDeg = Number(params.goldenAngleOffset ?? 137.507764);
      const rayCount = Math.max(13, Math.min(55, Math.round(Number(params.rayPetals ?? 21))));
      const speed = Number(params.swaySpeed ?? 0.5);
      const t = timeState.time * speed;
      ctx.fillStyle = "#060503";
      ctx.fillRect(0, 0, width, height);
      const cx = width * 0.5;
      const cy = height * 0.5;
      const maxR = Math.min(width, height) * 0.44;
      ctx.save();
      ctx.translate(cx, cy);
      const diskR = maxR * 0.55;
      const divAngleRad = divAngleDeg * Math.PI / 180;
      for (let layer = 0; layer < 2; layer++) {
        const layerRayCount = layer === 0 ? rayCount : Math.round(rayCount * 1.2);
        const lOffset = layer === 0 ? 0 : Math.PI / layerRayCount;
        const petalLen = maxR * (0.85 + 0.15 * layer) * (1 + 0.03 * Math.sin(t * 1.5 + layer));
        const petalW = (petalLen - diskR) * 0.42;
        for (let p = 0; p < layerRayCount; p++) {
          const baseAngle = p / layerRayCount * Math.PI * 2 + lOffset;
          const sway = Math.sin(t * 1.8 + p * 0.4) * 0.04;
          ctx.save();
          ctx.rotate(baseAngle + sway);
          ctx.beginPath();
          ctx.moveTo(0, diskR * 0.85);
          const ctrl1X = -petalW * (0.8 + 0.1 * Math.sin(t + p));
          const ctrl1Y = diskR + (petalLen - diskR) * 0.45;
          const tipX = 0;
          const tipY = petalLen;
          const ctrl2X = petalW * (0.8 + 0.1 * Math.sin(t + p));
          const ctrl2Y = diskR + (petalLen - diskR) * 0.45;
          ctx.bezierCurveTo(ctrl1X, ctrl1Y, -petalW * 0.25, petalLen * 0.9, tipX, tipY);
          ctx.bezierCurveTo(petalW * 0.25, petalLen * 0.9, ctrl2X, ctrl2Y, 0, diskR * 0.85);
          const petalHue = layer === 0 ? 44 + p % 3 * 3 : 40 + p % 3 * 2;
          ctx.fillStyle = hsla(petalHue, 95, layer === 0 ? 64 : 56, 0.85);
          ctx.fill();
          ctx.strokeStyle = hsla(petalHue + 8, 95, 78, 0.9);
          ctx.lineWidth = 1.2;
          ctx.stroke();
          ctx.beginPath();
          ctx.moveTo(0, diskR * 0.9);
          ctx.lineTo(0, petalLen * 0.88);
          ctx.strokeStyle = hsla(36, 90, 52, 0.45);
          ctx.lineWidth = 0.8;
          ctx.stroke();
          ctx.restore();
        }
      }
      const c = diskR / Math.sqrt(florets);
      for (let n = 1; n <= florets; n++) {
        const theta = n * divAngleRad + t * 0.03;
        const r = c * Math.sqrt(n);
        const px = Math.cos(theta) * r;
        const py = Math.sin(theta) * r;
        const nNorm = n / florets;
        const seedHue = 26 + nNorm * 22;
        const seedLight = 24 + nNorm * 48 + Math.sin(t * 2 + n * 0.1) * 4;
        const seedRadius = Math.max(1.4, 1.2 + nNorm * 2.2);
        ctx.fillStyle = hsla(seedHue, 90, seedLight, 0.95);
        ctx.beginPath();
        ctx.arc(px, py, seedRadius, 0, Math.PI * 2);
        ctx.fill();
        if (nNorm > 0.6) {
          ctx.strokeStyle = hsla(45, 95, 82, 0.5);
          ctx.lineWidth = 0.5;
          ctx.stroke();
        }
      }
      for (let s = 0; s < 20; s++) {
        const seed = s * 73.1;
        const sa = (seed + t * 0.2) % (Math.PI * 2);
        const sr = maxR * (0.4 + 0.55 * Math.sin(seed * 2 + t * 0.4));
        const px = Math.cos(sa) * sr;
        const py = Math.sin(sa) * sr - Math.sin(t + s) * 12;
        const sAlpha = 0.3 + 0.4 * Math.sin(t * 2 + s);
        ctx.fillStyle = hsla(48, 100, 80, sAlpha);
        ctx.beginPath();
        ctx.arc(px, py, 1.4, 0, Math.PI * 2);
        ctx.fill();
      }
      ctx.restore();
    }
  };
}

// Default parameters from content metadata
const defaultParams = [
  {
    "key": "floretCount",
    "label": "Floret Seed Count",
    "type": "range",
    "min": 150,
    "max": 800,
    "step": 25,
    "defaultValue": 450,
    "description": "Total number of Fermat spiral seed florets"
  },
  {
    "key": "goldenAngleOffset",
    "label": "Divergence Angle (°)",
    "type": "range",
    "min": 137,
    "max": 138,
    "step": 0.02,
    "defaultValue": 137.508,
    "description": "Phyllotaxis angular divergence (137.508° is optimal)"
  },
  {
    "key": "rayPetals",
    "label": "Ray Petal Count",
    "type": "range",
    "min": 13,
    "max": 55,
    "step": 1,
    "defaultValue": 21,
    "description": "Fibonacci number of outer golden ray petals"
  },
  {
    "key": "swaySpeed",
    "label": "Sunburst Sway Speed",
    "type": "range",
    "min": 0.2,
    "max": 1.8,
    "step": 0.1,
    "defaultValue": 0.5,
    "description": "Gentle meadow breeze swaying cadence"
  }
];

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

const instance = window.__art_instances['fibonacci-sunflower'];
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
  );
}