2014 – Undergraduate Final Year Project

Cell Industries

VISIT WEBSITE

About the Project

Cell Industries was my undergraduate final year project with Jacob Hammond and Joseph Williams.

The goal was to develop a fictional experience which would allow us to integrate and unite several new web technologies, to use 3D and modern UI and UX techniques and best practices, and to experiment with new ways of interacting with the web.

The fictional experience is that of a futuristic concept of preserving the planet by scanning and cloning sections of the environment. Similar to the concept of crowd funding, the more people who participate, the more of the planet will be preserved.

The key feature, and the most technically challenging, was the cloning process. By combining Google Elevation API, Google Static Maps API and ThreeJS, we were able to programatically generate and display 3D topographical representations of real-world areas. Read more about the step-by-step process here.

We used ThreeJS to display interactive 3D visuals and implemented many best practices including feature detection, progressive enhancement and RWD to ensure an optimal experience on most devices and browsers.

We also added in the ability to rotate the environment using only gestures in front of the webcam by waving your hand (or any part of your body). Although only a very primitive use of the technology, it is an example of how webcam gestures could be used to interact with the web, especially in the accessibility and gaming industries.

The home page. An early wireframe sketch of the home page. Sign in / Register page. An empty profile page. The user can choose any section of the world to clone. Zooming in reveals a grid from which the user can select a section and give it a name. A 3D topographical model of the selected section is generated programmatically and rendered using ThreeJS. The user can interact with the model using their mouse, touchscreen or waving gestures in front of a webcam. Local data about the environment and its surrounding area are pulled from WolframAlpha's API. Cloned environments are displayed on the user's profile page. Wireframe sketch of the profile page. User profiles are also public and can be viewed by any visitor to the site. Recently cloned environments by all users are displayed on this page. The distribution of cloned environments can be seen on the progress page. A full-page scrollable story explaining the fictional cloning process (part 1 of 5). A full-page scrollable story explaining the fictional cloning process (part 2 of 5). A full-page scrollable story explaining the fictional cloning process (part 3 of 5). A full-page scrollable story explaining the fictional cloning process (part 4 of 5). A full-page scrollable story explaining the fictional cloning process (part 5 of 5). The technology page with an interactive 3D model which progressively enhances from a static image. Wireframe sketch of the technology page. The about page. Wireframe sketch of the about page. The press page. Wireframe sketch of the press page.