axstack 0.36.1 → 0.38.0

package/skills/axstack-anatomy/examples/ripple-tank/model.mjs

@@ -0,0 +1,131 @@
+export const WATER = { depth: 0.006, gravity: 9.81, tension: 0.0728, density: 998, index: 1.333, viscosity: 1.0e-6 };
+export const GLASS = 1.52;
+export const RANGE = { frequency: [8, 28], spacing: [20, 80] };
+export const BEAT = 0.75;
+export const SLOPE = 0.03;
+export const REACH = 24;
+
+export function omegaOf(k) {
+  const { depth, gravity, tension, density } = WATER;
+  return Math.sqrt((gravity * k + (tension / density) * k * k * k) * Math.tanh(k * depth));
+}
+
+export function wavenumberOf(frequency) {
+  const omega = 2 * Math.PI * frequency;
+  let low = 1;
+  let high = 20000;
+  for (let step = 0; step < 60; step++) {
+    const mid = (low + high) / 2;
+    if (omegaOf(mid) < omega) low = mid;
+    else high = mid;
+  }
+  return (low + high) / 2;
+}
+
+export function waveOf(frequency) {
+  const k = wavenumberOf(frequency);
+  const lambda = (2 * Math.PI) / k;
+  const speed = (2 * Math.PI * frequency) / k;
+  const h = 1e-3 * k;
+  const group = (omegaOf(k + h) - omegaOf(k - h)) / (2 * h);
+  const { viscosity, depth } = WATER;
+  const omega = 2 * Math.PI * frequency;
+  const damping = 2 * viscosity * k * k + (k * Math.sqrt((viscosity * omega) / 2)) / Math.sinh(2 * k * depth);
+  return { frequency, k, lambda, speed, group, damping, decay: damping / group };
+}
+
+export function nodalCount(spacing, lambda) {
+  return 2 * Math.floor(spacing / lambda + 0.5);
+}
+
+export function nodalVertices(spacing, lambda) {
+  const out = [];
+  for (let m = 0; (m + 0.5) * lambda < spacing; m++) {
+    out.push(((m + 0.5) * lambda) / 2, -((m + 0.5) * lambda) / 2);
+  }
+  return out.sort((a, b) => a - b);
+}
+
+export const magnificationOf = (zLamp, zPaper, zWater) => (zLamp - zPaper) / (zLamp - zWater);
+
+export function causticOf(zLamp, zPaper, zWater, zFloor = zWater, zBed = zFloor) {
+  const n = WATER.index;
+  const bend = (zWater - zFloor) * (1 - 1 / n) + ((zFloor - zBed) * (n - 1)) / GLASS + (zBed - zPaper) * (n - 1);
+  return bend / magnificationOf(zLamp, zPaper, zWater);
+}
+
+export const amplitudeOf = (kMm) => SLOPE / kMm;
+
+export const focusOf = (kMm, caustic) => caustic * amplitudeOf(kMm) * kMm * kMm;
+
+export function stateOf(frequency, spacingMm, optics) {
+  const wave = waveOf(frequency);
+  const lambdaMm = wave.lambda * 1000;
+  const kMm = wave.k / 1000;
+  const amplitude = amplitudeOf(kMm);
+  return {
+    frequency,
+    spacing: spacingMm,
+    lambdaMm,
+    kMm,
+    speed: wave.speed,
+    group: wave.group,
+    decay: wave.decay / 1000,
+    nodal: nodalCount(spacingMm, lambdaMm),
+    strobe: frequency - BEAT,
+    amplitude,
+    focus: focusOf(kMm, optics.caustic),
+    projected: lambdaMm * optics.magnification,
+  };
+}
+
+export const readoutOf = (state) => `f ${state.frequency.toFixed(1)} Hz · λ ${(state.lambdaMm / 10).toFixed(2)} cm · d ${(state.spacing / 10).toFixed(1)} cm · ${state.nodal} nodal lines`;
+
+export function wordsOf(state) {
+  return `${state.frequency.toFixed(1)} hertz, wavelength ${(state.lambdaMm / 10).toFixed(2)} centimetres, dippers ${(state.spacing / 10).toFixed(1)} centimetres apart, ${state.nodal} nodal lines`;
+}
+
+function clippedRunsOf(points, [x0, y0, x1, y1], project) {
+  const runs = [];
+  let run = [];
+  for (const point of points) {
+    if (point[0] >= x0 && point[0] <= x1 && point[1] >= y0 && point[1] <= y1) run.push(project(point));
+    else if (run.length) {
+      if (run.length > 1) runs.push(run);
+      run = [];
+    }
+  }
+  if (run.length > 1) runs.push(run);
+  return runs.map((points) => points.map(([x, y], index) => `${index ? "L" : "M"}${x.toFixed(1)} ${y.toFixed(1)}`).join("")).join("");
+}
+
+export function patternOf(state, { xs, inside, lamp, zWater, zPaper }, project, phase = 0) {
+  const lift = (lamp[2] - zPaper) / (lamp[2] - zWater);
+  const onPaper = ([x, y]) => project([lamp[0] + (x - lamp[0]) * lift, lamp[1] + (y - lamp[1]) * lift, zPaper]);
+  const half = state.spacing / 2;
+  const nodal = [];
+  for (const vertex of nodalVertices(state.spacing, state.lambdaMm)) {
+    const a = Math.abs(vertex);
+    const b = Math.sqrt(Math.max(half * half - a * a, 1e-6));
+    const points = [];
+    for (let index = 0; index <= 240; index++) {
+      const t = -4 + (8 * index) / 240;
+      points.push([xs + b * Math.sinh(t), Math.sign(vertex) * a * Math.cosh(t)]);
+    }
+    nodal.push(clippedRunsOf(points, inside, onPaper));
+  }
+  const crests = [];
+  for (const sy of [-half, half]) {
+    const reach = Math.max(...[inside[0], inside[2]].flatMap((x) => [inside[1], inside[3]].map((y) => Math.hypot(x - xs, y - sy))));
+    for (let r = state.lambdaMm * (1 + (((phase / (2 * Math.PI)) % 1) + 1) % 1); r < reach; r += state.lambdaMm) {
+      const points = [];
+      const steps = Math.max(24, Math.round(r * 1.2));
+      for (let index = 0; index <= steps; index++) {
+        const a = (index / steps) * 2 * Math.PI;
+        points.push([xs + r * Math.cos(a), sy + r * Math.sin(a)]);
+      }
+      crests.push(clippedRunsOf(points, inside, onPaper));
+    }
+  }
+  return { nodal: nodal.join(""), crests: crests.join("") };
+}

package/skills/axstack-anatomy/examples/ripple-tank/ripple.css

@@ -0,0 +1,103 @@
+.rt .iso-plate {
+  overflow: hidden;
+}
+
+.rt {
+  --rt-sheet: #1d1d1d;
+  --rt-tape: #232323;
+}
+
+.iso[data-theme="light"] .rt,
+.rt[data-theme="light"] {
+  --rt-sheet: #ffffff;
+  --rt-tape: #f1f1ee;
+}
+
+.rt-stage {
+  position: relative;
+  touch-action: pan-y;
+  -webkit-tap-highlight-color: transparent;
+  user-select: none;
+  -webkit-user-select: none;
+  cursor: crosshair;
+}
+
+.rt-stage[data-gl] .rt-fallback {
+  display: none;
+}
+
+.rt-said {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
+.rt-stage:focus-visible {
+  outline: 1px solid var(--anatomy-muted);
+  outline-offset: 6px;
+}
+
+.rt-stage > svg,
+.rt-stage > canvas {
+  display: block;
+  width: 100%;
+  height: auto;
+}
+
+.rt-stage > .rt-layer {
+  position: absolute;
+  inset: 0;
+  height: 100% !important;
+  pointer-events: none;
+}
+
+.iso:not([data-theme="light"]) .rt-paper-gl {
+  mix-blend-mode: screen;
+}
+
+.rt-sheet > .iso-fill {
+  fill: var(--rt-sheet);
+}
+
+.rt-tape > .iso-fill {
+  fill: var(--rt-tape);
+}
+
+.rt-water > .iso-fill {
+  fill: var(--anatomy-shade-2);
+  opacity: calc(0.7 * (1 - var(--rt-lamp, 0)));
+}
+
+.iso[data-theme="light"] .rt-stage[data-gl] .rt-water > .iso-fill,
+.rt[data-theme="light"] .rt-stage[data-gl] .rt-water > .iso-fill {
+  opacity: 0;
+}
+
+.rt-lever {
+  stroke-width: 1.4;
+}
+
+@media (max-width: 560px) {
+  .rt .iso-plate {
+    padding: 48px 6px 70px;
+  }
+}
+
+@media (max-width: 560px) {
+  .rt-stage {
+    width: 118%;
+    margin: -8% -9% -4%;
+  }
+
+  .rt-stage:focus-visible {
+    outline: none;
+  }
+
+  .rt .iso-plate:has(.rt-stage:focus-visible) {
+    outline: 1px solid var(--anatomy-muted);
+    outline-offset: 4px;
+  }
+}

package/skills/axstack-anatomy/examples/spot-plate/art.tsx

@@ -0,0 +1,110 @@
+import * as React from "react";
+import { Dots, FaceText, Line, Solid } from "../../kit/react/draw";
+import { BASE_ART, BOTTLE_ART, DECK_ART, LABEL, TRAY_ART } from "./geometry";
+import { LiquidLive } from "./live";
+
+function Lit({ id, children }: { id: string; children: React.ReactNode }) {
+  return (
+    <g data-part={id}>{children}</g>
+  );
+}
+
+const BACK = (
+  <g key="back">
+    <Lit id="frame">
+      <path className="iso-halo" d={BASE_ART.halo} />
+      {BASE_ART.feet.map((parts, index) => (
+        <g key={index}>
+          {parts.map((paths, piece) => (
+            <Solid key={piece} paths={paths} tone={piece ? "mid" : "lo"} crease="faint" />
+          ))}
+        </g>
+      ))}
+      <Solid paths={BASE_ART.slab} tone="mid" crease="faint" />
+      <Line d={BASE_ART.groove} tone="lo" />
+      <Line d={BASE_ART.inlay} tone="faint" />
+      <Line d={BASE_ART.screwRings} tone="lo" />
+      <Dots points={BASE_ART.screws} size={0.5} tone="mid" />
+      <Solid className="ml-plate" paths={TRAY_ART.slab} tone="hi" crease="lo" />
+      <Line d={TRAY_ART.groove} tone="lo" />
+      <Line d={TRAY_ART.inlay} tone="faint" />
+      {TRAY_ART.wells.map((well, index) => (
+        <g key={index}>
+          <path className="ml-floor" d={well.opening} />
+          {well.wall ? <path className="ml-wall" d={well.wall} /> : null}
+          <Line d={well.foot} tone="faint" />
+          <Line d={well.opening} tone="mid" />
+        </g>
+      ))}
+      <Dots points={TRAY_ART.counts} size={0.55} tone="mid" />
+      <Line d={TRAY_ART.screwRings} tone="lo" />
+      <Dots points={TRAY_ART.screws} size={0.5} tone="mid" />
+    </Lit>
+    <Lit id="apart">
+      <Line d={TRAY_ART.minor} tone="lo" />
+      <Line d={TRAY_ART.major} tone="mid" />
+      <Line d={TRAY_ART.datum} tone="mid" />
+      <Dots points={TRAY_ART.gapMarks} size={0.6} tone="hi" />
+    </Lit>
+  </g>
+);
+
+const DECK = (
+  <g key="deck">
+    <Lit id="frame">
+      <Solid paths={DECK_ART.slab} tone="mid" crease="faint" />
+      <Line d={DECK_ART.inlay} tone="faint" />
+      <Line d={DECK_ART.screwRings} tone="lo" />
+      <Dots points={DECK_ART.screws} size={0.45} tone="mid" />
+      <Solid paths={BOTTLE_ART.coaster} tone="mid" crease="faint" />
+      <Line d={BOTTLE_ART.coasterRing} tone="faint" />
+      <Dots points={BOTTLE_ART.coasterDots} size={0.45} tone="mid" />
+      <Solid className="ml-bottle" paths={BOTTLE_ART.body} tone="hi" crease="faint" />
+      <Line d={BOTTLE_ART.foot} tone="faint" />
+      <Line d={BOTTLE_ART.level} tone="lo" />
+      <Line d={BOTTLE_ART.shine} tone="mid" />
+      <Solid className="ml-bottle" paths={BOTTLE_ART.shoulder} tone="hi" crease="faint" />
+      <Solid paths={BOTTLE_ART.neck} tone="mid" crease="faint" />
+      <Solid paths={BOTTLE_ART.collar} tone="mid" crease="faint" />
+      <Solid paths={BOTTLE_ART.cap} tone="hi" crease="lo" />
+      <Line d={BOTTLE_ART.capKnurl} tone="lo" />
+      <Line d={BOTTLE_ART.capRing} tone="faint" />
+      <Solid paths={BOTTLE_ART.bulb} tone="mid" crease="faint" />
+      <Line d={BOTTLE_ART.bulbShine} tone="lo" />
+      <Line d={BOTTLE_ART.bulbRing} tone="faint" />
+      <Dots points={[BOTTLE_ART.tip]} size={0.45} tone="mid" />
+    </Lit>
+    <Lit id="fan">
+      <Line d={DECK_ART.guide} tone="faint" dashed />
+      {DECK_ART.stops.map((paths, index) => (
+        <Solid key={index} paths={paths} tone="mid" crease="faint" />
+      ))}
+      <Dots points={DECK_ART.stopTops} size={0.45} tone="hi" />
+      <Solid paths={DECK_ART.bandBack} tone="mid" crease="faint" />
+      <FaceText transform={DECK_ART.label} size={4.2} tone="lo">
+        merge
+      </FaceText>
+      <Solid paths={DECK_ART.washer} tone="lo" crease="faint" />
+    </Lit>
+  </g>
+);
+
+const FRONT = (
+  <Lit key="front" id="fan">
+    <Solid paths={DECK_ART.bandFront} tone="mid" crease="faint" />
+    <Line d={DECK_ART.bandLine} tone="faint" />
+    <Line d={DECK_ART.minor} tone="lo" />
+    <Line d={DECK_ART.major} tone="mid" />
+    <Dots points={DECK_ART.gapDots} size={0.55} tone="hi" />
+    <Dots points={[...DECK_ART.ends, DECK_ART.seam]} size={0.45} tone="mid" />
+    <Solid paths={DECK_ART.cap} tone="mid" crease="faint" />
+    <Solid paths={DECK_ART.nut} tone="hi" crease="lo" />
+    <Line d={DECK_ART.nutKnurl} tone="lo" />
+    <Line d={DECK_ART.nutRing} tone="faint" />
+    <Dots points={[DECK_ART.pin]} size={0.6} tone="hi" />
+  </Lit>
+);
+
+export function LiquidArt() {
+  return <LiquidLive label={LABEL} back={BACK} deck={DECK} front={FRONT} />;
+}