Phyllotaxis

"use client";

/**
 * Phyllotaxis — a seed head on the golden angle, with a pulse running
 * out through the spirals. Morphology 04. Ships with PointPlotter.tsx.
 *
 *   <Phyllotaxis ink="#f7efe3" accent="#e4a256" points={9000} speed={1} />
 */
import { PointPlotter, type PlotFn } from "./PointPlotter";

export type PhyllotaxisProps = { ink?: string; accent?: string; points?: number; speed?: number; className?: string };

const { cos, sin, sqrt, PI } = Math;
const GOLDEN = PI * (3 - sqrt(5));

const plot: PlotFn = (i, n, t) => {
  // Vogel's spiral: r grows with √i, angle steps by the golden angle.
  const scaleR = 185 / sqrt(n);
  const breathe = 1 + 0.035 * sin(t * 0.8 + i * 0.004);
  const r = scaleR * sqrt(i) * breathe;
  const theta = i * GOLDEN + t * 0.12 + 0.15 * sin(t * 0.3) * (r / 185);
  if (r > 188) return null;
  const x = 200 + r * cos(theta);
  const y = 200 + r * sin(theta);
  // A ring of accents travelling outward through the seeds.
  const ripple = cos(i * 0.02 - t * 2.2);
  return [x, y, ripple > 0.985];
};

"use client";

/**
 * Point Plotter — the engine under the Morphology series.
 *
 * No dependencies. Every organism in the series is a function
 * `plot(i, n, t, pointer)` that places the i-th of n points in a
 * 400×400 space and says whether it is an accent point. This file
 * draws those points, tens of thousands a frame, on a 2D canvas: faint
 * ink for the body, a brighter colour with a soft glow for the
 * accents, and the formula as a caption in the corner.
 *
 * Ships with every organism. You should not need to edit it.
 */
import { useEffect, useRef } from "react";

export type Pointer = { x: number; y: number; active: boolean };

/**
 * [x, y, accent, weight?] in 400×400 space, or null to skip the point.
 * `weight` (0–1) dims the point — used for depth on the 3D forms.
 */
export type PlotPoint = readonly [number, number, boolean] | readonly [number, number, boolean, number] | null;
export type PlotFn = (i: number, n: number, t: number, pointer: Pointer) => PlotPoint;

export type PointPlotterProps = {
  plot: PlotFn;
  points: number;