Merge pull request #6 from source-academy/dev

[0.1.0] Improve 3D viz and recording, add body radius

.gitignore

@@ -1,3 +1,5 @@
 node_modules
 
-*storybook.log
+*storybook.log
+
+.vscode

.storybook/preview.ts

@@ -9,7 +9,7 @@ const preview: Preview = {
       },
     }, options: {
       storySort: {
-        order: ['nbody', 'Installation', 'Quick Start', 'Integration', 'Contribute', 'Define', ['Intro', 'Force', 'Simulate Function', 'Transformation'], 'Visualize', ['Intro', 'Dimension', 'Multiverse', 'Record', 'Controller', 'Trails', 'Debug Info'], 'Showcase', ['Intro', 'Analemma', ['Intro', 'Sun-Earth'],'HorseshoeOrbit', ['Intro', '54509 YORP'], 'SolarSystem']],
+        order: ['nbody', 'Installation', 'Quick Start', 'Integration', 'Contribute', 'Define', ['Intro', 'Force', 'Simulate Function', 'Transformation'], 'Visualize', ['Intro', 'Dimension', 'Multiverse', 'Record', 'Controller', 'Trails', 'Debug Info'], 'Showcase', ['Intro', 'Analemma', ['Intro', 'Sun-Earth', 'Sun-Mars'],'HorseshoeOrbit', ['Intro', '54509 YORP'], 'SolarSystem']],
       },
     }
   },

.storybook/stories/Showcase/Analemma/Analemma.stories.tsx

@@ -1,35 +1,44 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import { Simulation } from "../../Simulation";
-import { fig8 } from "../../Universe";
-import { sunEarth } from "./Analemma";
+// import { fig8 } from "../../Universe";
+import { Analemma, sunMars, sunEarth } from "./Analemma";
 
 const meta = {
   title: "Showcase/Analemma",
-  component: Simulation,
+  component: Analemma,
   parameters: {
     layout: "centered",
-    controls: {
-      disable: true,
-    },
   },
   tags: [],
-  argTypes: {},
+  argTypes: {
+    name: {
+      table: {
+        disable: true,
+      },
+    },
+    obj: {
+      table: {
+        disable: true,
+      },
+    },
+  },
   args: {},
-} satisfies Meta<typeof Simulation>;
+} satisfies Meta<typeof Analemma>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const SunEarthAnalemma: Story = {
   args: {
-    storyName: "SunEarthAnalemma",
-    universe: [sunEarth],
-    controller: 'ui',
-    showTrails: true,
-    speed: 5000000,
-    visType: '3D',
-    width: 800,
-    maxTrailLength: 300,
-    showDebugInfo: true,
+    name: "SunEarthAnalemma",
+    obj: sunEarth,
+    axialTilt: sunEarth.actualAxialTilt,
+  },
+};
+
+export const SunMarsAnalemma: Story = {
+  args: {
+    name: "SunMarsAnalemma",
+    obj: sunMars,
+    axialTilt: sunMars.actualAxialTilt,
   },
 };

.storybook/stories/Showcase/Analemma/Analemma.tsx

@@ -0,0 +1,170 @@
+import React from "react";
+import {
+  BodyCenterTransformation,
+  CelestialBody,
+  Simulation as NbodySimulation,
+  RotateTransformation,
+  RungeKutta4Sim,
+  State,
+  TimedRotateTransformation,
+  Universe,
+  Vector3,
+} from "../../../../src";
+
+const SUN = new CelestialBody(
+  "Sun",
+  1.989e30,
+  696340e3,
+  new Vector3(0, 0, 0),
+  new Vector3(0, 0, 0),
+  new Vector3(0, 0, 0)
+);
+
+const EARTH = new CelestialBody(
+  "Earth",
+  5.97219e24,
+  6371e3,
+  //   new Vector3(-2.48109932596539e10, 1.449948612736719e11, -8.215203670851886e6),
+  //   new Vector3(-2.984146365518679e4, -5.126262286859617e3, 1.184224839788195),
+  //   new Vector3(0, 0, 0)
+  // );
+  new Vector3(152.1e9, 0, 0),
+  new Vector3(0, 0, -29290),
+  new Vector3(0, 0, 0)
+);
+
+const MARS = new CelestialBody(
+  "Mars",
+  6.41e23,
+  3389.5e3,
+  // new Vector3(
+  //   -4.388577457378983e10,
+  //   -2.170849264747524e11,
+  //   -3.473007284583151e9
+  // ),
+  // new Vector3(2.466191455128526e4, -2.72216016197737e3, -6.619819103693254e2),
+  // new Vector3(0, 0, 0)
+  // );
+  new Vector3(249.2e9, 0, 0),
+  new Vector3(0, 0, -22000),
+  new Vector3(0, 0, 0)
+);
+
+const alignTilt = new RotateTransformation(
+  new Vector3(0, 1, 0),
+  -(Math.PI / 2)
+);
+const bodyTranslate = new BodyCenterTransformation(1);
+
+interface AnalemmaSetup {
+  actualAxialTilt: number;
+  sim?: NbodySimulation;
+  helper: (
+    divId: string,
+    axialTilt: number,
+    node: HTMLDivElement | null
+  ) => void;
+}
+
+export const sunEarth: AnalemmaSetup = {
+  actualAxialTilt: 23.4,
+  helper(divId, axialTilt, node) {
+    if (node === null) {
+      this.sim?.stop();
+      this.sim = null;
+      return;
+    }
+    const newUniverse = new Universe({
+      label: "Sun-Earth System",
+      currState: alignTilt.transform(
+        bodyTranslate.transform(new State([SUN.clone(), EARTH.clone()]))
+      ),
+      color: ["#FDB813", "#287AB8"],
+      simFunc: new RungeKutta4Sim(),
+      transformations: [
+        bodyTranslate,
+        new TimedRotateTransformation(
+          new Vector3(0, 1, 0),
+          366.24 * 86164.0905
+        ),
+      ],
+    });
+    newUniverse.currState = new RotateTransformation(
+      new Vector3(1, 0, 0),
+      (axialTilt / 180) * Math.PI
+    ).transform(newUniverse.currState);
+    this.sim = new NbodySimulation([newUniverse], {
+      visType: "3D",
+      controller: "ui",
+      showTrails: true,
+      showDebugInfo: true,
+      maxTrailLength: 750,
+    });
+    this.sim.start(divId, 800, 800, 5000000);
+  },
+};
+
+export const sunMars: AnalemmaSetup = {
+  actualAxialTilt: 24.9,
+  helper(divId, axialTilt, node) {
+    if (node === null) {
+      this.sim?.stop();
+      this.sim = null;
+      return;
+    }
+    const newUniverse = new Universe({
+      label: "Sun-Mars System",
+      currState: alignTilt.transform(
+        bodyTranslate.transform(new State([SUN.clone(), MARS.clone()]))
+      ),
+      color: ["#FDB813", "#c1440e"],
+      simFunc: new RungeKutta4Sim(),
+      transformations: [
+        bodyTranslate,
+        new TimedRotateTransformation(
+          new Vector3(0, 1, 0),
+          668.5991 * 88775.244
+        ),
+      ],
+    });
+    newUniverse.currState = new RotateTransformation(
+      new Vector3(1, 0, 0),
+      (axialTilt / 180) * Math.PI
+    ).transform(newUniverse.currState);
+    this.sim = new NbodySimulation([newUniverse], {
+      visType: "3D",
+      controller: "ui",
+      showTrails: true,
+      showDebugInfo: true,
+      maxTrailLength: 1350,
+    });
+    this.sim.start(divId, 800, 800, 5000000);
+  },
+};
+
+export const Analemma = ({
+  obj,
+  name,
+  axialTilt,
+  ...props
+}: {
+  obj: AnalemmaSetup;
+  name: string;
+  axialTilt: number;
+}) => {
+  const divId = "demo-" + name + "-" + axialTilt;
+
+  return (
+    <div>
+      <div
+        id={divId}
+        style={{
+          width: "800px",
+          height: "800px",
+          position: "relative",
+        }}
+        ref={(node) => obj.helper(divId, axialTilt, node)}
+      ></div>
+    </div>
+  );
+};

.storybook/stories/Showcase/Analemma/Sun-Earth.mdx

@@ -1,9 +1,10 @@
-import { Meta, Story } from '@storybook/blocks';
+import { Meta, Story, Controls } from '@storybook/blocks';
 
 import * as Stories from "./Analemma.stories";
 
-<Meta title="Showcase/Analemma/Sun-Earth" />
+<Meta title="Showcase/Analemma/Sun-Earth"/>
 
 # Sun-Earth Analemma
 
-<Story of={Stories.SunEarthAnalemma} />
+<Story of={Stories.SunEarthAnalemma} />
+<Controls of={Stories.SunEarthAnalemma} />

.storybook/stories/Showcase/Analemma/Sun-Mars.mdx

@@ -0,0 +1,10 @@
+import { Meta, Story, Controls } from '@storybook/blocks';
+
+import * as Stories from "./Analemma.stories";
+
+<Meta title="Showcase/Analemma/Sun-Mars"/>
+
+# Sun-Mars Analemma
+
+<Story of={Stories.SunMarsAnalemma} />
+<Controls of={Stories.SunMarsAnalemma} />

.storybook/stories/Showcase/HorseshoeOrbit/HorseshoeOrbit.stories.tsx

@@ -24,10 +24,15 @@ export const YORP: Story = {
     storyName: "Horseshoe Orbit YORP",
     universe: [horseshoe.yorp],
     showDebugInfo: true,
-    controller: 'ui',
-    visType: '3D',
+    controller: "ui",
+    visType: "3D",
     width: 800,
-    speed: 10000000,
+    playSpeed: 2,
     showTrails: true,
+    record: true,
+    looped: true,
+    recordFor: 332,
+    recordSpeed: 20000000,
+    maxTrailLength: 2000,
   },
 };

.storybook/stories/Showcase/HorseshoeOrbit/HorseshoeOrbit.ts

@@ -1,16 +1,18 @@
-import { BodyCenterTransformation, CelestialBody, CoMTransformation, PinTransformation, RotateTransformation, RungeKutta4Sim, State, TimedRotateTransformation, Universe, Vector3 } from "../../../../src";
+import { CelestialBody, CoMTransformation, PinTransformation, RotateTransformation, RungeKutta4Sim, State, Universe, Vector3 } from "../../../../src";
 
 const yorpState = new State([
   new CelestialBody(
     "Sun",
     1988500e24,
+  696340e3,
     new Vector3(0, 0, 0),
     new Vector3(0, 0, 0),
     new Vector3(0, 0, 0)
   ),
   new CelestialBody(
     "Earth",
     5.97219e24,
+      6371e3,
     new Vector3(
       -2.48109932596539e10,
       1.449948612736719e11,
@@ -26,6 +28,7 @@ const yorpState = new State([
   new CelestialBody(
     "YORP",
     1,
+    1,
     new Vector3(
       1.789598196203594e11,
       4.67757011067789e10,