- Fix documentation and add showcases

- Fix object scaling based on radius

.storybook/manager.ts

@@ -0,0 +1,6 @@
+import { addons } from '@storybook/manager-api';
+import customTheme from './theme';
+
+addons.setConfig({
+  theme: customTheme,
+});

.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', 'Sun-Mars'],'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'],'Horseshoe Orbit', ['Intro', '2010 SO16', '54509 YORP'], 'Solar System', ['Simulate', 'Recorded']]],
       },
     }
   },

.storybook/stories/Contribute.mdx

@@ -83,3 +83,5 @@ Development setup of the project
 Contributors are free to pick up any of the following tasks or suggest new features.
 
 - Setup a bundled version of the project for CDN deployment
+- `enhancement` Provide more predefined simulate functions
+- `enhancement` Allow users to use custom shapes/textures for bodies

.storybook/stories/Define/Force.mdx

@@ -4,7 +4,7 @@ import { Meta, Story } from '@storybook/blocks';
 
 # Force
 
-A force object encapsulates logic for calculating forces acting on celestial bodies due to other objects or environment. It has a getForces method that takes in an array of celestial bodies and returns an array of forces acting on each body. It is defined as the following Typescript interface.
+A **Force** object encapsulates logic for calculating forces acting on celestial bodies due to other objects or environment. It has a `getForces` method that takes in an array of celestial bodies and returns an array of forces acting on each body. It is defined as the following Typescript interface.
 
 ```typescript
 interface Force {

.storybook/stories/Define/SimulateFunction.mdx

@@ -4,7 +4,7 @@ import { Meta, Story } from '@storybook/blocks';
 
 # Simulate Function
 
-A **Simulate Function** object encapsulates logic for advancing the state of the universe over time, usually using [numerical integration](https://en.wikipedia.org/wiki/Numerical_integration). It has a simulate method that takes in a time step, current state of the universe, (optionally the previous state of the universe) and returns the next state of the universe.
+A **Simulate Function** object encapsulates logic for advancing the state of the universe over time, usually using [numerical integration](https://en.wikipedia.org/wiki/Numerical_integration). It has a `simulate` method that takes in a time step, current state of the universe, (optionally the previous state of the universe) and returns the next state of the universe.
 
 ```typescript
 interface SimulateFunction {
@@ -22,7 +22,7 @@ Full API reference can be found [here](https://source-academy.github.io/nbody/ap
 
 ### Velocity Verlet
 
-Create a [velocity verlet](https://en.wikipedia.org/wiki/Verlet_integration#Velocity_Verlet) integrator. Uses newtonian gravity by default, or the provided force object.
+A [velocity verlet](https://en.wikipedia.org/wiki/Verlet_integration#Velocity_Verlet) integrator implementation. Uses newtonian gravity by default, or the provided force object.
 
 ```javascript
 new VelocityVerletSim();
@@ -31,7 +31,7 @@ new VelocityVerletSim(customForce);
 
 ### Explicit Euler
 
-Create a [explicit euler](https://en.wikipedia.org/wiki/Explicit_and_implicit_methods) integrator. Uses newtonian gravity by default, or the provided force object.
+An [explicit euler](https://en.wikipedia.org/wiki/Explicit_and_implicit_methods) integrator implementation. Uses newtonian gravity by default, or the provided force object.
 
 ```javascript
 new ExplicitEulerSim();
@@ -40,7 +40,7 @@ new ExplicitEulerSim(customForce);
 
 ### Semi Implicit Euler
 
-Create a [semi-implicit euler](https://en.wikipedia.org/wiki/Explicit_and_implicit_methods) integrator. Uses newtonian gravity by default, or the provided force object.
+A [semi-implicit euler](https://en.wikipedia.org/wiki/Explicit_and_implicit_methods) integrator implementation. Uses newtonian gravity by default, or the provided force object.
 
 ```javascript
 new SemiImplicitEulerSim();
@@ -49,7 +49,7 @@ new SemiImplicitEulerSim(customForce);
 
 ### Runge-Kutta Order 4
 
-Create a [runge-kutta order 4](https://en.wikipedia.org/wiki/Runge%E2%80%93Kutta_methods) integrator. Uses newtonian gravity by default, or the provided force object. Optionally, you can provide the weight coefficients for the averaging step.
+A [runge-kutta order 4](https://en.wikipedia.org/wiki/Runge%E2%80%93Kutta_methods) integrator implementation. Uses newtonian gravity by default, or the provided force object. Optionally, you can provide the weight coefficients for the averaging step.
 
 ```javascript
 new RungeKutta4Sim();
@@ -59,7 +59,7 @@ new RungeKutta4Sim(customForce, [1, 2, 2, 1]);
 
 ### Lambda integrator
 
-Create a simulate function from a lambda function.
+A simulate function based the given lambda/arrow/anonymous function.
 
 ```javascript
 new LambdaSim((deltaT, currState, prevState) => {

.storybook/stories/Define/Transformation.mdx

@@ -4,7 +4,7 @@ import { Meta, Story } from '@storybook/blocks';
 
 # Transformation
 
-TODO
+A **Transformation** object can be used to modify/transform the [frame of reference](https://en.wikipedia.org/wiki/Frame_of_reference) of the nbody system. It has a `transform` method that takes in a state and returns a new state with the updated frame of reference by modifying the position, velocity and acceleration of the bodies as necessary.
 
 ```typescript
 export interface Transformation {
@@ -22,31 +22,32 @@ Full API reference can be found [here](https://source-academy.github.io/nbody/ap
 
 ### Body Center Transformation
 
-TODO
+A frame of reference transformation that uses the position of the ith body as the origin.
 
 ```javascript
 new BodyCenterTransformation();
+new BodyCenterTransformation(index);
 ```
 
 ### Center of Mass Transformation
 
-TODO
+A frame of reference transformation that uses the position of the center of mass of the system as the origin.
 
 ```javascript
 new CoMTransformation();
 ```
 
 ### Rotate Transformation
 
-TODO
+A frame of reference transformation that rotates the frames around the provided axis by the provided angle.
 
 ```javascript
 new RotateTransformation(new Vector3(0, 1, 0), Math.PI / 2);
 ```
 
 ### Lambda Transformation
 
-TODO
+A frame of reference transformation that uses the given lambda/arrow/anonymous function to transform states.
 
 ```javascript
 new LambdaTransformation((state, deltaT) => {
@@ -60,13 +61,29 @@ new LambdaTransformation((state, deltaT) => {
 You can define and configure your own transformation object in javascript with a transform method as follows
 
 ```javascript
-TODO
+const customTransform = {
+    transform(state) {
+    const offset = state.bodies[0].position.clone();
+    state.bodies.forEach((b) => {
+      b.position.sub(offset);
+    });
+    return state;
+  }
+}
 ```
 
 ## Typescript
 
 You can define and configure your own transformation object in typescript by implementing the Transformation interface as follows
 
 ```typescript
-TODO
+class CustomTransformation implements Transformation {
+  transform(state: State): State {
+    const offset = state.bodies[0].position.clone();
+    state.bodies.forEach((b) => {
+      b.position.sub(offset);
+    });
+    return state;
+  }
+}
 ```

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

@@ -23,7 +23,8 @@ const SUN = new CelestialBody(
 const EARTH = new CelestialBody(
   "Earth",
   5.97219e24,
-  6371e3,
+  // 6371e3,
+  2e8,
   //   new Vector3(-2.48109932596539e10, 1.449948612736719e11, -8.215203670851886e6),
   //   new Vector3(-2.984146365518679e4, -5.126262286859617e3, 1.184224839788195),
   //   new Vector3(0, 0, 0)
@@ -36,7 +37,8 @@ const EARTH = new CelestialBody(
 const MARS = new CelestialBody(
   "Mars",
   6.41e23,
-  3389.5e3,
+  // 3389.5e3,
+  2.5e8,
   // new Vector3(
   //   -4.388577457378983e10,
   //   -2.170849264747524e11,
@@ -88,6 +90,7 @@ export const sunEarth: AnalemmaSetup = {
           366.24 * 86164.0905
         ),
       ],
+      radiusScale: 10,
     });
     newUniverse.currState = new RotateTransformation(
       new Vector3(1, 0, 0),
@@ -126,6 +129,7 @@ export const sunMars: AnalemmaSetup = {
           668.5991 * 88775.244
         ),
       ],
+      radiusScale: 20,
     });
     newUniverse.currState = new RotateTransformation(
       new Vector3(1, 0, 0),

.storybook/stories/Showcase/Analemma/Intro.mdx

@@ -2,4 +2,8 @@ import { Meta, Story } from '@storybook/blocks';
 
 <Meta title="Showcase/Analemma/Intro" />
 
-# Analemma
+# Analemma
+
+An analemma is a curve representing the changing position of the Sun in the sky, as viewed from a fixed location on the Earth at the same clock time over the course of an year. Analemma shapes range from figure-8s to infinity symbols, depending on the observer's latitude and the time of day. The analemma is a result of the Earth's tilt and elliptical orbit around the Sun. Analemmas can also be seen on other planets, with shapes that are different from Earth's due to different axial tilts and orbital eccentricities. The analemma on Mars, for example, is a teardrop shape. [[Wikipedia](https://en.wikipedia.org/wiki/Analemma)]
+
+Analemmas are a good example of what is possible with *nbody*, as they involve the simulation of the Earth's orbit around the Sun, along with frame of reference transformations.

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

@@ -6,5 +6,7 @@ import * as Stories from "./Analemma.stories";
 
 # Sun-Earth Analemma
 
-<Story of={Stories.SunEarthAnalemma} />
+Analemma as seen from the Earth on the equator mid-day. Frame of reference transformations have been setup to replicate the axial tilt of the earth. Additionally, the frame is rotated smoothly (as opposed to every 24 hours) to smooth out the analemma curve. Use the controls below to change the axial tilt of the Earth and its effects on the shape of the analemma.
+
+<center><Story of={Stories.SunEarthAnalemma} /></center>
 <Controls of={Stories.SunEarthAnalemma} />

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

@@ -6,5 +6,7 @@ import * as Stories from "./Analemma.stories";
 
 # Sun-Mars Analemma
 
-<Story of={Stories.SunMarsAnalemma} />
+Analemma as seen from Mars at the equator mid-day. Frame of reference transformations have been setup to replicate the axial tilt of Mars. Additionally, the frame is rotated smoothly to smooth out the analemma curve. Use the controls below to change the axial tilt of Mars and its effects on the shape of the analemma.
+
+<center><Story of={Stories.SunMarsAnalemma} /></center>
 <Controls of={Stories.SunMarsAnalemma} />

.storybook/stories/Showcase/HorseshoeOrbit/2010 SO16.mdx

@@ -0,0 +1,22 @@
+import { Meta, Story, Controls } from '@storybook/blocks';
+
+import * as Stories from "./HorseshoeOrbit.stories";
+
+<Meta title="Showcase/Horseshoe Orbit/2010 SO16" />
+
+# 2010 SO16
+
+[2010 SO16](https://en.wikipedia.org/wiki/(419624)_2010_SO16) is a sub-kilometer asteriod in a co-orbital configuration with Earth that looks like a horseshoe in a non-rotating frame of reference.
+
+<center>
+<img src="https://upload.wikimedia.org/wikipedia/commons/5/53/Animation_of_%28419624%29_2010_SO16_orbit.gif" alt="2010 SO16 orbit" width="400"/>
+<img src="https://upload.wikimedia.org/wikipedia/commons/3/39/Animation_of_%28419624%29_2010_SO16_orbit_around_Sun.gif" alt="2010 SO16 orbit around Sun" width="400"/>
+
+GIFs from Wiki Commons - <a title="Phoenix7777, CC BY-SA 4.0 &lt;https://creativecommons.org/licenses/by-sa/4.0&gt;, via Wikimedia Commons" href="https://commons.wikimedia.org/wiki/File:Animation_of_(419624)_2010_SO16_orbit.gif">gif1</a>, 
+<a title="Phoenix7777, CC BY-SA 4.0 &lt;https://creativecommons.org/licenses/by-sa/4.0&gt;, via Wikimedia Commons" href="https://commons.wikimedia.org/wiki/File:Animation_of_(419624)_2010_SO16_orbit_around_Sun.gif">gif2</a>
+</center>
+
+The initial configurations of Sun, Earth and the asteriod have been setup, recorded at 20000000x speed for about 13.5 minutes of playback. Use the speed control below to change the playback speed. You can also try changing the frame of reference to see the horseshoe orbit from different perspectives.
+
+<Controls of={Stories.SO16} />
+<center><Story of={Stories.SO16} /></center>

.storybook/stories/Showcase/HorseshoeOrbit/54509 YORP.mdx

@@ -1,13 +1,22 @@
-import { Meta, Story } from '@storybook/blocks';
+import { Meta, Story, Controls } from '@storybook/blocks';
 
 import * as Stories from "./HorseshoeOrbit.stories";
 
-<Meta title="Showcase/HorseshoeOrbit/54509 YORP" />
+<Meta title="Showcase/Horseshoe Orbit/54509 YORP" />
 
 # 54509 YORP
 
-54509 YORP is an Earth co-orbital asteroid that follows a horse shoe orbit
+[54509 YORP](https://en.wikipedia.org/wiki/54509_YORP) is an Earth co-orbital asteroid that follows a flattened horse shoe orbit that looks like the following in frames of refernce snapped to sun-earth and sun respectively:
 
+<center>
+<img src="https://upload.wikimedia.org/wikipedia/commons/d/dd/Animation_of_54509_YORP_orbit.gif" alt="54509 YORP orbit" width="400"/>
+<img src="https://upload.wikimedia.org/wikipedia/commons/6/60/Animation_of_54509_YORP_orbit_around_Sun.gif" alt="54509 YORP orbit around Sun" width="400"/>
 
+GIFs from Wiki Commons - <a title="Phoenix7777, CC BY-SA 4.0 &lt;https://creativecommons.org/licenses/by-sa/4.0&gt;, via Wikimedia Commons" href="https://commons.wikimedia.org/wiki/File:Animation_of_54509_YORP_orbit.gif">gif1</a>, 
+<a title="Phoenix7777, CC BY-SA 4.0 &lt;https://creativecommons.org/licenses/by-sa/4.0&gt;, via Wikimedia Commons" href="https://commons.wikimedia.org/wiki/File:Animation_of_54509_YORP_orbit_around_Sun.gif">gif2</a>
+</center>
 
-<Story of={Stories.YORP} />
+The initial configurations of Sun, Earth and the asteriod have been setup, recorded at 20000000x speed for about 5.5 minutes of playback. Use the speed control below to change the playback speed. You can also try changing the frame of reference to see the horseshoe orbit from different perspectives.
+
+<Controls of={Stories.YORP} />
+<center><Story of={Stories.YORP} /></center>

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

@@ -1,38 +1,43 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import { Simulation } from "../../Simulation";
-import { horseshoe } from "./HorseshoeOrbit";
+import { HorseshoeOrbit, yorp, so16 } from "./HorseshoeOrbit";
 
 const meta = {
   title: "Showcase/Horseshoe Orbit",
-  component: Simulation,
+  component: HorseshoeOrbit,
   parameters: {
     layout: "centered",
-    controls: {
-      disable: true,
-    },
   },
   tags: [],
-  argTypes: {},
+  argTypes: {
+    obj: {
+      table: {
+        disable: true,
+      }
+    },
+        name: {
+      table: {
+        disable: true,
+      }
+    },
+  },
   args: {},
-} satisfies Meta<typeof Simulation>;
+} satisfies Meta<typeof HorseshoeOrbit>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const YORP: Story = {
   args: {
-    storyName: "Horseshoe Orbit YORP",
-    universe: [horseshoe.yorp],
-    showDebugInfo: true,
-    controller: "ui",
-    visType: "3D",
-    width: 800,
-    playSpeed: 2,
-    showTrails: true,
-    record: true,
-    looped: true,
-    recordFor: 332,
-    recordSpeed: 20000000,
-    maxTrailLength: 2000,
+    name: "Horseshoe Orbit YORP",
+    frameOfRef: "sun-earth",
+    obj: yorp
   },
 };
+
+export const SO16: Story = {
+  args: {
+    name: "Horseshoe Orbit SO16",
+    frameOfRef: "sun-earth",
+    obj: so16,
+  },
+};