aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
authorJaro Camphuijsen <jjecamphuijsen@gmail.com>2015-10-30 17:44:09 +0100
committerJaro Camphuijsen <jjecamphuijsen@gmail.com>2015-10-30 18:16:51 +0100
commit48db592d204d27cd043c97209ede89ea5ef820fb (patch)
tree8de5e3958fd923776016411ae7621bc6d4cc3763
parent868d75b1c77ef4913fdb62be67a3cdac6eb01307 (diff)
implemented counter and added date to solar system
-rw-r--r--calc.js50
-rw-r--r--index.html3
-rw-r--r--main.js116
-rw-r--r--style.css13
-rw-r--r--systems.js23
5 files changed, 164 insertions, 41 deletions
diff --git a/calc.js b/calc.js
index 0a7db19..184ddb5 100644
--- a/calc.js
+++ b/calc.js
@@ -90,29 +90,32 @@ export function touch(b1, b2) {
return (distance.length() <= (b1.rad + b2.rad));
}
-export function elasticCollision(b1, b2) {
- // console.log("until here everything is fine")
-
- let m1 = b1.m, m2 = b2.m,
- v1 = b1.v.clone(), v2 = b2.v.clone(),
- v12 = new Vec3(0,0,0), v21 = new Vec3(0,0,0),
- r1 = b1.r.clone(), r2 = b2.r.clone(),
- r12 = new Vec3(0,0,0), r21 = new Vec3(0,0,0),
- v1new = new Vec3(0,0,0), v2new = new Vec3(0,0,0);
-
- v12.subVectors(v1, v2);
- v21.subVectors(v2, v1);
- r12.subVectors(r1, r2);
- r21.subVectors(r2, r1);
- // console.log("old", v1.length(),v2.length())
-
-
- v1new.subVectors(v1, r12.multiplyScalar( (v12.dot(r12)/r12.lengthSq()) * (2 * m2 / (m1 + m2)) ) );
- v2new.subVectors(v2, r21.multiplyScalar( (v21.dot(r21)/r21.lengthSq()) * (2 * m1 / (m1 + m2)) ) );
- // console.log("new", v1new.length(),v2new.length())
+export function checkBodiesApproach(b1, b2) {
+ let relR = new Vec3(0,0,0);
+ let relV = new Vec3(0,0,0);
+ relR.subVectors(b1.r, b2.r);
+ relV.subVectors(b1.v, b2.v);
+ return (relV.dot(relR) < 0);
+}
- b1.v = v1new;
- b2.v = v2new;
+export function elasticCollision(b1, b2) {
+ let m1 = b1.m, m2 = b2.m,
+ v1 = b1.v.clone(), v2 = b2.v.clone(),
+ v12 = new Vec3(0,0,0), v21 = new Vec3(0,0,0),
+ r1 = b1.r.clone(), r2 = b2.r.clone(),
+ r12 = new Vec3(0,0,0), r21 = new Vec3(0,0,0),
+ v1new = new Vec3(0,0,0), v2new = new Vec3(0,0,0);
+
+ v12.subVectors(v1, v2);
+ v21.subVectors(v2, v1);
+ r12.subVectors(r1, r2);
+ r21.subVectors(r2, r1);
+
+ v1new.subVectors(v1, r12.multiplyScalar( (v12.dot(r12)/r12.lengthSq()) * (2 * m2 / (m1 + m2)) ) );
+ v2new.subVectors(v2, r21.multiplyScalar( (v21.dot(r21)/r21.lengthSq()) * (2 * m1 / (m1 + m2)) ) );
+
+ b1.v = v1new;
+ b2.v = v2new;
}
export function mergeCollision(bodies, spheres, scene, b1, b2) {
@@ -120,15 +123,12 @@ export function mergeCollision(bodies, spheres, scene, b1, b2) {
if (b1.m > b2.m) {
bBig = b1, bSmall = b2;
console.log("merge!");
-
}
else {
bBig = b2, bSmall = b1;
console.log("merge!");
-
}
- // console.log(bBig.m)
bBig.m += bSmall.m;
bBig.rad += 2;
diff --git a/index.html b/index.html
index 827f4da..1434d6d 100644
--- a/index.html
+++ b/index.html
@@ -12,8 +12,9 @@
<script src="https://cdnjs.cloudflare.com/ajax/libs/stats.js/r14/Stats.min.js"></script>
</head>
<body>
- <div id="gui" ></div>
+ <div id="gui"></div>
<div id="sim"></div>
+ <div id="time"></div>
<script src="sunsistemo.js"></script>
</body>
</html>
diff --git a/main.js b/main.js
index 6d6204d..50ec8f0 100644
--- a/main.js
+++ b/main.js
@@ -10,6 +10,8 @@ let numBodies = 1;
let sphereP = 12;
let sunOn;
+let timer;
+var steps;
let system, bodies, spheres;
let menuList = [
@@ -24,10 +26,29 @@ let menuList = [
{"label":"Butterfly 1", "function": systems.genButterFly1, "args": []},
{"label":"Yin Yang 1", "function": systems.genYinYang1, "args": []},
{"label":"Goggles", "function": systems.genGoggles, "args": []},
- {"label":"Yarn", "function": systems.genYarn, "args": []}
+
+ {"label":"Yarn", "function": systems.genYarn, "args": []},
+ // {"label": "Choreographies", "function": showSubmenu, "args": []},
+ {"label":"Solar System", "function": systems.genSolarSystem, "args": [true] }
];
-gui(menuList);
+let choreoSubmenuList = [
+ {"label": "genButterFly1", "function": systems.genButterFly1, "args": []},
+ {"label": "genButterFly2", "function": systems.genButterFly2, "args": []},
+ {"label": "genBumblebee ", "function": systems.genBumblebee , "args": []},
+ {"label": "genMoth1 ", "function": systems.genMoth1 , "args": []},
+ {"label": "genMoth2 ", "function": systems.genMoth2 , "args": []},
+ {"label": "genButterfly3", "function": systems.genButterfly3, "args": []},
+ {"label": "genMoth3 ", "function": systems.genMoth3 , "args": []},
+ {"label": "genGoggles ", "function": systems.genGoggles , "args": []},
+ {"label": "genButterfly4", "function": systems.genButterfly4, "args": []},
+ {"label": "genDragonfly ", "function": systems.genDragonfly , "args": []},
+ {"label": "genYarn ", "function": systems.genYarn , "args": []},
+ {"label": "genYinYang1 ", "function": systems.genYinYang1 , "args": []},
+ {"label": "genYinYang2 ", "function": systems.genYinYang2 , "args": []}
+]
+
+gui(menuList);
simulate(menuList[0].function, [0, true, false]);
function gui(buttonList) {
@@ -78,6 +99,61 @@ function gui(buttonList) {
d3.selectAll(".selected")
.classed("selected", false);
clearSimulation();
+ simulate(d.function, d.args.push(d));
+ d3.select(d3.event.target.parentNode)
+ .classed("selected", true);
+ });
+
+ }
+
+function showSubmenu(submenuList, menuButton){
+ let buttonHeight = 40;
+ let buttonWidth = 200;
+ let body = d3.select("body");
+ let menuDiv = body.selectAll("#gui");
+ menuDiv.style();
+ let menuSvg = menuDiv.append("svg")
+ .attr("width", buttonWidth + 50 + "px")
+ .attr("height", buttonHeight * menuList.length + 20 + "px")
+ .attr("class", "menuSvg");
+
+ var buttons = menuSvg.selectAll(".button")
+ .data(submenuList)
+
+ 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", (buttonWidth))
+ .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);
@@ -88,19 +164,23 @@ function gui(buttonList) {
function clearSimulation() {
let simDiv = document.getElementById("sim");
while (simDiv.firstChild) simDiv.removeChild(simDiv.firstChild);
+ let timeDiv = document.getElementById("time");
+ while (timeDiv.firstChild) timeDiv.removeChild(timeDiv.firstChild);
let statDiv = d3.select("#stats").remove();
}
function simulate(sysFunc, args){
system = sysFunc(...args);
- console.log(system);
bodies = system.bodies;
if (system.hasOwnProperty("stepsPerFrame")) {
system.steps = system.stepsPerFrame;
}
+
else { system.steps = 1; }
+ timer = new Date(0);
[spheres] = init();
animate_leapfrog();
+
window.addEventListener('resize', onWindowResize, true);
}
@@ -110,7 +190,6 @@ function init() {
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 100000);
camera.position.set(system.camera.x, system.camera.y, system.camera.z);
scene.add(camera);
-
// orbitcontrols
controls = new THREE.OrbitControls(camera);
@@ -124,6 +203,7 @@ function init() {
});
let skymap = new THREE.Mesh(geometry, material);
scene.add(skymap);
+
// spheres
let spheres = [];
@@ -132,7 +212,7 @@ function init() {
let material = new THREE.MeshPhongMaterial();
material.map = b.getTexture();
material.bumpMap = b.getBumpMap();
- material.bumpScale = 0.1;
+ material.bumpScale = 0.3;
material.specularMap = b.getSpecularMap();
let sphere = new THREE.Mesh(geometry, material);
sphere.position.set(b.r.x, b.r.y, b.r.z);
@@ -168,6 +248,7 @@ function init() {
scene.add(ambient);
}
+
renderer = new THREE.WebGLRenderer();
renderer.setClearColor(0x000000);
renderer.setSize(window.innerWidth, window.innerHeight);
@@ -189,11 +270,17 @@ function animate_leapfrog() {
}
function animate() {
+
+ timer.setTime(timer.getTime() + (system.stepsize * system.stepsPerFrame * 1000));
for (let i = 0; i < system.steps; i ++) {
bodies = calc.symplectic_euler(bodies, system.stepsize);
}
+ // console.log(new Date(timer).getMilliseconds());
+ console.log(timer);
+
- // [bodies, spheres] = calc.removeLostBodies(bodies, spheres, scene, 2000);
+
+ [bodies, spheres] = calc.removeLostBodies(bodies, spheres, scene, system.boundary);
for (let i = 0; i < bodies.length; i++) {
let pos = bodies[i].r.clone();
@@ -210,14 +297,25 @@ function animate() {
if (system.collisions) {
for (let j = i + 1; j < bodies.length; j++) {
if ((i !== j) && (calc.touch(bodies[i],bodies[j]))) {
- calc.elasticCollision(bodies[i],bodies[j]);
- // calc.mergeCollision(bodies, spheres, scene, bodies[i], bodies[j]);
+ if (calc.checkBodiesApproach(bodies[i],bodies[j])){
+ calc.elasticCollision(bodies[i],bodies[j]);
+ // calc.mergeCollision(bodies, spheres, scene, bodies[i], bodies[j]);
+ }
}
}
}
}
-
+ // if (timer < 10000000000) {
+ // requestAnimationFrame(animate);
+ // }
requestAnimationFrame(animate);
+
+ // timer
+
+ if (system.counter === "date") {
+ document.getElementById("time").innerHTML = timer.getDate() + "/" + (timer.getMonth() + 1) + "/" + timer.getFullYear()
+ }
+
render();
controls.update();
stats.update();
diff --git a/style.css b/style.css
index b25d119..102fd15 100644
--- a/style.css
+++ b/style.css
@@ -16,6 +16,19 @@ html, body {
display: block;
z-index: 1
}
+
+#time{
+ opacity:1;
+ position: fixed;
+ top:20px;
+ right: 30px;
+ display: block;
+ z-index: 5;
+ color: white;
+ font-size: 25pt;
+ font-family: sans-serif;
+ }
+
.button{
fill: #aaa;
opacity: .95;
diff --git a/systems.js b/systems.js
index 0f1ea2c..9e2f96f 100644
--- a/systems.js
+++ b/systems.js
@@ -172,7 +172,9 @@ export function genSolarSystem(sunOn) {
camera: {x: 0, y: 0, z: 1300},
collisions: false,
sunOn: sunOn,
- sphereP: 32
+ sphereP: 32,
+ boundary: 1E13,
+ counter: "date"
};
}
@@ -188,7 +190,8 @@ export function gen2Bodies(sunOn) {
camera: {x: 0, y: 0, z: 250},
collisions: false,
sunOn: sunOn,
- sphereP: 32
+ sphereP: 32,
+ boundary: 2000
};
}
@@ -206,7 +209,9 @@ export function gen3Bodies(sunOn) {
camera: {x: 0, y: 0, z: 250},
collisions: false,
sunOn: sunOn,
- sphereP: 32
+ sphereP: 32,
+ boundary: 2000
+
};
}
@@ -227,10 +232,13 @@ export function genBodies(n, bodyTexture, sunOn, collisions) {
return {
bodies: bodies,
stepsize: 0.001,
+ stepsPerFrame: 1,
camera: {x: 0, y: 0, z: 400},
collisions: collisions,
sunOn: sunOn,
- sphereP: 12
+ sphereP: 12,
+ boundary: 2000
+
};
}
@@ -253,10 +261,12 @@ export function genBodiesRot(n, bodyTexture, sunOn, collisions) {
return {
bodies: bodies,
stepsize: 0.0005,
+ stepsPerFrame: 1,
camera: {x: 0, y: 0, z: 400},
collisions: collisions,
sunOn: sunOn,
- sphereP: 12
+ sphereP: 12,
+ boundary: 2000
};
}
@@ -274,7 +284,8 @@ function ThreeBodyPlanarPeriodicOrbit(x1d, y1d) {
stepsize: 0.00002,
stepsPerFrame: 300,
camera: {x: 0, y: 0, z: 2},
- collisions: false
+ collisions: false,
+ boundary: 2000
};
};