Skip to content

Commit c2b7bc9

Browse files
coilysirencoilysiren
authored
Merge pull request #23 from coilysiren/gravity
Gravity
2 parents 9d37c97 + 2b4a7fd commit c2b7bc9

File tree

6 files changed

+330
-89
lines changed

6 files changed

+330
-89
lines changed

‎.github/workflows/action.yml

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ jobs:
2222

2323
# wasm
2424
- run: cargo install wasm-pack
25-
- run: wasm-pack build --target web
25+
- run: wasm-pack build
2626
js:
2727
runs-on: ubuntu-latest
2828
steps:
@@ -32,7 +32,7 @@ jobs:
3232

3333
# wasm
3434
- run: cargo install wasm-pack
35-
- run: wasm-pack build --target web
35+
- run: wasm-pack build
3636

3737
# js
3838
- run: npm ci

‎src/js/index.html

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
<!DOCTYPE html>
2-
<html>
2+
<html lang="en" data-bs-theme="dark">
33
<head>
44
<meta charset="utf-8">
55
<title>galaxy-gen</title>
6-
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
7-
<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>
6+
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
7+
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
88
</head>
9-
<body>
9+
<body style="background: #160018">
1010
<noscript>This page contains webassembly and javascript content, please enable javascript in your browser.</noscript>
1111
<div id="root"></div>
1212
<script src="./index.js"></script>

‎src/js/lib/application.tsx

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,9 @@ import * as galaxy from "./galaxy";
66
const wasm = import("galaxy_gen_backend/galaxy_gen_backend");
77

88
export function Interface() {
9-
const [galaxySize, setGalaxySize] = React.useState(100);
10-
const [galaxySeedMass, setGalaxySeedMass] = React.useState(5);
11-
const [minStarMass, setMinStarMass] = React.useState(1000);
9+
const [galaxySize, setGalaxySize] = React.useState(50);
10+
const [galaxySeedMass, setGalaxySeedMass] = React.useState(25);
11+
const [timeModifier, setTimeModifier] = React.useState(0.01);
1212
let wasmModule: any = null;
1313
let galaxyFrontend: galaxy.Frontend = null;
1414

@@ -61,24 +61,24 @@ export function Interface() {
6161
</div>
6262
);
6363

64-
const handleMinStarMassChange = (
64+
const handletimeModifierChange = (
6565
event: React.ChangeEvent<HTMLInputElement>
6666
) => {
6767
const value = parseInt(event.target.value);
68-
setMinStarMass(Number.isNaN(value) ? 0 : value);
68+
setTimeModifier(Number.isNaN(value) ? 0 : value);
6969
};
7070

71-
const minStarMassInput = (
71+
const timeModifierInput = (
7272
<div className="input-group mb-3">
7373
<span className="input-group-text" id="basic-addon1">
74-
Min Star Mass:
74+
Time Modifier:
7575
</span>
7676
<input
7777
type="text"
7878
className="form-control"
79-
name="minStarMass"
80-
value={minStarMass.toString()}
81-
onChange={handleMinStarMassChange}
79+
name="timeModifier"
80+
value={timeModifier.toString()}
81+
onChange={handletimeModifierChange}
8282
/>
8383
</div>
8484
);
@@ -88,7 +88,7 @@ export function Interface() {
8888
console.error("wasm not yet loaded");
8989
} else {
9090
console.log("initializing galaxy");
91-
galaxyFrontend = new galaxy.Frontend(galaxySize, minStarMass);
91+
galaxyFrontend = new galaxy.Frontend(galaxySize, timeModifier);
9292
dataviz.initViz(galaxyFrontend);
9393
}
9494
};
@@ -103,7 +103,7 @@ export function Interface() {
103103
if (galaxyFrontend === null) {
104104
console.error("galaxy not yet initialized");
105105
} else {
106-
console.log("seeding galaxy");
106+
console.log("adding mass to the galaxy");
107107
galaxyFrontend.seed(galaxySeedMass);
108108
dataviz.initData(galaxyFrontend);
109109
}
@@ -116,7 +116,9 @@ export function Interface() {
116116
);
117117

118118
const handleTickClick = () => {
119-
galaxyFrontend.tick(minStarMass);
119+
console.log("advancing time");
120+
galaxyFrontend.tick(timeModifier);
121+
dataviz.initData(galaxyFrontend);
120122
};
121123

122124
const tickButton = (
@@ -135,15 +137,13 @@ export function Interface() {
135137
</h2>
136138
{galaxySizeInput}
137139
{galaxySeedMassInput}
138-
{minStarMassInput}
140+
{timeModifierInput}
139141
<div className="d-flex justify-content-between">
140142
{initButton}
141143
{seedButton}
142144
{tickButton}
143145
</div>
144-
<div>
145-
<div id="dataviz"></div>
146-
</div>
146+
<div id="dataviz"></div>
147147
</div>
148148
);
149149
}

‎src/js/lib/dataviz.tsx

Lines changed: 9 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,12 @@ import * as galaxy from "./galaxy";
55
const margin = { top: 40, right: 40, bottom: 40, left: 40 };
66

77
function getSizeModifier(galaxyFrontend: galaxy.Frontend) {
8-
return Math.sqrt(galaxyFrontend.galaxySize);
8+
// TODO: flexible scaling
9+
return Math.sqrt(galaxyFrontend.galaxySize * 10);
910
}
1011

1112
export function initViz(galaxyFrontend: galaxy.Frontend) {
1213
const sizeModifier = getSizeModifier(galaxyFrontend);
13-
const width = galaxyFrontend.galaxySize + margin.left + margin.right;
14-
const height = galaxyFrontend.galaxySize + margin.top + margin.bottom;
1514

1615
// remove old svg
1716
d3.select("#dataviz svg").remove();
@@ -20,53 +19,46 @@ export function initViz(galaxyFrontend: galaxy.Frontend) {
2019
const svg = d3
2120
.select("#dataviz")
2221
.append("svg")
23-
.attr("width", width * sizeModifier + margin.left + margin.right)
24-
.attr("height", height * sizeModifier + margin.top + margin.bottom)
22+
.style("overflow", "visible")
2523
.append("g")
24+
.attr("id", "axis")
2625
.attr("transform", `translate(${margin.left}, ${margin.top})`);
2726

2827
// Add X axis
2928
const x = d3
3029
.scaleLinear()
3130
.domain([0, galaxyFrontend.galaxySize])
3231
.range([0, galaxyFrontend.galaxySize * sizeModifier]);
33-
svg
34-
.append("g")
35-
.attr(
36-
"transform",
37-
`translate(0, ${galaxyFrontend.galaxySize * sizeModifier})`
38-
)
39-
.call(d3.axisBottom(x));
4032

4133
// Add Y axis
4234
const y = d3
4335
.scaleLinear()
4436
.domain([0, galaxyFrontend.galaxySize])
4537
.range([galaxyFrontend.galaxySize * sizeModifier, 0]);
46-
svg.append("g").call(d3.axisLeft(y));
4738
}
4839

4940
export function initData(galaxyFrontend: galaxy.Frontend) {
5041
const sizeModifier = getSizeModifier(galaxyFrontend);
5142

5243
// remove old data
53-
d3.select("#dataviz svg circle").remove();
44+
d3.select("#dataviz svg #data").remove();
5445

5546
// append the svg object to the body of the page
5647
const svg = d3.select("#dataviz svg");
5748
svg
5849
.append("g")
50+
.attr("id", "data")
5951
.selectAll("dot")
6052
.data(galaxyFrontend.cells())
6153
.join("circle")
6254
.attr("cx", function (c: galaxy.Cell) {
63-
return c.x * sizeModifier + margin.left;
55+
return Math.round(c.x * sizeModifier + margin.left);
6456
})
6557
.attr("cy", function (c: galaxy.Cell) {
66-
return c.y * sizeModifier + margin.top;
58+
return Math.round(c.y * sizeModifier + margin.top);
6759
})
6860
.attr("r", function (c: galaxy.Cell) {
69-
return c.mass;
61+
return Math.log(c.mass) > 0 ? Math.log(c.mass) : 0;
7062
})
7163
.style("fill", "#69b3a2");
7264
}

‎src/js/lib/galaxy.ts

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -23,15 +23,17 @@ export class Frontend {
2323
this.galaxy = this.galaxy.seed(additionalMass);
2424
}
2525

26-
public tick(gravityReach: number): void {
27-
this.galaxy = this.galaxy.tick(gravityReach);
26+
public tick(timeModifier: number): void {
27+
this.galaxy = this.galaxy.tick(timeModifier);
2828
}
2929

3030
public cells(): Cell[] {
31+
const cells: Cell[] = [];
32+
3133
const mass = this.galaxy.mass();
3234
const x = this.galaxy.x();
3335
const y = this.galaxy.y();
34-
const cells: Cell[] = [];
36+
3537
for (let i = 0; i < this.galaxySize ** 2; i++) {
3638
cells.push({
3739
mass: mass[i],

0 commit comments

Comments
 (0)