axstack 0.36.1 → 0.38.0

package/skills/axstack-anatomy/examples/test-rig/rig.ts

@@ -0,0 +1,170 @@
+export type Pair = [number, number];
+export type Tuning = readonly [number, number];
+
+export interface Spring {
+  at: number;
+  rate: number;
+}
+
+export interface Member {
+  swell: Spring;
+  lean: Spring;
+}
+
+export interface Pose {
+  mid: number;
+  half: Pair;
+  lean: number;
+  press: number;
+}
+
+export const HALF: Pair = [60, 16];
+export const SWELL = 0.08;
+export const SWELL_MOST = 6;
+export const SWELL_FLOOR = -0.25;
+export const RUBBER = 0.55;
+const STRETCH = 0.35;
+export const STRETCH_MOST = 0.08;
+const THIN = 0.5;
+const SOFT = 1;
+export const GIVE = 14;
+export const REACH = 0.15;
+export const GIVE_MOST = 0.25;
+const QUIET = 0.0005;
+const SUB_RATE = 240;
+export const FRAME = 1 / 60;
+
+export const PRESS_SPRING: Tuning = [700, 32];
+export const HOLD_SPRING: Tuning = [540, 40];
+export const RELEASE_SPRING: Tuning = [320, 16];
+
+const LONGEST = Math.max(HALF[0], HALF[1]);
+export const SHARE = Math.min(SWELL, SWELL_MOST / LONGEST);
+export const GIVEN = Math.min(GIVE, REACH * 2 * LONGEST);
+export const ACROSS = (GIVEN * HALF[1]) / LONGEST;
+
+export const zeta = ([stiff, drag]: Tuning) => drag / (2 * Math.sqrt(stiff));
+
+function spring(held: Spring, want: number, dt: number, [stiff, drag]: Tuning, calm: boolean) {
+  const damping = calm ? 2 * Math.sqrt(stiff) : drag;
+  const steps = Math.max(Math.ceil(dt * SUB_RATE), 1);
+  const slice = dt / steps;
+  for (let step = 0; step < steps; step++) {
+    held.rate += (want - held.at) * stiff * slice - held.rate * damping * slice;
+    held.at += held.rate * slice;
+  }
+  if (Math.abs(want - held.at) < QUIET && Math.abs(held.rate) < QUIET) {
+    held.at = want;
+    held.rate = 0;
+  }
+}
+
+export function rubberBand(distance: number, limit: number) {
+  return limit <= 0 ? 0 : limit * (1 - 1 / (1 + (RUBBER * distance) / limit));
+}
+
+const softened = (value: number) => Math.hypot(value, SOFT) - SOFT;
+
+function stretched(lean: number, half: number, grow: number) {
+  const most = STRETCH_MOST * grow * half;
+  return most * Math.tanh((STRETCH * softened(lean)) / most);
+}
+
+export const grownOf = (member: Member) => 1 + SHARE * Math.max(member.swell.at, SWELL_FLOOR);
+
+export const memberAt = (swell = 0, lean = 0): Member => ({ swell: { at: swell, rate: 0 }, lean: { at: lean, rate: 0 } });
+
+export function step(member: Member, held: boolean, pull: number, dt: number, calm = false) {
+  spring(member.swell, held ? 1 : 0, dt, held ? PRESS_SPRING : RELEASE_SPRING, calm);
+  const want = held && !calm ? Math.sign(pull) * rubberBand(Math.abs(pull), GIVEN) : 0;
+  spring(member.lean, want, dt, held ? HOLD_SPRING : RELEASE_SPRING, calm);
+}
+
+export function poseOf(member: Member): Pose {
+  const grow = grownOf(member);
+  const lean = member.lean.at;
+  const stretch = stretched(lean, HALF[0], grow);
+  const ratio = 1 + stretch / (grow * HALF[0]);
+  return {
+    mid: lean - Math.sign(lean) * stretch,
+    half: [grow * HALF[0] * ratio, grow * HALF[1] * Math.pow(ratio, -THIN)],
+    lean,
+    press: Math.min(Math.max(member.swell.at, 0), 1.2),
+  };
+}
+
+export const carried = (pose: Pose, x: number) => pose.mid + (pose.half[0] / HALF[0]) * x;
+
+export const settled = (member: Member, held: boolean, pull: number) =>
+  member.swell.rate === 0 && member.lean.rate === 0 && member.swell.at === (held ? 1 : 0) && (held || member.lean.at === 0) && (held || pull === 0);
+
+export const one = (value: number) => {
+  const text = (Math.round(value * 10) / 10).toFixed(1);
+  return text === "-0.0" ? "0.0" : text;
+};
+
+export const two = (value: number) => (Math.round(value * 100) / 100).toFixed(2);
+
+export const sizeText = (pose: Pose) => `${one(pose.half[0] * 2)} × ${one(pose.half[1] * 2)}`;
+
+export function steady(pull: number) {
+  const member = memberAt();
+  for (let frame = 0; frame < 360; frame++) step(member, true, pull, FRAME);
+  return poseOf(member);
+}
+
+function pressRun() {
+  const member = memberAt();
+  let peak = 0;
+  let peakAt = 0;
+  for (let frame = 1; frame <= 120; frame++) {
+    step(member, true, 0, FRAME);
+    const tall = poseOf(member).half[1] * 2;
+    if (tall > peak) {
+      peak = tall;
+      peakAt = frame * FRAME;
+    }
+  }
+  return { peak, peakAt };
+}
+
+export const STILL_ENOUGH = 0.1;
+
+function releaseRun(pull: number) {
+  const member = memberAt();
+  for (let frame = 0; frame < 360; frame++) step(member, true, pull, FRAME);
+  let swing = 0;
+  let swingAt = 0;
+  let dip = 0;
+  let still = 0;
+  for (let frame = 1; frame <= 300; frame++) {
+    step(member, false, 0, FRAME);
+    const lean = member.lean.at;
+    if (-Math.sign(pull) * lean > swing) {
+      swing = -Math.sign(pull) * lean;
+      swingAt = frame * FRAME;
+    }
+    dip = Math.max(dip, (1 - grownOf(member)) * 100);
+    const pose = poseOf(member);
+    const edges = [pose.mid - pose.half[0], pose.mid + pose.half[0], -pose.half[1], pose.half[1]];
+    const rest = [-HALF[0], HALF[0], -HALF[1], HALF[1]];
+    const off = Math.max(...edges.map((edge, index) => Math.abs(edge - rest[index]!)));
+    if (off > STILL_ENOUGH) still = (frame + 1) * FRAME;
+  }
+  return { swing, swingAt, dip, still };
+}
+
+export const DRAG = 80;
+export const PULL_MOST = 110;
+export const REST: Pose = { mid: 0, half: [HALF[0], HALF[1]], lean: 0, press: 0 };
+export const PRESSED = steady(0);
+export const PULLED = steady(-DRAG);
+export const PULLED_MOST = steady(-PULL_MOST);
+export const PRESS_RUN = pressRun();
+export const RELEASE_RUN = releaseRun(-DRAG);
+export const DIP_MOST = -SWELL_FLOOR * SHARE * 100;
+export const SIDE_GROWTH = SHARE * HALF[0];
+
+export function readoutOf(pose: Pose) {
+  return `${sizeText(pose)} · lean ${one(Math.abs(pose.lean))} px`;
+}

package/skills/axstack-anatomy/examples/test-rig/stretch.css

@@ -0,0 +1,80 @@
+.ms {
+  --ms-glass-top: #262626;
+  --ms-glass-lit-top: #2e2e2e;
+  border-radius: 10px;
+  cursor: grab;
+  touch-action: pan-y;
+  -webkit-tap-highlight-color: transparent;
+  -webkit-user-select: none;
+  user-select: none;
+}
+
+.iso[data-theme="light"] .ms {
+  --ms-glass-top: #fefefd;
+  --ms-glass-lit-top: #fffffe;
+}
+
+.ms[data-held] {
+  cursor: grabbing;
+}
+
+.ms:focus-visible {
+  outline: 1px solid var(--anatomy-muted);
+  outline-offset: 6px;
+}
+
+.ms .iso-svg {
+  overflow: visible;
+}
+
+.ms-glass > .iso-top {
+  fill: var(--ms-glass-top);
+}
+
+.ms-glass[data-lit] > .iso-top {
+  fill: var(--ms-glass-lit-top);
+}
+
+.ms-glass[data-lit] > .iso-edge {
+  stroke: var(--anatomy-lit);
+}
+
+.ms-shine {
+  stroke-linecap: round;
+  opacity: 0.55;
+}
+
+.ms-shadow {
+  filter: blur(4px);
+  opacity: 0.8;
+  transform: translateY(1px);
+}
+
+.ms-coil {
+  stroke-linejoin: round;
+}
+
+.ms-needle {
+  fill: var(--anatomy-lit-top);
+}
+
+.ms-pull .iso-wire-end {
+  transition: opacity 160ms var(--anatomy-ease);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ms * {
+    transition: none !important;
+  }
+}
+
+@media (max-width: 640px) {
+  .ms {
+    overflow: hidden;
+  }
+
+  .iso-plate .ms .iso-svg {
+    width: 118%;
+    margin: -4% -9% -3%;
+  }
+}

package/skills/axstack-anatomy/examples/test-rig/view.ts

@@ -0,0 +1,99 @@
+import { iso, type Flat, type Plan, type Point3, type Projection } from "../../kit/iso-kit";
+
+export const WIDTH = 600;
+export const HEIGHT = 340;
+const PAD = 34;
+export const AZIMUTH = 57;
+
+export const BASE: Plan = { x: -134, y: -82, w: 298, d: 150, r: 9 };
+export const BASE_H = 9;
+export const FOOT_H = 5;
+
+export const FRAME_X = 101;
+export const FRAME_Y = 37;
+export const BAR = 9;
+export const BAR_H = 12;
+
+export const ROD_Y = 18;
+export const ROD_Z = 6;
+export const ROD_HALF = 2;
+export const COIL_R = 4.2;
+export const COIL_TURNS = 6;
+
+export const CARRIAGE: Plan = { x: -72, y: -26, w: 144, d: 52, r: 4 };
+export const CARRIAGE_Z = 3;
+export const CARRIAGE_H = 5;
+export const CARRIAGE_TOP = CARRIAGE_Z + CARRIAGE_H;
+export const BUSH_END = 80;
+export const BUSH_W = 14;
+export const BUSH_D = 12;
+
+export const GLASS_Z = CARRIAGE_TOP;
+export const GLASS_H = 10;
+export const GLASS_TOP = GLASS_Z + GLASS_H;
+
+export const PLUNGER_Z = 6;
+export const DIAL: Flat = [131, 0];
+export const DIAL_R = 15;
+export const DIAL_Z = 3;
+export const DIAL_H = 8;
+export const DIAL_TOP = DIAL_Z + DIAL_H;
+export const DIAL_SPAN = 20;
+
+export const RAIL_Y = -66;
+export const RAIL_D = 8;
+export const RAIL_Z = 50;
+export const RAIL_H = 8;
+export const POST_L = -124;
+export const POST_R = 66;
+export const POST = 12;
+
+export const PROBE_HOME = 45;
+export const PROBE_MIN = -98;
+export const PROBE_MAX = 48;
+export const HOUSING_R = 5.5;
+export const HOUSING_Z = 44;
+export const HOUSING_H = 20;
+export const PAD_R = 4.4;
+export const PAD_H = 3;
+export const HOVER = 12;
+export const STEM = 28;
+
+export const GRAB_MOST = 52;
+export const FINGER_MOST = 62;
+
+function fit(points: Point3[]): Projection {
+  const unit: Projection = { origin: [0, 0], scale: 1, azimuth: AZIMUTH };
+  const flat = points.map((point) => iso(point, unit));
+  const xs = flat.map(([x]) => x);
+  const ys = flat.map(([, y]) => y);
+  const left = Math.min(...xs);
+  const right = Math.max(...xs);
+  const up = Math.min(...ys);
+  const down = Math.max(...ys);
+  const scale = Math.min((WIDTH - PAD * 2) / (right - left), (HEIGHT - PAD * 2) / (down - up));
+  return { origin: [WIDTH / 2 - ((left + right) / 2) * scale, HEIGHT / 2 - ((up + down) / 2) * scale], scale, azimuth: AZIMUTH };
+}
+
+const corners = ({ x, y, w, d }: Plan, z0: number, z1: number): Point3[] => {
+  const out: Point3[] = [];
+  for (const px of [x, x + w]) for (const py of [y, y + d]) for (const z of [z0, z1]) out.push([px, py, z]);
+  return out;
+};
+
+export const P = fit([
+  ...corners(BASE, -BASE_H - FOOT_H, 0),
+  ...corners({ x: POST_L, y: RAIL_Y - RAIL_D / 2, w: POST_R + POST - POST_L, d: RAIL_D, r: 0 }, RAIL_Z, RAIL_Z + RAIL_H + 6),
+]);
+
+export const at = (point: Point3) => iso(point, P);
+
+const ORIGIN = at([0, 0, 0]);
+const minus = (a: Flat, b: Flat): Flat => [a[0] - b[0], a[1] - b[1]];
+export const EX = minus(at([1, 0, 0]), ORIGIN);
+export const EZ = minus(at([0, 0, 1]), ORIGIN);
+
+const fine = (value: number) => Math.round(value * 100) / 100;
+
+export const shift = (x: number, z = 0) => `translate(${fine(EX[0] * x + EZ[0] * z)} ${fine(EX[1] * x + EZ[1] * z)})`;
+