augmented reality with javascript and appcelerator titanium

Augmented Reality with JavaScript (using

Appcelerator Titanium)

Jeff Bonnes, December 2012

@jeffbonnes / @titaniumdev

Thursday, 13 December 12

Agenda

What is Augmented Reality?

Appcelerator Titanium

History of Augmented Reality in Titanium

JavaScript AR Framework in Titanium [Demo]

On device testing made easy (TiShadow)

Thursday, 13 December 12

What is Augmented Reality?

Thursday, 13 December 12

Image Recognition vs Geolocation

Thursday, 13 December 12

Demo

Thursday, 13 December 12

Maps are everywhere...

Thursday, 13 December 12

Appcelerator TitaniumBridge from JavaScript objects into native mobile API

Cross Platform

WebKit KJS JavaScript engine on iOS

V8 on Android

BB10 and Windows Phone expected 2013

Thursday, 13 December 12

How Titanium works

JS Engine ‘Native’

Thursday, 13 December 12

How Titanium works

JS Engine ‘Native’var view = Ti.UI.createView({ backgroundColor:‘white’});

Thursday, 13 December 12

How Titanium works

JS Engine ‘Native’var view = Ti.UI.createView({ backgroundColor:‘white’});

view.top = ‘20dp’;

Thursday, 13 December 12

How Titanium works

JS Engine ‘Native’var view = Ti.UI.createView({ backgroundColor:‘white’});

Ti.Geolcation.addEventListener(‘location’, function(e){ // e has native stuff that I can use});

view.top = ‘20dp’;

Thursday, 13 December 12

Power of JavaScriptAdding properties and functions to objects (native proxies)

Parasitic inheritance

Custom objects

Dynamic function signatures

CommonJS

JSON object creation

Execution at run-time

Thursday, 13 December 12

A Map in Titanium

Thursday, 13 December 12

Titanium Augmented Reality

Thursday, 13 December 12

Titanium Augmented Reality

Thursday, 13 December 12

Geolocation

My Location (GPS)

Point of Interest (Poi) location (lat, long)

Bearing / Heading (Compass)

Math

Thursday, 13 December 12

CalculationsBearing / Heading

Distance

Thursday, 13 December 12

How many calculations?

Thursday, 13 December 12

How many calculations?

Thursday, 13 December 12

How many calculations?

Thursday, 13 December 12

How many calculations?

Thursday, 13 December 12

How many calculations?

Thursday, 13 December 12

How many calculations?

Thursday, 13 December 12

How many calculations?

Thursday, 13 December 12

Demo

Thursday, 13 December 12

Radar

Thursday, 13 December 12

Making it modular

Thursday, 13 December 12

On device testing is slow....

Use TiShadow!

Thursday, 13 December 12

Thank You!

jeffb@gameshape.com

http://www.titaniumdevelopment.com.au

@titaniumdev

https://github.com/jeffbonnes/parmavision

http://www.appcelerator.com/

https://github.com/dbankier/TiShadow

http://www.packtpub.com/augmented-reality-using-appcelerator-titanium-starter/book

Thursday, 13 December 12