Using Cardboard Camera and A-Frame to create a simple WebVR scene

I have been playing around with VR a bit lately after getting a new Android phone (Nexus 6P), and I thought I’d share a simple experiment I did using Google’s Cardboard Camera app, and the WebVR library A-Frame.

The result of this will be a simple WebVR scene that displays the photo captured from Cardboard Camera in a scene that you can look around.

1. Take a 360 photo

First off you will need to download and install the Cardboard Camera app, then take a photo using it.

Then choose ‘Open in gallery’ from the menu and share the image (I just emailed it to myself).

Save the photo to a new folder on your computer.

2. Create an HTML file

Next create an empty HTML file in the same folder as the image:

1
2
3
4
5
6
7
8
<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
</body>
</html>

3. Get the A-Frame library

Now visit the A-Frame website and download the library and save it the same folder as the HTML file, or use the hosted version. Then include it in the head of your HTML page using a script tag:

1
<script type="text/javascript" src="https://aframe.io/releases/latest/aframe.min.js"></script>

4. Create the WebVR scene

In the body of you HTML page you now need to construct the WebVR scene using the components provided by A-Frame. We need to make a scene to display it. We do that by adding an a-scene component and adding our objects inside.

1
2
3
4
<a-scene>
     <a-sky src="name_of_your_image.vr.jpg" segments-width="1000"></a-sky>
     <a-camera  cursor-visible="false"></a-camera>
</a-scene>

In the above example I have added an ‘a-sky’ component and an ‘a-camera’ component. Thy sky component renders a large sphere around the scene as a background, and it is using the image that we captured with Cardboard Camera. The camera component adds a new camera object at the centre of the scene (0, 0, 0).

5. Result

So the final HTML file should look this this:

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript" src="https://aframe.io/releases/latest/aframe.min.js"></script>
</head>
<body>
    <a-scene>
        <a-sky src="name_of_your_image.vr.jpg" segments-width="1000"></a-sky>
        <a-camera  cursor-visible="false"></a-camera>
    </a-scene>
</body>
</html>

Now if you preview in your browser (Chrome) you should get a scene that you can spin around in using your mouse. If you view the page on a WebVR compatible mobile device your will be able to enter VR mode and put the device into a VR headset such as Google Cardboard.

Chrome:
vr1

Or on Android:

Screenshot_20160205-125631

You may need to add some extra pixels to the top and bottom of the image to prevent any distortion as the image is stretched around the sphere.

Paint stencilling with HTML5 canvas

I have recently been playing around with re-writing my Spray paint stencils in Flash using JavaScript and HTML5’s canvas element. One thing I discovered is that since SVGs are natively supported in browsers I can have stencils scaled to any size and remain crisp, unlike the Flash version which used transparent PNGs.

I have implemented stencils, including having a muck layer, and stickers – graphics that you can place and cut out through stencils. When I first started playing around I was writing it all plain JavaScript, but eventually I converted everything over to TypeScript which allowed me to easily separate everything out into their own classes with event listening/dispatching capabilities. Almost mimicking the way things were written in AS3.

Below is a video of the early prototype, I will provide a live demo when it is more ready for public use.

Inspiring Inspiration #16

A collection of cool video, motion graphics and interface design.

READ MORE

Automatic typography substitution

After reading the series of Death to Typewriters articles on Meduim, I decided to have a go at implementing their automatic character substition rules in JavaScript. Following the guide provided at Death to Typewriters: Automatic replacement and clean-up, I created a simple function that can be called as you type, or when text is pasted, into a text area. Certain character combinations and locations are looked for and replaced with other characters such as correct quotes, arrows and ellipsis. I have put the code up on GitHub with a little bit of documentation.

READ MORE

New website for Nemen Visual

I have just launched a new website for Nemen Visual. The new site is a big departure from the old site which I created over 3 years ago. I took the redesign as an opportunity to explore some new techniques and modernise it a bit.

No more WordPress

The first major change is that is no longer built on WordPress. This time around I decided to go back to static HTML pages. One reason I used WordPress (or just using PHP in general) is the ability to separate the page elements such head headers and footers into separate files and re-use them. Now with all the advancements on the front end tooling world such as Node and Grunt – it is quite easy to set up a system that can generate static pages by compiling seperate HTML files. This gives me full control over how each page is displayed but with the flexiblilty of separating out reusable components such as navigation, headers and footers – which are then compiled into static pages.

Less

All the css is written in Less and compiled to CSS using Grunt. This allowed me to do page theming using variables.

Grunt

I am using Grunt to compile the pages into static HTML files, as well as create theme CSS files from the Less files. Using Grunt Include I can put the markup for repeated elements such as the navigation or footer, into a separate files and then compile them into static pages.

SVG

SVG is used for the logo, and some other small design elements on the page so they appear crisp on all devices.

Responsive

The website is now responsive – allowing you to view it on any device from a desktop to a phone. I wanted to learn how to use the new ‘picture’ element so I have used this on some of the folio pages to ‘art direct’ some of the images on different screen sizes.

Hexagonal grid

I wanted to try creating a hexagonally packed grid, and so I used this on the home page to display folio items. A hexagonally packed grid differs from a regular square grid in that instead of stacking like blocks, items are stacked like hexagons:

packing

 

There are probably some other things that I have forgotten so that is all for now…

Check out the new site

Recreating the Apple Watch UI using a hexagonal grid

Building on the hexagonal grid from earlier, I have added a little JavaScript and have created an effect similar to the Apple Watch home screen UI.

Below is a video of it in action, I am using IE11 (metro version) on a Surface Pro 2 which I found to be the most performant for this effect. Chrome was janky as hell, and Safari on the iPad doesn’t like to do things while scrolling.

And an embedded demo, it works best on a touch screen although not an iPad:

The code can be found at this CodePen.

Triggering a ‘finish’ event on an external video with Storyline HTML5

If you have at some point needed to use Articulate Storyline – you have probably come to a point where you want to murder everyone around you (not literally of course!) due to its ridiculous, quirky limitations. More often than not I find myself hacking the published code to make things works how I want.

One of the big limitations in Storyline is video – if you want to trigger something when the video starts or finished you must use the built in player. But the built in player cannot load videos from an external site (such as a streaming server – a common requirement) so you are left with using the ‘video embed code’ option, which doesn’t seem to allow custom embed codes – all I could get to work was YouTube and Vimeo. And even if you can get this to work you can’t add triggers to it for when the video ends.

I found a little hack which uses the Web Object and a custom video player in a HTML page. You can listen for the video complete event in the custom player then change a variable in the Storyline player. Then in Storyline add a trigger for when that particular variable changes, which will be when the video finishes.

Here’s how to do it.
READ MORE

CSS Diamond grid

Following on from the last post I decided to play a bit more with the hexagonal grid and created a diamond grid. It works similar to the last grid except it uses squares rotated 45 degrees, so it is basically a regular grid tipped on its side with even-odd number alternating rows.

Here is a live demo of the grid:

READ MORE

CSS Hexagonal packed grid

Most grids are square packed – that is each cell is stacked like a block which is great, but if you are after something slightly different maybe you should try a hexagonally packed grid. I will show you how to create a hexagonally packed grid using only CSS. But first, here is the difference between a square and a hexagonal packed grid:

packing

View demo

 

READ MORE

Inspiring Inspiration #15

A collection of cool video, motion graphics and interface design.

READ MORE