Floored

Here at Floored we spend a lot of time sitting in front of computers pressing buttons. It’s fun, rewarding and sometimes it produces some pretty cool stuff. Every once in a while though we take a break and go out into the world to drink beer and press other people’s buttons.

Last month the whole company took a trip to the Brooklyn Brewery. We drank some beer, took a tour of the production line, drank some more beer, ate delicious food from Dinosaur BBQ and washed that down with a bit more beer. Good clean fun was had by all.

Fun fact we learned on the tour: This will come as no surprise to Floored blog readers who also follow the Swedish brewing industry, but apparently Brooklyn Brewery is the number one beer brand in Sweden! Tell your friends.

At Floored, not a day goes by when you won’t find us lobbying our customers’ IT teams to upgrade their firms to a modern web browser. Most use years-old versions of Microsoft’s Internet Explorer browser, a notoriously bad software citizen, and a hefty thorn in the side of Floored’s developers. That’s because unlike Explorer, modern browsers, such as Google Chrome or Mozilla Firefox natively support WebGL. As the powerful new standard in web-based 3D graphics, WebGL is the language that Floored uses to deliver 3D content to your browser without the need for a plug-in.

This week, however, our case to our customers was made even stronger: US & UK Governments have advised businesses not to use Internet Explorer due to newly discovered security flaws that leave its users vulnerable to attacks by hackers. This is the latest in a decade-long series of Explorer-specific missteps, security holes, and other headaches.

If your organization uses Internet Explorer (and/or Windows XP or Windows 7), please encourage your IT team to move as quickly as possible to migrate your company to a more modern infrastructure. After all, not only will it unlock the capability for you to use 3D content in the future much more easily, but it will make your computer safer as well. We give Google Chrome our highest recommendation for its security, 3D aptitude, and its ability to silently update itself, sparing you from ever having to worry about problems like this again.

Feel free to email along this post to your IT lead, or link them to the article directly.

Node-oculus is a simple node.js add-on that we are open-sourcing for interfacing with the Oculus Rift.

While there are a number of open source projects that deal with transmitting sensor data into environments such as a web browser, we didn’t find anything sufficiently bare-bones to use as a building block for future VR work.

For a user of node-oculus, we have exposed a tiny api. You can start reading sensor data in four lines of javascript.

For developers, a concise c++ class creates the necessary bindings between node and the Oculus SDK. This allows for easy extensibility by avoiding the “gas factory” problem associated with a deep class structure.

While this is a tiny module, we hope users will find this a useful tool in getting started with VR.

Code is on Github here: http://github.com/floored/node-oculus

Stay tuned: this is but our first foray into contributing code, research and 3D scan data to the broader VR community.

You’ve probably noticed that things are a little different around here. For the past month, I’ve been rebuilding our website from scratch, and you’re looking at the result.

When planning the site, we knew we wanted things to feel very fluid and considered (or, as the business team put it, “luxe”). To me, this meant a lot of subtle animation. We have a complicated story to tell, and moving images can be eloquent in expressing complex ideas. One thing I wanted to avoid, however, was hijacking the browser’s scrolling to create discrete vertical sections (see Camron for an example). This technique makes animation far more predictable and easier to develop, but it takes control away from the user by introducing unexpected behavior. I’m much more impressed with sites that smoothly animate regardless of scroll position, preserving the browser’s native controls.

For inspiration, I turned to Hover States, a blog that posts interesting interactions from around the web. I knew the threads I wanted to pull together: Heydays for its precision (and gorgeous work), Oyyo for its use of white space and strong images (not to mention the surprise that our brand is indebted to the visual style of dhurries), Drexler for its unusual layout, Hello Monday for its use of animation, and Acko, for those unbelievable 3D effects. Acko deserves special mention: when I first saw this page, it was one of those moments that made me reconsider what a website could be. I realized that 3D content would eventually be commonplace. Could Floored.com have the same effect?

Developing the 3D grid of triangles was a fun, challenging exercise. It began with this proof-of-concept codepen, in which all drawing and animation is handled by CSS.

Expanding on this idea, I thought it would be fun to see our signature pattern animate itself. I started implementing the triangular grid using CSS. This quickly proved rather unwieldy & inexact, so I moved on to real vector drawing with Raphael.js. It definitely gave me more precision, but when it came to animation, I still couldn’t get a smooth framerate. It seemed like I was running out of options: how could I get several hundred triangles to draw and animate at more than 30 frames per second?

If the answer seems incredibly obvious to you, then you’ll understand why I felt a little dumb for not having seen it earlier. Drawing hundreds of triangles, tens of times per second? That’s exactly what a 3D graphics engine does. Moreover, we are the 3D company; why not have something 3D right on our front page? Soon enough, I had rebuilt my grid in Three.js. (And when Luma launches, I’ll rebuild it again using our own technology.)

Now that I was all set up, I had to settle on an animation. I tried many different styles; here’s one alternate in which the grid folds up.

All of the animations on our website are controlled by the excellent GreenSock Animation Platform. GSAP is one of the best JavaScript frameworks I’ve ever come across, and the fine folks over at GreenSock deserve a shoutout for making this project so, so much easier.

That’s it for now. I hope you like the new site as much as we do. Got questions or comments? Did you find something broken? Get in touch at jake@floored.com.

We’re thrilled to have been featured by Intel and Wired in their series on digital innovators. Watch the video below.