@johnmorrisdotca/uchusen-rockets 0.4.0 → 0.5.0

package/dist/element/plumes.js

@@ -1,4 +1,3 @@
-// Flames for the 3D view, made here and loaded only with it. One shape, one material and one instanced draw for every engine of a part, however many burn, so lighting and dousing engines changes numbers, never what the graphics card holds. The look of a flame (its shock diamonds, its length, its glow) is a picture, not a measurement.
 import { AdditiveBlending, BufferGeometry, Color, DoubleSide, DynamicDrawUsage, Float32BufferAttribute, Group, InstancedMesh, Matrix4, PointLight, Quaternion, ShaderMaterial, Vector3 } from "three";
 import { PLUME_DIAMONDS, plumeLength } from "../engines.js";
 const STEPS = 28;
@@ -100,9 +99,14 @@ function glowShape() {
     geometry.setIndex([0, 1, 2, 0, 2, 3]);
     return geometry;
 }
-const FUEL_COLOURS = {
-    methane: { hot: "#fff1e6", cool: "#6f7dff" },
+/** What a flame is drawn in: the kind of flame its engine's propellant gives (`src/data/propellants.ts`), and a neutral grey-white where no page read says. A picture, not a measurement. */
+const FLAME_TONES = {
     kerosene: { hot: "#fff4d2", cool: "#ff7a1a" },
+    methane: { hot: "#fff1e6", cool: "#6f7dff" },
+    hydrogen: { hot: "#ffffff", cool: "#6fa8ff" },
+    solid: { hot: "#fff1c4", cool: "#ff4a12" },
+    hypergolic: { hot: "#ffffff", cool: "#b8c4ee" },
+    neutral: { hot: "#ffffff", cool: "#9aa3b2" },
 };
 const place = new Matrix4();
 const still = new Quaternion();
@@ -115,11 +119,11 @@ export class PartPlumes {
     flames;
     glows;
     key = "";
-    constructor(kit, bells) {
+    constructor(kit, bells, kind) {
         this.bells = bells;
         this.group.name = "plumes";
-        this.flames = new InstancedMesh(kit.shape, kit.flame, bells.length);
-        this.glows = new InstancedMesh(kit.quad, kit.glow, bells.length);
+        this.flames = new InstancedMesh(kit.shape, kit.flameFor(kind), bells.length);
+        this.glows = new InstancedMesh(kit.quad, kit.glowFor(kind), bells.length);
         for (const mesh of [this.flames, this.glows]) {
             mesh.instanceMatrix.setUsage(DynamicDrawUsage);
             mesh.frustumCulled = false;
@@ -149,12 +153,10 @@ export class PartPlumes {
         this.glows.dispose();
     }
 }
-/** One set of everything a flame needs, for one viewer. */
+/** One set of everything a flame needs, for one viewer. The materials of each kind of flame share one program and one set of clocks; only the two colours differ. */
 export class PlumeKit {
     shape = flameShape();
     quad = glowShape();
-    flame;
-    glow;
     /** The hull's own glow in the painted look. Always in the scene, at no strength when no engine burns, so lighting engines never makes the materials build again. */
     light = new PointLight("#ffb56b", 0, 0, 1.6);
     uniforms = {
@@ -164,21 +166,31 @@ export class PlumeKit {
         uLine: { value: 1 },
         uFloor: { value: -1e6 },
         uGlow: { value: 0.75 },
-        uHot: { value: new Color(FUEL_COLOURS.kerosene.hot) },
-        uCool: { value: new Color(FUEL_COLOURS.kerosene.cool) },
     };
-    constructor() {
-        const common = { transparent: true, depthWrite: false, blending: AdditiveBlending, toneMapped: false };
-        this.flame = new ShaderMaterial({ ...common, vertexShader: FLAME_VERTEX, fragmentShader: FLAME_FRAGMENT, uniforms: this.uniforms, side: DoubleSide });
-        this.glow = new ShaderMaterial({ ...common, vertexShader: GLOW_VERTEX, fragmentShader: GLOW_FRAGMENT, uniforms: this.uniforms });
+    kinds = new Map();
+    kind(kind) {
+        const known = this.kinds.get(kind);
+        if (known)
+            return known;
+        const tone = FLAME_TONES[kind];
+        const uniforms = { ...this.uniforms, uHot: { value: new Color(tone.hot) }, uCool: { value: new Color(tone.cool) } };
+        const common = { transparent: true, depthWrite: false, blending: AdditiveBlending, toneMapped: false, uniforms };
+        const made = {
+            flame: new ShaderMaterial({ ...common, vertexShader: FLAME_VERTEX, fragmentShader: FLAME_FRAGMENT, side: DoubleSide }),
+            glow: new ShaderMaterial({ ...common, vertexShader: GLOW_VERTEX, fragmentShader: GLOW_FRAGMENT }),
+        };
+        this.kinds.set(kind, made);
+        return made;
+    }
+    flameFor(kind) {
+        return this.kind(kind).flame;
+    }
+    glowFor(kind) {
+        return this.kind(kind).glow;
     }
     setLook(painted) {
         this.uniforms.uLine.value = painted ? 0 : 1;
     }
-    setFuel(fuel) {
-        this.uniforms.uHot.value.set(FUEL_COLOURS[fuel].hot);
-        this.uniforms.uCool.value.set(FUEL_COLOURS[fuel].cool);
-    }
     /** 0 near the ground, 1 high up where a flame fans out. */
     setAir(air) {
         this.uniforms.uAir.value = air;
@@ -200,8 +212,11 @@ export class PlumeKit {
     dispose() {
         this.shape.dispose();
         this.quad.dispose();
-        this.flame.dispose();
-        this.glow.dispose();
+        for (const { flame, glow } of this.kinds.values()) {
+            flame.dispose();
+            glow.dispose();
+        }
+        this.kinds.clear();
         this.light.dispose();
         this.light.removeFromParent();
     }

package/dist/element/scene.js

@@ -77,8 +77,6 @@ void main() {
 /** The materials of an engine's bell, in this package's own meshes. */
 const NOZZLE_MATERIALS = new Set(["bell", "bell-inside", "engine-metal"]);
 const asVec = (v) => [v.x, v.y, v.z];
-/** A flame's colours, a picture: Raptor burns methane, Merlin kerosene. */
-const fuelOf = (built) => (built.report.parts.some(({ part }) => part.rocket === "starship") ? "methane" : "kerosene");
 /** The pictures a licensed model's material may hold (the shared sky it reflects is not one of them). */
 const MODEL_PICTURES = ["map", "normalMap", "roughnessMap", "metalnessMap", "aoMap", "emissiveMap"];
 export class RocketViewer {
@@ -242,8 +240,20 @@ export class RocketViewer {
                 to: [0, 0, 0],
                 hideAtEnd: false,
                 plumes: null,
+                moves: [],
             };
             this.takeMeshes(source, code, view);
+            for (const node of source.children.slice(1)) {
+                const axis = node.userData.axis;
+                if (!axis)
+                    continue;
+                const group = new Group();
+                group.name = node.name;
+                group.position.copy(node.position);
+                code.add(group);
+                this.takeMeshes(node, group, view);
+                view.moves.push({ name: String(node.userData.group), group, axis: new Vector3(axis[0], axis[1], axis[2]).normalize(), angle: 0 });
+            }
             const place = places.find((p) => p.slot === part.slot);
             holder.position.set(...(place?.at ?? [0, 0, 0]));
             holder.visible = place?.shown ?? false;
@@ -252,7 +262,6 @@ export class RocketViewer {
         }
         this.addGlow();
         this.setLook(look);
-        this.plumes.setFuel(fuelOf(built));
         this.frameTo(angle ?? this.currentAngle(), false);
         if (this.clockNow) {
             this.flightKey = "";
@@ -455,10 +464,11 @@ export class RocketViewer {
         for (const view of this.parts) {
             const count = counts.get(view.slot) ?? 0;
             if (count > 0 && !view.plumes) {
-                const bells = bellsOf(this.built.parts.find((part) => part.slot === view.slot)?.pieces ?? []);
+                const built = this.built.parts.find((part) => part.slot === view.slot);
+                const bells = bellsOf(built?.pieces ?? []);
                 if (bells.length === 0)
                     continue;
-                view.plumes = new PartPlumes(this.plumes, bells);
+                view.plumes = new PartPlumes(this.plumes, bells, built?.flame ?? "neutral");
                 view.holder.add(view.plumes.group);
             }
             if (!view.plumes)
@@ -507,7 +517,12 @@ export class RocketViewer {
                 part.holder.position.set(...(place?.at ?? [0, 0, 0]));
                 part.holder.rotation.set(0, 0, 0);
                 part.holder.visible = place?.shown ?? false;
+                for (const move of part.moves) {
+                    move.angle = 0;
+                    move.group.quaternion.identity();
+                }
             }
+            this.canvas.dataset.turned = "";
             this.plumes.setAir(0);
             this.plumes.setFloor(-1e6);
             this.reframe();
@@ -583,10 +598,20 @@ export class RocketViewer {
                 continue;
             const turn = MathUtils.degToRad(pose.pitch);
             const middle = (parts.find((one) => one.slot === part.slot)?.height ?? 0) / 2;
+            for (const move of part.moves) {
+                const angle = pose.moves[move.name] ?? 0;
+                if (angle === move.angle)
+                    continue;
+                move.angle = angle;
+                move.group.quaternion.setFromAxisAngle(move.axis, MathUtils.degToRad(angle));
+            }
             part.holder.visible = !pose.gone;
             part.holder.rotation.set(0, 0, turn);
             part.holder.position.set(place.at[0] + pose.dx + Math.sin(turn) * middle, place.at[1] + pose.dy + middle - Math.cos(turn) * middle, place.at[2]);
         }
+        const turned = this.parts.flatMap((part) => part.moves.filter((move) => move.angle !== 0).map((move) => `${part.slot}:${move.group.name.split("~").slice(1).join("~")}=${Math.round(move.angle)}`)).join(" ");
+        if (turned !== this.canvas.dataset.turned)
+            this.canvas.dataset.turned = turned;
         this.plumes.setAir(frame.air);
         this.plumes.setFloor(frame.groundY);
         this.ground?.set(frame.groundY, this.options.reducedMotion ? 0 : frame.smoke, performance.now() / 1000);

package/dist/element.js

@@ -503,11 +503,12 @@ export class UchusenRocket extends HTMLBase {
         const from = this.driven ? turnedBy(angle, this.driven.yaw, this.driven.tilt) : (this.viewer?.currentAngle() ?? angle);
         const label = this.getAttribute("label") ?? this.builtNow.report.label;
         const lit = flying ? (media("(prefers-reduced-motion: reduce)") ? false : flying.burns) : this.engineLights();
-        const key = `${this.key}|${look}|${show}|${from.az.toFixed(2)}|${from.el.toFixed(2)}|${label}|${flying ? flying.index : ""}|${JSON.stringify(lit)}`;
+        const moves = flying ? Object.fromEntries(Object.entries(flying.phase.pose).flatMap(([slot, pose]) => (pose.moves ? [[slot, pose.moves]] : []))) : undefined;
+        const key = `${this.key}|${look}|${show}|${from.az.toFixed(2)}|${from.el.toFixed(2)}|${label}|${flying ? flying.index : ""}|${JSON.stringify(lit)}|${JSON.stringify(moves ?? {})}`;
         let node = this.drawing.firstElementChild;
         if (key !== this.drawn.key || !node) {
             const template = document.createElement("template");
-            template.innerHTML = this.builtNow.svg({ look, show, view: from, engines: lit });
+            template.innerHTML = this.builtNow.svg({ look, show, view: from, engines: lit, ...(moves ? { moves } : {}) });
             node = template.content.firstElementChild;
             if (!node)
                 return;

package/dist/flight.d.ts

@@ -93,6 +93,8 @@ export interface PoseNow {
     dy: number;
     pitch: number;
     gone: boolean;
+    /** Degrees each moving group is turned, by name. */
+    moves: Readonly<Record<string, number>>;
 }
 /**
  * Everything the picture needs at one place on the timeline: the phase, how each part stands, which engines burn, how far the ground has fallen, and how much smoke stands on the pad.

package/dist/flight.js

@@ -103,7 +103,14 @@ const poseIn = (pose, part, height) => ({
     dy: pose?.rest ? -part.baseY : (pose?.dy ?? 0) * height,
     pitch: pose?.pitch ?? 0,
     gone: pose?.gone ?? false,
+    moves: pose?.moves ?? {},
 });
+const mixMoves = (from, to, t) => {
+    const out = {};
+    for (const name of new Set([...Object.keys(from), ...Object.keys(to)]))
+        out[name] = mix(from[name] ?? 0, to[name] ?? 0, t);
+    return out;
+};
 /**
  * Everything the picture needs at a place on the timeline, for a vehicle `height` metres tall.
  *
@@ -129,7 +136,7 @@ export function frameAt(flight, position, parts, height) {
     for (const part of parts) {
         const from = poseIn(phase.pose[part.slot], part, height);
         const to = poseIn(next.pose[part.slot], part, height);
-        const now = { dx: mix(from.dx, to.dx, t), dy: mix(from.dy, to.dy, t), pitch: mix(from.pitch, to.pitch, t), gone: from.gone };
+        const now = { dx: mix(from.dx, to.dx, t), dy: mix(from.dy, to.dy, t), pitch: mix(from.pitch, to.pitch, t), gone: from.gone, moves: mixMoves(from.moves, to.moves, t) };
         poses[part.slot] = now;
         if (now.dx !== 0 || now.dy !== 0)
             separated = true;

package/dist/flightbar.js

@@ -167,7 +167,7 @@ export class UchusenFlight extends HTMLBase {
         parts.leave.disabled = !state.active;
         parts.range.value = String(state.position);
         parts.range.setAttribute("aria-valuetext", `${clockWords(phase.at)}, ${phase.name}`);
-        parts.now.textContent = `${clockWords(phase.at)}, ${phase.name}${phase.altitude?.value ? `, ${phase.altitude.value}` : ""}`;
+        parts.now.textContent = `${clockWords(phase.at)}, ${phase.name}${phase.altitude?.value ? `, ${phase.altitude.value}` : ""}${phase.speed?.value ? `, ${phase.speed.value}` : ""}`;
         parts.what.textContent = phase.what;
         const chartKey = `${flight.id}/${index}/${state.active}`;
         if (chartKey !== this.chartKey) {

package/dist/index.d.ts

@@ -6,6 +6,9 @@ export { MAKERS } from "./data/makers.ts";
 export type { MakerId } from "./data/makers.ts";
 export { FLIGHT_LOG, flightLogOf } from "./data/flight-log.ts";
 export type { LoggedFlight } from "./data/flight-log.ts";
+export { moved, movingGroupsOf } from "./model/moves.ts";
+export { PROPELLANTS, propellantOf } from "./data/propellants.ts";
+export type { EnginePropellant, FlameKind } from "./data/propellants.ts";
 export { SOURCES } from "./data/sources.ts";
 export type { Source, SourceId } from "./data/sources.ts";
 export { creditLine, MODEL_CREDITS } from "./data/credits.ts";

package/dist/index.js

@@ -3,6 +3,8 @@ export { PLANNED_ROCKETS, ROCKETS, partIdOf, SLOT_NAMES, variantOf } from "./roc
 export { blank, figureWords } from "./data/types.js";
 export { MAKERS } from "./data/makers.js";
 export { FLIGHT_LOG, flightLogOf } from "./data/flight-log.js";
+export { moved, movingGroupsOf } from "./model/moves.js";
+export { PROPELLANTS, propellantOf } from "./data/propellants.js";
 export { SOURCES } from "./data/sources.js";
 export { creditLine, MODEL_CREDITS } from "./data/credits.js";
 export { PART_ENTRIES, partEntry } from "./model/registry.js";

package/dist/model/falcon.js

@@ -56,11 +56,11 @@ function firstStage(d, withTop) {
     if (d.legs)
         for (const az of [45, 135, 225, 315]) {
             const frame = radial(deg(az));
-            pieces.push({ kind: "plate", material: "black", frame, outline: [[r - 0.05, 0.8], [r + 0.5, 0.8], [r + 0.55, 3], [r + 0.15, 10.5], [r - 0.05, 11]], thickness: 1.2 });
+            pieces.push({ kind: "plate", material: "black", frame, outline: [[r - 0.05, 0.8], [r + 0.5, 0.8], [r + 0.55, 3], [r + 0.15, 10.5], [r - 0.05, 11]], thickness: 1.2, move: { name: "legs", pivot: pointOf(frame, r + 0.2, 0.8), axis: frame.w } });
         }
     if (d.fins)
         for (const az of [45, 135, 225, 315])
-            pieces.push(...gridFin(az, tank + 0.1, r, r + 1.4, 1.5, 0.3, false));
+            pieces.push(...gridFin(az, tank + 0.1, r, r + 1.4, 1.5, 0.3, false, { name: "grid-fins", about: "tangent" }));
     return pieces;
 }
 function secondStage(d) {

package/dist/model/moves.d.ts

@@ -0,0 +1,36 @@
+import type { Piece, Vec3 } from "./pieces.ts";
+/** A direction turned by `degrees` right-handed about `axis` (Rodrigues' rotation). */
+export declare function turnedVector(v: Vec3, axis: Vec3, degrees: number): Vec3;
+/** A point turned about a pivot. */
+export declare function turnedPoint(p: Vec3, pivot: Vec3, axis: Vec3, degrees: number): Vec3;
+/**
+ * The pieces with each moving group turned by the angle its name has in `angles` (degrees, 0 where it has none). A turned piece no longer carries its `move`: it is drawn where it stands. A body of revolution cannot turn, and is left as it is.
+ *
+ * @param pieces The pieces of a part.
+ * @param angles Degrees by the name of a moving group, such as `grid-fins`.
+ * @returns The pieces, with the moving groups turned.
+ * @example
+ * ```ts
+ * import { build } from "@johnmorrisdotca/uchusen-rockets/build";
+ * import { movingGroupsOf } from "@johnmorrisdotca/uchusen-rockets";
+ *
+ * const booster = build({ rocket: "starship", variant: "v3" }).parts[0];
+ * console.log(booster ? movingGroupsOf(booster.pieces) : []);
+ * ```
+ */
+export declare function moved(pieces: readonly Piece[], angles: Readonly<Record<string, number>>): readonly Piece[];
+/**
+ * The names of the groups a part has that a flight can turn.
+ *
+ * @param pieces The pieces of a part.
+ * @returns The distinct names, in the order they come.
+ * @example
+ * ```ts
+ * import { build } from "@johnmorrisdotca/uchusen-rockets/build";
+ * import { movingGroupsOf } from "@johnmorrisdotca/uchusen-rockets";
+ *
+ * const stage = build({ rocket: "falcon-9", variant: "block-5" }).parts[0];
+ * console.log(stage ? movingGroupsOf(stage.pieces) : []);
+ * ```
+ */
+export declare function movingGroupsOf(pieces: readonly Piece[]): string[];

package/dist/model/moves.js

@@ -0,0 +1,70 @@
+const unit = (v) => {
+    const length = Math.hypot(...v) || 1;
+    return [v[0] / length, v[1] / length, v[2] / length];
+};
+/** A direction turned by `degrees` right-handed about `axis` (Rodrigues' rotation). */
+export function turnedVector(v, axis, degrees) {
+    const k = unit(axis);
+    const a = (degrees * Math.PI) / 180;
+    const cos = Math.cos(a);
+    const sin = Math.sin(a);
+    const dot = k[0] * v[0] + k[1] * v[1] + k[2] * v[2];
+    const cross = [k[1] * v[2] - k[2] * v[1], k[2] * v[0] - k[0] * v[2], k[0] * v[1] - k[1] * v[0]];
+    return [v[0] * cos + cross[0] * sin + k[0] * dot * (1 - cos), v[1] * cos + cross[1] * sin + k[1] * dot * (1 - cos), v[2] * cos + cross[2] * sin + k[2] * dot * (1 - cos)];
+}
+/** A point turned about a pivot. */
+export function turnedPoint(p, pivot, axis, degrees) {
+    const d = turnedVector([p[0] - pivot[0], p[1] - pivot[1], p[2] - pivot[2]], axis, degrees);
+    return [pivot[0] + d[0], pivot[1] + d[1], pivot[2] + d[2]];
+}
+const turnedFrame = (f, move, degrees) => ({
+    o: turnedPoint(f.o, move.pivot, move.axis, degrees),
+    u: turnedVector(f.u, move.axis, degrees),
+    v: turnedVector(f.v, move.axis, degrees),
+    w: turnedVector(f.w, move.axis, degrees),
+});
+/**
+ * The pieces with each moving group turned by the angle its name has in `angles` (degrees, 0 where it has none). A turned piece no longer carries its `move`: it is drawn where it stands. A body of revolution cannot turn, and is left as it is.
+ *
+ * @param pieces The pieces of a part.
+ * @param angles Degrees by the name of a moving group, such as `grid-fins`.
+ * @returns The pieces, with the moving groups turned.
+ * @example
+ * ```ts
+ * import { build } from "@johnmorrisdotca/uchusen-rockets/build";
+ * import { movingGroupsOf } from "@johnmorrisdotca/uchusen-rockets";
+ *
+ * const booster = build({ rocket: "starship", variant: "v3" }).parts[0];
+ * console.log(booster ? movingGroupsOf(booster.pieces) : []);
+ * ```
+ */
+export function moved(pieces, angles) {
+    if (!pieces.some((piece) => piece.move && angles[piece.move.name]))
+        return pieces;
+    return pieces.map((piece) => {
+        const move = piece.move;
+        const degrees = move ? (angles[move.name] ?? 0) : 0;
+        if (!move || degrees === 0 || piece.kind === "lathe")
+            return piece;
+        if (piece.kind === "plate")
+            return { ...piece, move: undefined, frame: turnedFrame(piece.frame, move, degrees) };
+        return { ...piece, move: undefined, paths: piece.paths.map((path) => path.map((p) => turnedPoint(p, move.pivot, move.axis, degrees))) };
+    });
+}
+/**
+ * The names of the groups a part has that a flight can turn.
+ *
+ * @param pieces The pieces of a part.
+ * @returns The distinct names, in the order they come.
+ * @example
+ * ```ts
+ * import { build } from "@johnmorrisdotca/uchusen-rockets/build";
+ * import { movingGroupsOf } from "@johnmorrisdotca/uchusen-rockets";
+ *
+ * const stage = build({ rocket: "falcon-9", variant: "block-5" }).parts[0];
+ * console.log(stage ? movingGroupsOf(stage.pieces) : []);
+ * ```
+ */
+export function movingGroupsOf(pieces) {
+    return [...new Set(pieces.flatMap((piece) => (piece.move ? [piece.move.name] : [])))];
+}

package/dist/model/pieces.d.ts

@@ -7,6 +7,15 @@ export interface Frame {
     v: Vec3;
     w: Vec3;
 }
+/**
+ * A piece that a flight can turn: the name of the group it belongs to (every piece with the same name and pivot turns together), the point it turns about and the axis it turns round, in the part's own metres.
+ * A positive angle turns it right-handed about the axis. The piece is drawn where its group is at rest, which is the angle 0.
+ */
+export interface Move {
+    name: string;
+    pivot: Vec3;
+    axis: Vec3;
+}
 /** A body of revolution: `profile` is [radius, y] points going up the outside (going the other way faces inward). */
 export interface Lathe {
     kind: "lathe";
@@ -32,6 +41,7 @@ export interface Lathe {
     body?: boolean;
     /** Its outline is drawn in a drawing. */
     outline?: boolean;
+    move?: Move;
 }
 /** A flat outline with a thickness, in a frame: `outline` is [u, v] points, going round; it stands from -thickness/2 to +thickness/2 along w. Convex, or it is drawn as its hull. */
 export interface Plate {
@@ -47,6 +57,7 @@ export interface Plate {
     only?: "mesh" | "drawing";
     /** No feature lines of its own. */
     plain?: boolean;
+    move?: Move;
 }
 /** Lines only, in the part's own space. */
 export interface Lines {
@@ -54,6 +65,7 @@ export interface Lines {
     weight: "feature" | "weld";
     paths: readonly (readonly Vec3[])[];
     only?: "mesh" | "drawing";
+    move?: Move;
 }
 export type Piece = Lathe | Plate | Lines;
 /** A frame standing on the axis: u points outwards at `az` radians, v is up, w is along the circle. */
@@ -76,15 +88,34 @@ export interface LineBuffers {
     positions: number[];
     indices: number[];
 }
+/** The mesh of one moving group, its points relative to its pivot, so the group turns about its own origin. */
+export interface MoveMesh {
+    /** The group's name, and a node name of its own: `grid-fins~0`, `grid-fins~1`. */
+    name: string;
+    id: string;
+    pivot: Vec3;
+    axis: Vec3;
+    mesh: PartMesh;
+}
 export interface PartMesh {
     faces: Map<MaterialName, Buffers>;
     feature: LineBuffers;
     weld: LineBuffers;
+    /** What a flight can turn, apart from the rest. Empty for a part with no moving group. */
+    moves: MoveMesh[];
 }
 /** A ring just proud of the surface at a height, so it is not lost in it. */
 export declare function ringPath(piece: Lathe, y: number, lift?: number): Vec3[];
 /** The triangles and lines of a part. */
 export declare function meshOf(pieces: readonly Piece[]): PartMesh;
+/** The groups a flight can turn: the pieces with a `move`, by name and pivot, in the order they come, each with a node name of its own. */
+export declare function moveGroups(pieces: readonly Piece[]): {
+    name: string;
+    id: string;
+    pivot: Vec3;
+    axis: Vec3;
+    pieces: Piece[];
+}[];
 export interface Bounds {
     min: Vec3;
     max: Vec3;

package/dist/model/pieces.js

@@ -178,7 +178,43 @@ function plateFaces(mesh, piece) {
 }
 /** The triangles and lines of a part. */
 export function meshOf(pieces) {
-    const mesh = { faces: new Map(), feature: { positions: [], indices: [] }, weld: { positions: [], indices: [] } };
+    const mesh = meshOfFixed(pieces.filter((piece) => !piece.move));
+    for (const group of moveGroups(pieces)) {
+        const part = meshOfFixed(group.pieces);
+        const shift = (positions) => {
+            for (let i = 0; i < positions.length; i += 3)
+                for (let c = 0; c < 3; c++)
+                    positions[i + c] -= group.pivot[c];
+        };
+        for (const buffers of part.faces.values())
+            shift(buffers.positions);
+        shift(part.feature.positions);
+        shift(part.weld.positions);
+        mesh.moves.push({ name: group.name, id: group.id, pivot: group.pivot, axis: group.axis, mesh: part });
+    }
+    return mesh;
+}
+/** The groups a flight can turn: the pieces with a `move`, by name and pivot, in the order they come, each with a node name of its own. */
+export function moveGroups(pieces) {
+    const groups = [];
+    const counts = new Map();
+    for (const piece of pieces) {
+        if (!piece.move)
+            continue;
+        const key = `${piece.move.name}@${piece.move.pivot.join(",")}`;
+        let group = groups.find((one) => one.key === key);
+        if (!group) {
+            const n = counts.get(piece.move.name) ?? 0;
+            counts.set(piece.move.name, n + 1);
+            group = { name: piece.move.name, id: `${piece.move.name}~${n}`, pivot: piece.move.pivot, axis: piece.move.axis, pieces: [], key };
+            groups.push(group);
+        }
+        group.pieces.push(piece);
+    }
+    return groups.map((group) => ({ name: group.name, id: group.id, pivot: group.pivot, axis: group.axis, pieces: group.pieces }));
+}
+function meshOfFixed(pieces) {
+    const mesh = { faces: new Map(), feature: { positions: [], indices: [] }, weld: { positions: [], indices: [] }, moves: [] };
     for (const piece of pieces) {
         if (piece.only === "drawing")
             continue;
@@ -211,13 +247,19 @@ export function meshOf(pieces) {
 export function boundsOf(mesh) {
     const min = [Infinity, Infinity, Infinity];
     const max = [-Infinity, -Infinity, -Infinity];
-    for (const b of mesh.faces.values())
-        for (let i = 0; i < b.positions.length; i += 3)
-            for (let c = 0; c < 3; c++) {
-                if (b.positions[i + c] < min[c])
-                    min[c] = b.positions[i + c];
-                if (b.positions[i + c] > max[c])
-                    max[c] = b.positions[i + c];
-            }
+    const sweep = (from, offset) => {
+        for (const b of from.faces.values())
+            for (let i = 0; i < b.positions.length; i += 3)
+                for (let c = 0; c < 3; c++) {
+                    const value = b.positions[i + c] + offset[c];
+                    if (value < min[c])
+                        min[c] = value;
+                    if (value > max[c])
+                        max[c] = value;
+                }
+    };
+    sweep(mesh, [0, 0, 0]);
+    for (const group of mesh.moves)
+        sweep(group.mesh, group.pivot);
     return { min, max };
 }

package/dist/model/starship.d.ts

@@ -57,10 +57,13 @@ export interface StarshipDraw {
 export declare const STARSHIP_DRAWS: Readonly<Record<string, StarshipDraw>>;
 /** One Raptor from its exit up: the bell, its dark inside and the machinery over it. Its origin is the middle of its exit. */
 export declare function raptor(at: readonly [number, number], y: number, type: "sea" | "vacuum"): Piece[];
-/** A grid fin held out flat: a frame and a lattice, u outwards and v along the circle. */
-export declare function gridFin(azDeg: number, y: number, rootRadius: number, reach: number, width: number, thick: number, octagon: boolean): Piece[];
+/** A grid fin held out flat: a frame and a lattice, u outwards and v along the circle. With `turn`, every piece of it is one moving group, hinged at its root: round the fin's own axis out from the hull (`radial`, how it steers) or across it (`tangent`, how it folds in). */
+export declare function gridFin(azDeg: number, y: number, rootRadius: number, reach: number, width: number, thick: number, octagon: boolean, turn?: {
+    name: string;
+    about: "radial" | "tangent";
+}): Piece[];
 /** A flap's plate, tiled on its windward face. `outline` is [radius, height]. */
-export declare function flap(draw: FlapDraw, side: 1 | -1): Plate;
+export declare function flap(draw: FlapDraw, side: 1 | -1, name?: string): Plate;
 /** Super Heavy: its base on the axis at the bells' exit. */
 export declare function boosterPieces(d: StarshipDraw): Piece[];
 /** The ship: its base on the axis at the bottom of its skirt. */

package/dist/model/starship.js

@@ -230,8 +230,8 @@ function clip(a, b, outline) {
         [a[0] + d[0] * t1, a[1] + d[1] * t1],
     ];
 }
-/** A grid fin held out flat: a frame and a lattice, u outwards and v along the circle. */
-export function gridFin(azDeg, y, rootRadius, reach, width, thick, octagon) {
+/** A grid fin held out flat: a frame and a lattice, u outwards and v along the circle. With `turn`, every piece of it is one moving group, hinged at its root: round the fin's own axis out from the hull (`radial`, how it steers) or across it (`tangent`, how it folds in). */
+export function gridFin(azDeg, y, rootRadius, reach, width, thick, octagon, turn) {
     const frame = flat(deg(azDeg), y);
     const r0 = rootRadius + 0.35;
     const hw = width / 2;
@@ -291,10 +291,14 @@ export function gridFin(azDeg, y, rootRadius, reach, width, thick, octagon) {
     });
     // where it meets the hull
     pieces.push(strut("fin", pointOf(frame, rootRadius - 0.1, 0, 0), pointOf(frame, r0 + 0.05, 0, 0), 1, 0.7, { only: "mesh" }));
+    if (turn) {
+        const move = { name: turn.name, pivot: pointOf(frame, r0, 0, 0), axis: turn.about === "radial" ? frame.u : frame.v };
+        return pieces.map((piece) => ({ ...piece, move }));
+    }
     return pieces;
 }
 /** A flap's plate, tiled on its windward face. `outline` is [radius, height]. */
-export function flap(draw, side) {
+export function flap(draw, side, name) {
     const az = deg(draw.az) * side;
     const frame = radial(az);
     // w must look windward, so the +w face takes the tiles
@@ -308,7 +312,8 @@ export function flap(draw, side) {
         if (seam)
             ribs.push(seam);
     }
-    return { kind: "plate", material: "steel", top: "tile-plain", frame: windward, outline: draw.outline, thickness: draw.thickness, ribs };
+    const hinge = name ? { name, pivot: pointOf(frame, Math.min(...reach), 0, 0), axis: [0, side, 0] } : undefined;
+    return { kind: "plate", material: "steel", top: "tile-plain", frame: windward, outline: draw.outline, thickness: draw.thickness, ribs, ...(hinge ? { move: hinge } : {}) };
 }
 /** A flap's root fairing above it. */
 function fairing(azDeg, y0, y1, surface, proud) {
@@ -448,7 +453,7 @@ export function boosterPieces(d) {
     // the band of vents round the common dome
     pieces.push({ kind: "lathe", material: "engine-pale", segs: 64, only: "mesh", profile: [[r + 0.015, topOfHull * 0.62 - 0.12], [r + 0.015, topOfHull * 0.62 + 0.12]] });
     for (const az of d.fins.az)
-        pieces.push(...gridFin(az, d.fins.y, r, d.fins.reach, d.fins.width, d.fins.thick, d.fins.octagon));
+        pieces.push(...gridFin(az, d.fins.y, r, d.fins.reach, d.fins.width, d.fins.thick, d.fins.octagon, { name: "grid-fins", about: "radial" }));
     if (d.ring.height > 0)
         pieces.push(...hotStage(d));
     else
@@ -475,8 +480,8 @@ export function shipPieces(d) {
     pieces.push(...engineRings(d.shipEngines, 0.2));
     const surface = (y) => radiusAt(profile, y);
     for (const side of [1, -1]) {
-        pieces.push(flap(d.aft, side));
-        pieces.push(flap(d.forward, side));
+        pieces.push(flap(d.aft, side, "aft-flaps"));
+        pieces.push(flap(d.forward, side, "forward-flaps"));
         const aftTop = Math.max(...d.aft.outline.map(([, y]) => y));
         pieces.push(fairing(d.aft.az * side, aftTop - 1, aftTop + 2.8, surface, 0.8));
         const fwdBottom = Math.min(...d.forward.outline.map(([, y]) => y));

package/dist/react.d.ts

@@ -64,14 +64,14 @@ export declare function UchusenRocket({ build, ...rest }: UchusenRocketProps): i
     /** A phase of the rocket's flight, by its id. */
     phase?: string;
     ref?: Ref<HTMLElement>;
-    part?: string | undefined | undefined;
     id?: string | undefined | undefined;
+    about?: string | undefined | undefined;
+    part?: string | undefined | undefined;
     slot?: string | undefined | undefined;
     children?: import("react").ReactNode;
     title?: string | undefined | undefined;
     "aria-label"?: string | undefined | undefined;
     "aria-live"?: "off" | "assertive" | "polite" | undefined | undefined;
-    about?: string | undefined | undefined;
     "aria-pressed"?: boolean | "false" | "mixed" | "true" | undefined | undefined;
     "aria-valuetext"?: string | undefined | undefined;
     color?: string | undefined | undefined;