Init broken from glitch

LICENSE

@@ -0,0 +1,54 @@
+The LICENSE file for any project gives credit to the creator/author of the 
+project, copyright information for the project, and the legal terms under 
+which it's being shared. In other words, this is us using an MIT license to
+say "we wrote this and you can do whatever you want with it."
+
+******************************************************************************
+~glitch-hello-website
+******************************************************************************
+MIT License
+
+Copyright (c) 2021, Glitch, Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+
+
+
+******************************************************************************
+
+THIRD-PARTY SOFTWARE
+This is all the software we used to build this starter project. All of these
+licenses are compatible with the license above. We've included links so you
+can learn more if you want. 
+
+1. HK Grotesk: The font we're using. 
+
+
+******************************************************************************
+1. HK Grotesk
+URL: https://hanken.co/products/hk-grotesk
+******************************************************************************
+HK Grotesk was designed by Hanken Design Co. It is shared using a SIL OFL
+license. Full license text can be found at:
+
+https://hanken.co/pages/web-fonts-eula
+******************************************************************************
+END, HK Grotesk
+******************************************************************************

README.md

@@ -0,0 +1,30 @@
+# Hello website!
+
+This is a basic HTML starter project you can build on however you like. No need to save. While you develop your site, your changes will happen ✨ immediately in the preview window. On the left you'll see the files that make up your site, including HTML, JavaScript, and CSS. You can upload assets like images or audio in `assets`. The rest is up to you and your imagination. 🦄
+
+## What's in this project?
+
+← `README.md`: That's this file, where you can tell people what your cool website does and how you built it.
+
+← `index.html`: This is the main web page for your site. The HTML defines the structure and content of the page using _elements_. You'll see references in the HTML to the JS and CSS files. Try clicking the image in the center of the page!
+
+← `style.css`: CSS files add styling rules to your content. The CSS applies styles to the elements in your HTML page. The style rules also make the image move when you click it.
+
+← `script.js`: If you're feeling fancy you can add interactivity to your site with JavaScript. The code in the JavaScript file runs when the page loads, and when the visitor clicks the button you can add below.
+
+Open each file and check out the comments (in gray) for more info.
+
+## Try this next 🏗️
+
+Take a look in `TODO.md` for next steps you can try out in your new site!
+
+___Want a minimal version of this project to build your own website? Check out [Blank Website](https://glitch.com/edit/#!/remix/glitch-blank-website)!___
+
+![Glitch](https://cdn.glitch.com/a9975ea6-8949-4bab-addb-8a95021dc2da%2FLogo_Color.svg?v=1602781328576)
+
+## You built this with Glitch!
+
+[Glitch](https://glitch.com) is a friendly community where millions of people come together to build web apps and websites.
+
+- Need more help? [Check out our Help Center](https://help.glitch.com/) for answers to any common questions.
+- Ready to make it official? [Become a paid Glitch member](https://glitch.com/pricing) to boost your app with private sharing, more storage and memory, domains and more.

TODO.md

@@ -0,0 +1,19 @@
+# TODO 🚧
+
+Your new site is all yours so it doesn't matter if you break it! Try editing the code–add a button element that moves when the user clicks it.
+
+In `index.html`, add this code on the line after the comment with `ADD BUTTON HERE` in it (you can copy and paste the button element HTML):
+
+```html
+<button>
+    Click me!
+</button>
+```
+
+Look at the page to see the button. Click it!
+
+Open `script.js` to see the script that makes the button move.
+
+## Keep going! 🚀
+
+Try adding more properties to the CSS `dipped` style for the button to see how the changes appear on click.

city.html

@@ -0,0 +1,41 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>ctrlw's VR experiments</title>
+  <script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
+</head>
+<body>
+  <a-scene>
+    <a-entity id="info" text="value: Hello World;" position="1 1 1" scale="2 2 1"></a-entity>
+    <a-entity position="0 1.8 0" camera look-controls wasd-controls></a-entity>
+    <a-entity id="leftHand" laser-controls="hand: left" raycaster="objects: [mixin='box']"></a-entity>
+    <a-entity id="rightHand" laser-controls="hand: right" raycaster="objects: [mixin='box']" line="color: #118A7E"></a-entity>
+
+    <a-sky color="#660000"></a-sky>
+    <!--a-box color="#0000ff" position="0 0 0" width="1" height="2" depth="1"></a-box>
+    <a-box color="#0000aa" position="1 1 -1" width="1" height="1" depth="1"></a-box-->
+  </a-scene>
+
+  <script>
+    var scene = document.querySelector('a-scene');
+    let max_x = 10;
+    let max_y = 10;
+    let max_h = 15;
+    for (let x = 0; x < max_x; ++x) {
+      for (let y = 0; y < max_y; ++y) {
+        let h = 3 - Math.floor(Math.log2(Math.ceil(Math.random() * max_h)));
+        let box = document.createElement('a-box');
+
+        box.setAttribute('height', h);
+        let pos = [x, h/2, -y];
+        box.setAttribute('position', pos.join(' '));
+
+        let color = h < 2 ? '#00FF00' : '#AAAAAA';
+        box.setAttribute('color', color);
+        scene.appendChild(box);
+      }
+    }
+  </script>
+</body>
+</html>

index.html

@@ -0,0 +1,104 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>ctrlw's VR experiments</title>
+  <script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
+
+  <script src="log-position.js"></script>
+</head>
+<body>
+  <!-- HTML buttons to mimic buttons of hand controllers in non-VR mode -->
+  <button id="lbtn" style="z-index: 999; position: relative">Left</button>
+  <button id="cbtn" style="z-index: 999; position: relative">Ok</button>
+  <button id="rbtn" style="z-index: 999; position: relative">Right</button>
+
+  <!-- The scene contains all VR related items -->
+  <a-scene>
+    <!-- The rig contains the camera and can move around, we start a bit back from centre -->
+    <a-entity id="rig" position="0 0 2" rotation="0 0 0">
+      <!-- Camera position and rotation in the rig get overwritten by the actual VR head-set, starting at default height 1.6m -->
+      <a-entity id="head" camera look-controls wasd-controls log-position="target: chud" position="0 1.6 0">
+        <!-- "Head up displays" to show live data for camera and left/right hand controller -->
+        <a-entity id="lhud" text="value: left controller data" position="0.5 0 -2" scale="2 2 1"></a-entity>
+        <a-entity id="chud" text="value: head set data" position="1 0.5 -2" scale="2 2 1"></a-entity>
+        <a-entity id="rhud" text="value: right controller data" position="1.5 0 -2" scale="2 2 1"></a-entity>
+      </a-entity>
+
+      <!-- The actual left and right hand controllers -->
+      <a-entity id="leftHand" laser-controls="hand: left" log-position="target: lhud"></a-entity>
+      <a-entity id="rightHand" laser-controls="hand: right" line="color: #118A7E" log-position="target: rhud"></a-entity>
+    </a-entity>
+
+    <!-- A central "floor", slightly below 0 to avoid intersecting with boxes on the floor -->
+    <a-plane color="#005500" position="0 -0.1 0" height="10" width="10" rotation="-90 0 0"></a-plane>
+    <!-- Sky background -->
+    <a-sky color="#660000"></a-sky>
+
+    <!-- Some labels to show how the position works, i.e. "left/right height back/front" -->
+    <a-entity text="value: 0, 0, 0" position="0 0.1 0" ></a-entity>
+    <a-entity text="value: 1, 0, 0" position="1 0.1 0" ></a-entity>
+    <a-entity text="value: 2, 0, 0" position="2 0.1 0" ></a-entity>
+    <a-entity text="value: 0, 0, 0.5" position="0 0.1 0.5" ></a-entity>
+    <a-entity text="value: 1, 0, 0.5" position="1 0.1 0.5" ></a-entity>
+    <a-entity text="value: 2, 0, 0.5" position="2 0.1 0.5" ></a-entity>
+    <a-entity text="value: 0, 0, -0.5" position="0 0.1 -0.5" ></a-entity>
+    <a-entity text="value: 1, 0, -0.5" position="1 0.1 -0.5" ></a-entity>
+    <a-entity text="value: 2, 0, -0.5" position="2 0.1 -0.5" ></a-entity>
+
+    <!-- Zero-height i.e. flat boxes, essentially just squares on floor level -->
+    <a-box color="red" position="0 0 0" width="1" height="0" depth="1"></a-box>
+    <a-box color="yellow" position="1 0 0" width="1" height="0" depth="1"></a-box>
+
+    <!-- Boxes with actual heights, further away and with position centered at mid height -->
+    <a-box color="#0000ff" position="0 1 -1" width="1" height="2" depth="1"></a-box>
+    <a-box color="#0000aa" position="1 0.5 -1" width="1" height="1" depth="1"></a-box>
+    <!-- Labels for the boxes with heights -->
+    <a-entity text="value: [0,1], [0,2], [-1,0];" position="0.5 1 -0.5" ></a-entity>
+    <a-entity text="value: [1,2], [0,1], [-1,0];" position="1.5 0.5 -0.5" ></a-entity>
+
+    <a-sphere color="#ffcccc" position="-1 1 -1" radius="0.5"></a-sphere>
+  </a-scene>
+
+  <!-- Some javascript to interact with the scene and its contents -->
+  <script>
+    const head = document.getElementById('head');
+    const chud = document.getElementById('chud');
+    const lhud = document.getElementById('lhud');
+    const rhud = document.getElementById('rhud');
+    const rig = document.getElementById('rig');
+
+    document.getElementById("cbtn").addEventListener('click', e => {
+      chud.setAttribute('text', 'value: ' + 'bla');
+      const sphere = document.querySelector('a-sphere');
+      sphere.setAttribute('radius', Math.random() + 0.5);
+    });
+    document.getElementById("lbtn").addEventListener('click', e => {
+      lhud.setAttribute('text', 'value: ' + 'left');
+      rig.object3D.position.y -= 0.1;
+    });
+    document.getElementById("rbtn").addEventListener('click', e => {
+      rhud.setAttribute('text', 'value: ' + 'right');
+      rig.object3D.position.y += 0.1;
+    });
+
+    const left = document.getElementById('leftHand');
+    const right = document.getElementById('rightHand');
+    left.addEventListener('buttonchanged', e => {
+      lhud.setAttribute('text', 'value: ' + 'left');
+      // rig.object3D.position.y -= 0.1;
+    });
+    right.addEventListener('buttonchanged', e => {
+      rhud.setAttribute('text', 'value: ' + 'right')
+      // rig.object3D.position.y += 0.1;
+    });    
+    left.addEventListener('axismove', e => {
+      lhud.setAttribute('text', 'value: ' + 'lmove')
+    });
+    right.addEventListener('axismove', e => {
+      rhud.setAttribute('text', 'value: ' + 'rmove')
+    });
+
+  </script>
+</body>
+</html>

log-position-old.js

@@ -0,0 +1,126 @@
+function toString(pos) {
+  var x = pos.x.toFixed(1);
+  var y = pos.y.toFixed(1);
+  var z = pos.z.toFixed(1);
+  return [x, y, z].join(" ");
+}
+
+AFRAME.registerComponent('log-position', {
+  schema: {
+    target: {type: 'string', default: 'chud'}
+  },
+
+  init: function() {
+    this.leftHand = document.getElementById('leftHand').object3D.position;
+    this.rightHand = document.getElementById('rightHand').object3D.position;
+    this.rig = document.getElementById('rig').object3D.position;
+    this.rigRot = document.getElementById('rig').object3D.rotation;
+    this.head = document.getElementById('head').object3D.position;
+
+    // track controller movement of left and right
+    this.lx = this.leftHand.x;
+    this.ly = this.leftHand.y; // y is height
+    this.lz = this.leftHand.z;
+    this.rx = this.rightHand.x;
+    this.ry = this.rightHand.y; // y is height
+    this.rz = this.rightHand.z;
+
+    this.xdir = 0;
+    this.zdir = 0;
+  },
+
+  tick: function () {
+    var rotation = this.el.getAttribute('rotation');
+    var pos = this.el.getAttribute('position');
+    var s = "rot: " + toString(rotation) + "\npos: " + toString(pos);
+    console.log(s);
+    var target = this.data.target; // log to this element
+    const hud = document.getElementById(target);
+    hud.setAttribute('text', 'value: ' + s);
+
+    let isLeftController = (target == 'lhud');
+    let isRightController = (target == 'rhud');
+    if (isLeftController || isRightController) {
+      let xd = isLeftController ? this.lx - pos.x : this.rx - pos.x;
+      let yd = isLeftController ? this.ly - pos.y : this.ry - pos.y;
+      let zd = isLeftController ? this.lz - pos.z : this.rz - pos.z;
+      // this.rig.y = pos.y; // move height with right controller height
+
+      // glide down while above start height
+      let isFlying = this.rig.y > 0;
+      if (isFlying) {
+        this.rig.y -= 0.01;
+      }
+
+      // go up when moving down the controller
+      var xdelta = Math.abs(this.leftHand.x - this.rightHand.x) + 0.2;
+      var zdelta = Math.abs(this.leftHand.z - this.rightHand.z) + 0.2;
+      var armWidth = xdelta * xdelta + zdelta * zdelta;
+
+      let isControllerMovingDown = yd > 0;
+      if (isControllerMovingDown) {
+        this.rig.y += yd * armWidth;
+        let factor = 3;
+        this.rig.x += xd * factor;
+        this.rig.z += zd * factor;
+
+        // if (this.rig.y > 0.2) { // only move horizontally if we're above ground
+        //   var factor = 3;
+        //   var xdir = xd * factor;
+        //   var zdir = zd * factor;
+        //   if (Math.abs(this.xdir) > Math.abs(xdir)) {
+        //     xdir += this.xdir * 0.5;
+        //   }
+        //   if (Math.abs(this.zdir) > Math.abs(zdir)) {
+        //     xdir += this.zdir * 0.5;
+        //   }
+        //   this.xdir = xdir;
+        //   this.zdir = zdir;
+        // }
+      }
+
+      // if left and right arm have different height, turn
+      // TODO: make it work
+      var armHeightDiff = this.leftHand.y - this.rightHand.y;
+      // hud.setAttribute('text', 'value: ' + armHeightDiff);
+      let areHandsDifferentHeight = Math.abs(armHeightDiff) > 0.2;
+      if (areHandsDifferentHeight) {
+        let angle = Math.tan(armHeightDiff / armWidth) * 180 / Math.PI;
+        s += "\nangle: " + angle.toFixed(1) + ', org: ' + toString(this.rigRot);
+        hud.setAttribute('text', 'value: ' + s);
+        this.rigRot.y = (this.rigRot.y - angle / 10000) % 360;
+        // this.rigRot.y += angle / 10.0;
+
+        // var newx = this.rigRot.x * Math.cos(angle) - this.rigRot.z * Math.sin(angle);
+        // var newz = this.rigRot.x * Math.sin(angle) + this.rigRot.z * Math.cos(angle);
+        // hud.setAttribute('text', 'value: ' + (angle*180/Math.PI).toFixed(1) + ', x: ' + newx.toFixed(2) + ', z: ' + newz.toFixed(2));
+        // this.rigRot.x = newx;
+        // this.rigRot.z = newz;
+        // if (lrdelta < 0) { // left down -> turn left
+        //   this.rigRot.y += 0.01;
+        // } else {
+        //   this.rigRot.y -= 0.01;
+        // }
+      }
+
+//       // add floating
+//       this.xdir *= 0.99;
+//       this.zdir *= 0.99;
+      // if (this.rig.y > 0.2) {
+      //   this.rig.x += this.xdir;
+      //   this.rig.z += this.zdir;
+      // }
+
+      // remember controller position
+      if (isLeftController) {
+        this.lx = pos.x;
+        this.ly = pos.y;
+        this.lz = pos.z;
+      } else {
+        this.rx = pos.x;
+        this.ry = pos.y;
+        this.rz = pos.z;
+      }
+    }
+  }
+})