TIL

Javascript

Destructuring as parameters (2019-09-19)

I learned today that you can destructure variables as part of a function declaration or as part of a for-of loop:

function getHeight({ height }) {
  return height;
}
getHeight({ width: 10, height: 200, depth: 7 }); // 200 
 
const points = [
  { x: 3, y: 4 },
  { x: 5, y: 5 },
];
for (let { x, y } of points) {
  console.log(`distSq = ${ x ** 2, y ** 2 }`);
}
// distSq = 25 
// distSq = 50 

Forward Declaration (2019-08-20)

Many linters check for functions to exist before they're referenced. With circular calling, you need to declare a function before it's defined. TIL this is called forward declaration.

var bind = function bindForward() {};
 
function ajax(url) {
  load(url).then(bind);
}
 
bind = function bind() {
  $("a").click(ajax);
}

Destructuring (2019-08-08)

When destructuring, JS only assigns the deepest nested keys:

const req = { query: { person: { first: "Chris", last: "Hallberg" } } };
 
const { query: { person: { first, last } } } = req;
 
console.log(query);  // undefined 
console.log(person); // undefined 
console.log(first);  // "Chris" 
console.log(last);   // "Hallberg" 

You can also assign names that don't match the keys you're grabbing. Just be careful with your brackets.

const req = { query: { data: "apples" } };
 
var { query: data } = req; // rename query to data 
console.log(data); // { data: "apples" } 
 
var { query: { data } } = req; // destruct data from query 
console.log(data); // apples 

Warning: In browsers, name seems to be assigned to "[object Object]" somewhere along the line, so be careful.


WebVR/A-Frame (2019-09-07)

Oculus Quest Debugging

I couldn't find any official way to get debugging info from the Oculus Quest since it only connects over Wi-Fi (if at all) and the SteamVR logs don't pick up anything.

So I dropped a text element into the world and used that as my string log. You can put this element inside the camera if you want it to be visible as a UI element, but I didn't do that.

<a-text id="log" value="Hello!" color="#000" align="center" position="0 2 -5"></a-text>
const logEl = document.getElementById("log");
function log(msg) {
  logEl.setAttribute("value", msg);
}
 
// For updating messages 
function debug() {
  requestAnimationFrame(debug);
  log(blueGun.object3D.matrix.toArray().join(","));
}
requestAnimationFrame(debug);
 
// For everything else 
try {
  // do a backflip 
} catch(e) {
  log(e);
}

Move the World, Not the Camera

I have a few game concepts that involve pulling the player along or changing their view but trying to override the default WebVR camera is a pain.

If you do manage to get control of the camera (either with groups or with rigs) you need to then manually ensure you draw both eye "cameras" anyway. It's just more work that it's worth when you can move the whole world instead!

A heirachy like this makes this quite easy to do:

- scene
  - camera
  - world
    - hand controllers
    - all physical items

Thank you, Stefan Judis for the idea and encouragement.

Sexy Tooltip