Seeking some closure

Jeremy Moore — Fri, 19 Apr 2019 21:00:39 +0000

Introduction

As part of my effort to better understand how functions work in Javascript, I had reviewed the concept of closure and how powerful it can be when it comes to organizing code. I won't go over closure here, but you can read more from Mozilla here. The specific issue I dealt with involved accessing the closure variables in an inner function.

Can't see bloody A,B,C or D

A situation I had never encountered before involving the Scope debugging panel in Chrome. I was attempting to determine the value assigned to a variable by a function call while inside a nested function. A simplified version of the scenario is below:

function testing() {

    var a = "modern";
    var b = "major";
    var c = "general";

    function innerFunction() {
        console.log(`Not using parent function var`);
    }

    innerFunction();

};

If you were to run the function testing(), you would see that there is no sign of the variables a,b or c if a breakpoint is placed inside the innerFunction().

I can't see you

What I discovered was that the values of references in the outer function are not visible in the inner function unless they are actually used. Making a one line change to the above example results in this:

function testingClosure() {

    var a = "modern";
    var b = "major";
    var c = "general";

    function innerFunction() {
        console.log(`Using parent function var, value: ${a}`)
    }

    innerFunction();

};

The outer testingClosure() function variables are now available inside the innerFunction() for debugging.

I had originally wanted to examine the value of a inside the inner function without writing any code, but due to the way browser debugging works, there was no way around it.

Codepen

You can experiment with closures here:

Try placing a debugger statement in the inner function and see the scope difference.

You Can't Escape The Mesh

Jeremy Moore — Thu, 18 Apr 2019 01:14:50 +0000

Introduction

When I first began studying web development several years ago I was attracted to 3D graphics, having come from an architecture background where I did a lot of work in 3DsMax, and later Revit. I ended up doing a group project that combined my love of 3D with motion tracking using the Leap Motion tracker. The result was a 3D hand controlled version of the classic game Pong, built using the ThreeJS library. My interest in 3D has persisted, through playing games like Portal. Eventually I decided it was time to try some more development. Question was: where to begin?

You can read my article about creating Crazy Leap Pong here

Rediscovering the joy of Descent

One of the first computer games I played intensely was the 3D shooter game Descent. This was where I was introduced to the concept of portal rendering, only rendering what needs to be rendered in 3D. Descent handles this concept quite nicely since the setting consists of mines with multiple chambers. If you're in one chamber and there's a door, there's no need to render the next chamber until you open the door. I decided that this would be a good exercise for creating a navigable 3D experience. My previous work had been simple simulations of objects in motion.

Creating the opening scene

I decided to create a simple chamber to chamber environment, where the two chambers would be linked to a tunnel that would only be revealed after a door was opened. I quickly realized that cubes in 3D have no "solidity" unless you specify that they do; otherwise, they are simply objects with six sides that you can't see through. Therefore, I simply created a cube and placed my camera inside of it.

Open, Sesame

I handled collision detection by using the ThreeJS Raycaster to determine if the direction of travel would intersect one of the sides of the surrounding cube. In order to escape the chamber, the user would need to navigate to the door and press a key.

This action would trigger the rendering of the rest of the environment: the tunnel and the other chamber. Until this point the starting chamber was the extent of the world. I used another library to handle the union operation to combine the newly rendered tunnel and destination chamber with the starting chamber into one mesh.

Demo

The CodePen is below. Feel free to explore.

DEV Community: Jeremy Moore

Seeking some closure

Introduction

Can't see bloody A,B,C or D

I can't see you

Codepen

You Can't Escape The Mesh

Introduction

Rediscovering the joy of Descent

Creating the opening scene

Open, Sesame

Demo