aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
authorJaro Camphuijsen <jjecamphuijsen@gmail.com>2015-10-16 02:48:09 +0200
committerJaro Camphuijsen <jjecamphuijsen@gmail.com>2015-10-16 02:59:42 +0200
commit640ebd3d0a6e446d39138e375787e7e84101ab9a (patch)
tree8d7894f207ae3b9d36222161c988d12a23b4f415
parent1a070349dff56a972dcffe4f486a4f24b3155142 (diff)
Simple GUI added, fixed issue #5
-rw-r--r--index.html11
-rw-r--r--style.css40
-rw-r--r--sunsistemo.es6.js145
-rw-r--r--systems.es6.js46
4 files changed, 186 insertions, 56 deletions
diff --git a/index.html b/index.html
index e3ee2e6..f51b3d3 100644
--- a/index.html
+++ b/index.html
@@ -4,18 +4,15 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Sunsistemo - N-body simulator</title>
- <style>
- html, body {
- margin: 0px;
- padding: 0px;
- overflow: hidden;
- }
- </style>
+ <link rel="stylesheet" type="text/css" href="style.css"/>
+ <script src="http://d3js.org/d3.v3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r72/three.min.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/89aff65e75546eddc96db06e25b5774875fc9b27/examples/js/controls/OrbitControls.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/stats.js/r14/Stats.min.js"></script>
</head>
<body>
+ <div id="gui" style="background-color: rgba(220,220,220,0); position: fixed;"></div>
+ <div id="sim"></div>
<script src="sunsistemo.js"></script>
</body>
</html>
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..c2a631f
--- /dev/null
+++ b/style.css
@@ -0,0 +1,40 @@
+html, body {
+ margin: 0px;
+ padding: 0px;
+ overflow: hidden;
+ }
+#gui{
+ background-color: rgba(220,220,220,.8);
+ position: fixed;
+ display: block;
+ z-index: 5;
+ }
+#sim{
+ background-color: rgba(220,220,220,.2);
+ position: relative;
+ right: 0;
+ display: block;
+ z-index: 1
+ }
+ .button{
+ fill: #aaa;
+ opacity: .95;
+ cursor:pointer;
+}
+.button > text{
+ fill: #000;
+ opacity: 1;
+}
+.highlight{
+ fill: rgba(196,119,73,1);
+ opacity: .95;
+}
+.selected{
+ fill: #400;
+ opacity: .95;
+ cursor:pointer;
+}
+text{
+ font-family: "Trebuchet MS", Helvetica, sans-serif ;
+
+} \ No newline at end of file
diff --git a/sunsistemo.es6.js b/sunsistemo.es6.js
index 66aab51..3af63ca 100644
--- a/sunsistemo.es6.js
+++ b/sunsistemo.es6.js
@@ -1,37 +1,109 @@
let scene, camera, light, renderer;
let controls, stats;
-import Body from "./calc.es6.js";
+import Body from "./systems.es6.js";
import * as systems from "./systems.es6.js";
import * as calc from "./calc.es6.js";
let bodyTexture = true;
-let numBodies = 100;
+let numBodies = 1;
let sphereP = 32;
+let sunOn;
var steps;
let system, bodies;
let spheres;
-let sysDict = {
- "Random Bodies": systems.genBodies,
- "Solar System": systems.genSolarSystem,
- "Total Angular Momentum": systems.genBodiesRot,
- "Three Bodies": systems.gen3Bodies
-};
-
-// simulate("Random Bodies")
-simulate("Three Bodies");
+// let sysDict = {
+// "Random Bodies": systems.genBodies ,
+// "Solar System": systems.genSolarSystem,
+// "Total Angular Momentum": systems.genBodiesRot,
+// "Three Bodies": systems.gen3Bodies
+// };
+
+let menuList = [
+ {"label":"Empty", "function": systems.genBodies, "args": [0, true, false]},
+ {"label":"Only Sun", "function": systems.genBodiesRot, "args": [0, true, true]},
+ {"label":"Two Bodies", "function": systems.gen2Bodies, "args": [true]},
+ {"label":"Three Bodies", "function": systems.gen3Bodies, "args": [true]},
+ {"label":"Random Bodies", "function": systems.genBodies, "args": [200, true, false]},
+ {"label":"Angular Momentum", "function": systems.genBodiesRot, "args": [200, true, true]},
+ {"label":"Solar System", "function": systems.genSolarSystem, "args": [true] }
+
+];
+var steps;
+gui(menuList);
+
+simulate(menuList[0].function, [0, true, false]);
+
+function gui(buttonList) {
+ let buttonHeight = 50
+ let body = d3.select("body")
+ let menuDiv = body.selectAll("#gui")
+ menuDiv.style()
+ let menuSvg = menuDiv.append("svg")
+ .attr("width", 200 + "px")
+ .attr("height", buttonHeight * menuList.length + 20 + "px")
+ .attr("class", "menuSvg");
+
+ var buttons = menuSvg.selectAll(".button")
+ .data(menuList)
+ // console.log(dict)
+
+ buttons.enter()
+ .append("g")
+ .attr("transform", function(d,i){
+ return ("translate(" + 10 + "," + ((i * buttonHeight) + 10) + ")")
+ })
+ .attr("class", "button");
+
+ buttons.append("rect")
+ .style("fill", "#aaa")
+ .style("opacity",".5")
+ .attr("width", (150))
+ .attr("height", buttonHeight - 3)
+ .attr("rx", 5)
+ .attr("ry", 5);
+
+ buttons.append("text")
+ .style("fill", "black")
+ .attr("dx", ".35em")
+ .attr("y", buttonHeight / 2)
+ .attr("dy", ".35em")
+ .text(function(d){return d.label});
+
+ buttons.on("mouseover", function(d){
+ d3.select(d3.event.target.parentNode)
+ .classed("highlight", true);
+ })
+ .on("mouseout", function(d){
+ d3.select(d3.event.target.parentNode)
+ .classed("highlight", false);
+ })
+
+ .on("click", function(d){
+ d3.selectAll(".selected")
+ .classed("selected", false)
+ clearSimulation()
+ simulate(d.function, d.args)
+ d3.select(d3.event.target.parentNode)
+ .classed("selected", true);
+ })
+
+ }
-function simulate(sysID){
- let sysFunc = sysDict[sysID];
- system = sysFunc(numBodies, bodyTexture);
+function clearSimulation() {
+ let simDiv = document.getElementById("sim");
+ while (simDiv.firstChild) simDiv.removeChild(simDiv.firstChild);
+ }
+function simulate(sysFunc, args){
+ system = sysFunc(...args);
+ console.log(system)
bodies = system.bodies;
if (system.hasOwnProperty("stepsPerFrame")) {
steps = system.stepsPerFrame;
- } else {
- steps = 1;
- }
+ }
+ else { steps = 1; }
[spheres] = init();
animate_leapfrog();
@@ -64,7 +136,7 @@ function init() {
let material = new THREE.MeshPhongMaterial();
material.map = b.getTexture();
material.bumpMap = b.getBumpMap();
- material.bumpScale = 0.05;
+ material.bumpScale = 0.1;
material.specularMap = b.getSpecularMap();
let sphere = new THREE.Mesh(geometry, material);
sphere.position.set(b.r.x, b.r.y, b.r.z);
@@ -72,22 +144,24 @@ function init() {
spheres.push(sphere);
}
- let sun = spheres[0];
- sun.material.emissive.set(0xfcd440);
-
- // sunlight
- let light = new THREE.PointLight(0xfcd440, 2, 2000);
- sun.add(light);
-
- // sun glow
- let spriteMaterial = new THREE.SpriteMaterial({
- map: THREE.ImageUtils.loadTexture("textures/glow.png"),
- color: 0xfc843f, transparent: false, blending: THREE.AdditiveBlending
- });
- let sprite = new THREE.Sprite(spriteMaterial);
- let glowRadius = sun.geometry.boundingSphere.radius * 5;
- sprite.scale.set(glowRadius, glowRadius, 1.0);
- sun.add(sprite);
+ if (system.sunOn){
+ let sun = spheres[0];
+ sun.material.emissive.set(0xfcd440);
+
+ // sunlight
+ let light = new THREE.PointLight(0xfcd440, 2, 2000);
+ sun.add(light);
+
+ // sun glow
+ let spriteMaterial = new THREE.SpriteMaterial({
+ map: THREE.ImageUtils.loadTexture("textures/glow.png"),
+ color: 0xfc843f, transparent: false, blending: THREE.AdditiveBlending
+ });
+ let sprite = new THREE.Sprite(spriteMaterial);
+ let glowRadius = sun.geometry.boundingSphere.radius * 5;
+ sprite.scale.set(glowRadius, glowRadius, 1.0);
+ sun.add(sprite);
+ }
// overall light
let ambient = new THREE.AmbientLight(0x404040);
@@ -96,8 +170,7 @@ function init() {
renderer = new THREE.WebGLRenderer();
renderer.setClearColor(0x000000);
renderer.setSize(window.innerWidth, window.innerHeight);
- document.body.appendChild(renderer.domElement);
-
+ document.getElementById("sim").appendChild(renderer.domElement);
// stats
stats = new Stats();
stats.domElement.style.position = 'absolute';
diff --git a/systems.es6.js b/systems.es6.js
index 05827fa..b5b5e36 100644
--- a/systems.es6.js
+++ b/systems.es6.js
@@ -57,7 +57,7 @@ let allTextures = { "sun": loadTextures("sun", true, false, false),
"softball": loadTextures("softball", true, true, false)
};
-export function genSolarSystem() {
+export function genSolarSystem(sunOn) {
// Initial conditions of the solar system at 00:00:00 1 January 1970
let sun = new Body(
@@ -158,6 +158,7 @@ export function genSolarSystem() {
b.rad = scaleRadius(b.rad);
}
+
return {
bodies: bodies,
// stepsize: 10000. * (60 * 60 * 24),
@@ -167,25 +168,42 @@ export function genSolarSystem() {
scalePosition: vec => vec.setLength(Math.pow(vec.length(), 1/6)),
// scalePosition: vec => vec.setLength(Math.log(vec.length)/Math.log(1.4)),
camera: {x: 0, y: 0, z: 1300},
- collisions: false
+ collisions: false,
+ sunOn: sunOn
+ };
+}
+export function gen2Bodies(sunOn) {
+ let rot = () => Math.random() / 30;
+ let s1 = new Body(1E19, new Vec3(0, 0, 0), new Vec3(0, -90, 0), 8, "sun", new Vec3(0, 0, rot()));
+ let s2 = new Body(1E18, new Vec3(200, 0, 0), new Vec3(0, 900, 0), 8, "earth", new Vec3(0, 0, rot()));
+ let bodies = [s1, s2];
+
+ return {
+ bodies: bodies,
+ stepsize: 0.001,
+ camera: {x: 0, y: 0, z: 400},
+ collisions: false,
+ sunOn: sunOn
};
}
-export function gen3Bodies() {
- let s1 = new Body(1E19, new Vec3(0, 0, 0), new Vec3(0, 2, 0), 12, "sun", new Vec3(0, 0.01, 0));
- let s2 = new Body(1E18, new Vec3(200, 0, 0), new Vec3(0, 900, 0), 8, "mars", new Vec3(0, 0.02, 0));
- let s3 = new Body(1E18, new Vec3(-200, 0, 0), new Vec3(0, -900, 0), 8, "earth", new Vec3(0, 0.04, 0));
+export function gen3Bodies(sunOn) {
+ let rot = () => Math.random() / 30;
+ let s1 = new Body(1E19, new Vec3(0, 0, 0), new Vec3(0, 2, 0), 8, "mercury", new Vec3(0, 0, rot()));
+ let s2 = new Body(1E18, new Vec3(200, 0, 0), new Vec3(0, 900, 0), 8, "venus", new Vec3(0, 0, rot()));
+ let s3 = new Body(1E18, new Vec3(-200, 0, 0), new Vec3(0, -900, 0), 8, "earth", new Vec3(0, 0, rot()));
let bodies = [s1, s2, s3];
return {
bodies: bodies,
- stepsize: 0.001,
- camera: {x: 0, y: 0, z: 300},
- collisions: false
+ stepsize: 0.0005,
+ camera: {x: 0, y: 0, z: 400},
+ collisions: false,
+ sunOn: sunOn
};
}
-export function genBodies(n, bodyTexture) {
+export function genBodies(n, bodyTexture, sunOn) {
if (!bodyTexture){allTextures = [];}
let bodies = [];
@@ -203,11 +221,12 @@ export function genBodies(n, bodyTexture) {
bodies: bodies,
stepsize: 0.001,
camera: {x: 0, y: 0, z: 400},
- collisions: true
+ collisions: true,
+ sunOn: sunOn
};
}
-export function genBodiesRot(n, bodyTexture) {
+export function genBodiesRot(n, bodyTexture, sunOn) {
if (!bodyTexture){allTextures = [];}
let bodies = [];
@@ -228,7 +247,8 @@ export function genBodiesRot(n, bodyTexture) {
bodies: bodies,
stepsize: 0.001,
camera: {x: 0, y: 0, z: 400},
- collisions: true
+ collisions: true,
+ sunOn: sunOn
};
}