Saturday June 28, 2014: Is Live

For the long project at Hack Reactor, I worked as a software engineer at in San Francisco. Our objective was to build something impressive using their framework. Easy enough.

The final work time, from not knowing the framework to making a fully functional and designed game came to under three weeks. Check out the live version at

What's is framework built from JavaScript, HTML, and CSS that allows animations and 3D manipulations to take place in the browser. incorporates animations, physics, dynamic layouts, and much more. This is huge because these types of animations have been locked to computers--but not anymore. The technology is very new, and there is sparse documentation on many of its features--but all that really means is that we can be more creative!

The first few days at were spent learning the framework and best practices of their design patterns. Lots of contextual binding and function declarations. (Check out my blog post on function delcarations here.)

Excited with the possibilities, Joe (my partner on this project) and I began working on recreating a game called Monospace.

What's Monospace?

Monospace is a game created by Daniel Lutz who is now working as a creative director at Square Enix. This game won Unity's award for Best iPhone Game.

Here's the description of Monospace on the App Store:

Monospace is a unique puzzle game for the iPhone and iPod touch, where players need to think in both 2 and 3 dimensions.

The goal is to collect a certain amount of white cubes in every level. To do that, the player is given the ability to switch between 2 and 3-dimensional views of the game situation. Possibilities and solutions change depending on the players perspective.

Since the interface, design, and game-play of this game is top notch, and incorporated 3D graphics into a native app, Joe and I thought that it would be the ideal project to put's framework to the test.

Gimbal Lock

A large part of our game is the rotation of cubes. To solve this, we had to conquer gimbal lock in

Wikipedia's definition of gimbal lock:

Gimbal lock is the loss of one degree of freedom in a three-dimensional, three-gimbal mechanism that occurs when the axes of two of the three gimbals are driven into a parallel configuration, "locking" the system into rotation in a degenerate two-dimensional space.

TLDR: If you have a cube, your y-axis points up, z-axis points at you, and x points to your right. Rotate that cube 90 degrees about the y-axis, and not your x-axis is your z-axis.

We came up with a pretty clever solution to this, and I'll have a post that in much more detail soon. In the meantime, feel free to check out the repo.

Intro Animation

What I found was that explaining the game became a pretty abstract discussion. Users had to see the game being played to really understand it. So, from caffeinated inspiration, I thought it would be a great UX if the game taught users how to play. About a day later, I created an intro animation that goes through a real level explains the concept and controls to the user.

Check It Out

The full app is live at and works in any browser on any device.