Merge pull request #23 from coilysiren/gravity

Gravity
coilysiren · Nov 26, 2023 · c2b7bc9 · c2b7bc9
2 parents 9d37c97 + 2b4a7fd
commit c2b7bc9
Show file tree

Hide file tree

Showing 6 changed files with 330 additions and 89 deletions.
diff --git a/.github/workflows/action.yml b/.github/workflows/action.yml
@@ -22,7 +22,7 @@ jobs:
 
       # wasm
       - run: cargo install wasm-pack
-      - run: wasm-pack build --target web
+      - run: wasm-pack build
   js:
     runs-on: ubuntu-latest
     steps:
@@ -32,7 +32,7 @@ jobs:
 
       # wasm
       - run: cargo install wasm-pack
-      - run: wasm-pack build --target web
+      - run: wasm-pack build
 
       # js
       - run: npm ci
diff --git a/src/js/index.html b/src/js/index.html
@@ -1,12 +1,12 @@
 <!DOCTYPE html>
-<html>
+<html lang="en" data-bs-theme="dark">
   <head>
     <meta charset="utf-8">
     <title>galaxy-gen</title>
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
   </head>
-  <body>
+  <body style="background: #160018">
     <noscript>This page contains webassembly and javascript content, please enable javascript in your browser.</noscript>
     <div id="root"></div>
     <script src="./index.js"></script>

diff --git a/src/js/lib/application.tsx b/src/js/lib/application.tsx
@@ -6,9 +6,9 @@ import * as galaxy from "./galaxy";
 const wasm = import("galaxy_gen_backend/galaxy_gen_backend");
 
 export function Interface() {
-  const [galaxySize, setGalaxySize] = React.useState(100);
-  const [galaxySeedMass, setGalaxySeedMass] = React.useState(5);
-  const [minStarMass, setMinStarMass] = React.useState(1000);
+  const [galaxySize, setGalaxySize] = React.useState(50);
+  const [galaxySeedMass, setGalaxySeedMass] = React.useState(25);
+  const [timeModifier, setTimeModifier] = React.useState(0.01);
   let wasmModule: any = null;
   let galaxyFrontend: galaxy.Frontend = null;
 
@@ -61,24 +61,24 @@ export function Interface() {
     </div>
   );
 
-  const handleMinStarMassChange = (
+  const handletimeModifierChange = (
     event: React.ChangeEvent<HTMLInputElement>
   ) => {
     const value = parseInt(event.target.value);
-    setMinStarMass(Number.isNaN(value) ? 0 : value);
+    setTimeModifier(Number.isNaN(value) ? 0 : value);
   };
 
-  const minStarMassInput = (
+  const timeModifierInput = (
     <div className="input-group mb-3">
       <span className="input-group-text" id="basic-addon1">
-        Min Star Mass:
+        Time Modifier:
       </span>
       <input
         type="text"
         className="form-control"
-        name="minStarMass"
-        value={minStarMass.toString()}
-        onChange={handleMinStarMassChange}
+        name="timeModifier"
+        value={timeModifier.toString()}
+        onChange={handletimeModifierChange}
       />
     </div>
   );
@@ -88,7 +88,7 @@ export function Interface() {
       console.error("wasm not yet loaded");
     } else {
       console.log("initializing galaxy");
-      galaxyFrontend = new galaxy.Frontend(galaxySize, minStarMass);
+      galaxyFrontend = new galaxy.Frontend(galaxySize, timeModifier);
       dataviz.initViz(galaxyFrontend);
     }
   };
@@ -103,7 +103,7 @@ export function Interface() {
     if (galaxyFrontend === null) {
       console.error("galaxy not yet initialized");
     } else {
-      console.log("seeding galaxy");
+      console.log("adding mass to the galaxy");
       galaxyFrontend.seed(galaxySeedMass);
       dataviz.initData(galaxyFrontend);
     }
@@ -116,7 +116,9 @@ export function Interface() {
   );
 
   const handleTickClick = () => {
-    galaxyFrontend.tick(minStarMass);
+    console.log("advancing time");
+    galaxyFrontend.tick(timeModifier);
+    dataviz.initData(galaxyFrontend);
   };
 
   const tickButton = (
@@ -135,15 +137,13 @@ export function Interface() {
       </h2>
       {galaxySizeInput}
       {galaxySeedMassInput}
-      {minStarMassInput}
+      {timeModifierInput}
       <div className="d-flex justify-content-between">
         {initButton}
         {seedButton}
         {tickButton}
       </div>
-      <div>
-        <div id="dataviz"></div>
-      </div>
+      <div id="dataviz"></div>
     </div>
   );
 }
diff --git a/src/js/lib/dataviz.tsx b/src/js/lib/dataviz.tsx
@@ -5,13 +5,12 @@ import * as galaxy from "./galaxy";
 const margin = { top: 40, right: 40, bottom: 40, left: 40 };
 
 function getSizeModifier(galaxyFrontend: galaxy.Frontend) {
-  return Math.sqrt(galaxyFrontend.galaxySize);
+  // TODO: flexible scaling
+  return Math.sqrt(galaxyFrontend.galaxySize * 10);
 }
 
 export function initViz(galaxyFrontend: galaxy.Frontend) {
   const sizeModifier = getSizeModifier(galaxyFrontend);
-  const width = galaxyFrontend.galaxySize + margin.left + margin.right;
-  const height = galaxyFrontend.galaxySize + margin.top + margin.bottom;
 
   // remove old svg
   d3.select("#dataviz svg").remove();
@@ -20,53 +19,46 @@ export function initViz(galaxyFrontend: galaxy.Frontend) {
   const svg = d3
     .select("#dataviz")
     .append("svg")
-    .attr("width", width * sizeModifier + margin.left + margin.right)
-    .attr("height", height * sizeModifier + margin.top + margin.bottom)
+    .style("overflow", "visible")
     .append("g")
+    .attr("id", "axis")
     .attr("transform", `translate(${margin.left}, ${margin.top})`);
 
   // Add X axis
   const x = d3
     .scaleLinear()
     .domain([0, galaxyFrontend.galaxySize])
     .range([0, galaxyFrontend.galaxySize * sizeModifier]);
-  svg
-    .append("g")
-    .attr(
-      "transform",
-      `translate(0, ${galaxyFrontend.galaxySize * sizeModifier})`
-    )
-    .call(d3.axisBottom(x));
 
   // Add Y axis
   const y = d3
     .scaleLinear()
     .domain([0, galaxyFrontend.galaxySize])
     .range([galaxyFrontend.galaxySize * sizeModifier, 0]);
-  svg.append("g").call(d3.axisLeft(y));
 }
 
 export function initData(galaxyFrontend: galaxy.Frontend) {
   const sizeModifier = getSizeModifier(galaxyFrontend);
 
   // remove old data
-  d3.select("#dataviz svg circle").remove();
+  d3.select("#dataviz svg #data").remove();
 
   // append the svg object to the body of the page
   const svg = d3.select("#dataviz svg");
   svg
     .append("g")
+    .attr("id", "data")
     .selectAll("dot")
     .data(galaxyFrontend.cells())
     .join("circle")
     .attr("cx", function (c: galaxy.Cell) {
-      return c.x * sizeModifier + margin.left;
+      return Math.round(c.x * sizeModifier + margin.left);
     })
     .attr("cy", function (c: galaxy.Cell) {
-      return c.y * sizeModifier + margin.top;
+      return Math.round(c.y * sizeModifier + margin.top);
     })
     .attr("r", function (c: galaxy.Cell) {
-      return c.mass;
+      return Math.log(c.mass) > 0 ? Math.log(c.mass) : 0;
     })
     .style("fill", "#69b3a2");
 }
diff --git a/src/js/lib/galaxy.ts b/src/js/lib/galaxy.ts
@@ -23,15 +23,17 @@ export class Frontend {
     this.galaxy = this.galaxy.seed(additionalMass);
   }
 
-  public tick(gravityReach: number): void {
-    this.galaxy = this.galaxy.tick(gravityReach);
+  public tick(timeModifier: number): void {
+    this.galaxy = this.galaxy.tick(timeModifier);
   }
 
   public cells(): Cell[] {
+    const cells: Cell[] = [];
+
     const mass = this.galaxy.mass();
     const x = this.galaxy.x();
     const y = this.galaxy.y();
-    const cells: Cell[] = [];
+
     for (let i = 0; i < this.galaxySize ** 2; i++) {
       cells.push({
         mass: mass[i],