keys can be used to navigate, zoom, and step through the simulation

ee276548 · Daniel Hader · c673562a · ee276548 · ee276548 · ee276548
Commit ee276548 authored Aug 24, 2021 by Daniel Hader
Show whitespace changes
Inline Side-by-side

Showing with 104 additions and 5 deletions

index.html index.html +1 -0

interface.js interface.js +66 -0

main.js main.js +37 -5

No files found.
--- a/index.html
+++ b/index.html
@@ -12,6 +12,7 @@
  <body>
    <script src="three.js" type="text/javascript"></script>
    <script src="tile.js" type="text/javascript"></script>
+    <script src="interface.js" type="text/javascript"></script>
    <script src="main.js" type="text/javascript"></script>
  </body>
 </html>
--- a/interface.js
+++ b/interface.js
+document.addEventListener('keydown', keydown);
+document.addEventListener('keyup', keyup);
+
+let keymap = {
+    "KeyW": "up",
+    "KeyS": "down",
+    "KeyA": "left",
+    "KeyD": "right",
+
+    "ArrowUp": "up",
+    "ArrowDown": "down",
+    "ArrowLeft": "left",
+    "ArrowRight": "right",
+
+    "KeyP": "zoom_in",
+    "KeyO": "zoom_out",
+}
+
+let keys = {
+    up: false,
+    down: false,
+    left: false,
+    right: false,
+    zoom_in: false,
+    zoom_out: false,
+}
+
+let zoom_linear = 1;
+
+const CAMERA_SPEED = 0.02;
+const ZOOM_MIN = -1;
+const ZOOM_MAX = 6;
+const ZOOM_SPEED = 0.1;
+
+function update() {
+    if (keys.zoom_out) zoom_linear += ZOOM_SPEED;
+    if (keys.zoom_in) zoom_linear -= ZOOM_SPEED;
+    if (zoom_linear < ZOOM_MIN) zoom_linear = ZOOM_MIN;
+    if (zoom_linear > ZOOM_MAX) zoom_linear = ZOOM_MAX;
+	
+    camera.zoom = Math.pow(2, -zoom_linear);
+
+    if (keys.up) camera.position.y -= CAMERA_SPEED / camera.zoom;
+    if (keys.down) camera.position.y += CAMERA_SPEED / camera.zoom;
+    if (keys.left) camera.position.x += CAMERA_SPEED / camera.zoom;
+    if (keys.right) camera.position.x -= CAMERA_SPEED / camera.zoom;
+
+    camera.updateProjectionMatrix();
+}
+
+function keyup(event) {
+    if (event.code in keymap) {
+	keys[keymap[event.code]] = false;
+    }
+}
+
+function keydown(event) {
+    if (event.code in keymap) {
+	keys[keymap[event.code]] = true;
+    }
+    
+    if (event.code === "Space") {
+	system.step();
+    }
+}
+
--- a/main.js
+++ b/main.js
@@ -6,22 +6,51 @@ document.body.appendChild(renderer.domElement);
 window.addEventListener('resize', resize, false);

 const tile_types = [
-    new TileType("seed", "seed", "#ffffaa", {
+    new TileType("seed", "seed", "#aaaaff", {
 	north: new Glue(2, "A"),
 	east: new Glue(2, "B")}),

    new TileType("Vertical", "V", "#ffaaff", {
+	north: new Glue(2, "A"),
+	east: new Glue(1, '1'),
 	south: new Glue(2, "A")}),
+
+    new TileType("Horizontal", "H", "#aaffff", {
+	north: new Glue(1, '0'),
+	east: new Glue(2, "B"),
+	west: new Glue(2, "B")}),
+
+    new TileType("Add 00", "0", "#cccccc", {
+	north: new Glue(1, "0"),
+	east: new Glue(1, "0"),
+	south: new Glue(1, "0"),
+	west: new Glue(1, "0")}),
+
+    new TileType("Add 01", "1", "#666666", {
+	north: new Glue(1, "1"),
+	east: new Glue(1, "0"),
+	south: new Glue(1, "0"),
+	west: new Glue(1, "1")}),
+
+    new TileType("Add 10", "1", "#666666", {
+	north: new Glue(1, "1"),
+	east: new Glue(1, "0"),
+	south: new Glue(1, "1"),
+	west: new Glue(1, "0")}),
+
+    new TileType("Add 11", "0", "#cccccc", {
+	north: new Glue(1, "0"),
+	east: new Glue(1, "1"),
+	south: new Glue(1, "1"),
+	west: new Glue(1, "1")}),
 ];

 system = new System(2, tile_types);
-system.step();

-camera.position.z = 2;
-camera.zoom = 0.5;
+camera.position.set(0, 0, 2);
 camera.updateProjectionMatrix();

-renderer.setClearColor(0x666666, 1);
+renderer.setClearColor(0xffffaa, 1);

 resize();
 animate();
@@ -37,6 +66,9 @@ function resize() {

 function animate() {
    requestAnimationFrame(animate);
+    
+    update();
+
    renderer.render(scene, camera);
 }