Menu

Web

Cell Industries

http://cell-industries.co.uk/

Client: University Project

Brief:

Cell Industries is my Final Year Project with Jacob Hammond and Joseph Williams.

Our goals: Our initial goals were to integrate and unite new web technologies, to use 3D and modern design techniques to enhance the visuals of the website and to experiment with new ways of interacting with the web. We used the facade of Cell Industries to allow us to use all these technologies and techniques for a single purpose.

The concept: Cell Industries presents Project Titan: Preserving The Planet. We allow everyday users to choose which parts of the planet they want to preserve; we will clone and preserve the chosen environments, ready to be restored in the event of undesirable occurrences. Similar to the concept of Crowd Funding, the more people who participate, the more of the planet will be preserved.

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

3D models in-browser: By using ThreeJS, we can display a 3D representation of the data we collected about a particular environment during the cloning process. We also use WolframAlpha's API to pull in relevant data about the environment and its surrounding areas.

Webcam gestures: As a fun extra, we also added in the ability to take control of and rotate the environment using only gestures in front of the webcam. Waving your hand (or any part of your body) in front of the webcam will allow you to rotate the environment left, right, up and down. Although this is only a very primitive use of the webcam, it is an example of how webcam gestures can be used in the web. It opens up many possibilities of non-peripheral interaction with the browser, especially in the accessibility and games industries.

Technologies used:

  • WebGL
  • ThreeJS
  • WebRTC webcam gestures
  • Google Elevation API
  • Google Static Maps API
  • PHP MVC
  • Login system
  • Checkbox hack
  • Feature detection
  • Font icons
  • Mobile first
  • Responsive
  • Sass
Cell Industries