Nautilus

"use client";

/**
 * Nautilus — a logarithmic spiral with chambers, septa lit in turn.
 * Morphology 05. Ships with PointPlotter.tsx.
 *
 *   <Nautilus ink="#f7efe3" accent="#f5cb73" points={22000} speed={1} />
 */
import { PointPlotter, type PlotFn } from "./PointPlotter";

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

const { cos, sin, exp, PI } = Math;
const COLS = 900;
const TURNS = 3;
const GROWTH = 0.19;

const plot: PlotFn = (i, n, t) => {
  const rows = Math.ceil(n / COLS);
  const ua = (i % COLS) / COLS;
  const v = Math.floor(i / COLS) / rows;

  const theta = ua * TURNS * 2 * PI;
  const outer = 3.6 * exp(GROWTH * theta);
  const inner = outer * exp(-GROWTH * 2 * PI);
  // Across the chamber: the whorl between the previous turn and this one.
  const breathe = 1 + 0.012 * sin(t * 1.5 + theta);
  const rho = (inner + (outer - inner) * v) * breathe;

"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;