I've always enjoyed activities such as lasertag and videogames, now I've created a way to merge both at a budget. It uses a headset to take images from a phone and put it on a transparent screen. We also developed an API for future augmented reality simulated environments and objects. We also added voice control and aiming by looking in different directions using the phone's accelerometer.

Built With

Share this project:
×

Updates

posted an update

<!DOCTYPE html> body{ width: 100%; height:100%; background: black; overflow: hidden; } .pointer{ width:300px; height:300px; position:absolute; top:0; left:0; border-radius: 50px; } #pointer1{ background:red; } #pointer2{ background:green; } #pointer3{ background:blue; } #cursor{ position: absolute; width:100px; height:100px; }</p> <pre class="language-nolang"><code>&lt;/style&gt; </code></pre> <p></head> <body> <div id="pointer1" class="pointer"> </div> &lt;!-- <div id="pointer2" class="pointer"> </div> <div id="pointer3" class="pointer"> </div></p> <pre class="language--->"><code> &lt;script&gt; var apps = []; var betastart = 0; var gammastart = 0; var apppos = 0; var newpos = 0; var x = 1; $(document).ready(function(){ makeMovable($(&quot;#pointer1&quot;), 30, 30); // makeMovable($(&quot;#pointer2&quot;), -50, 50); // makeMovable($(&quot;#pointer3&quot;), 30, 50); window.setInterval(function() { var deviceID = &quot;54ff6d066678574910310667&quot;; var accessToken = &quot;ef9fd156f3cfc2cabaeb6943d719fd7c4c4f203e&quot;; var varName = &quot;temperature&quot;; requestURL = &quot;https://api.spark.io/v1/devices/&quot; + deviceID + &quot;/&quot; + varName + &quot;/?access_token=&quot; + accessToken; $.getJSON(requestURL, function(json) { var retrieved = parseInt(json.result); if(retrieved &gt;= 0){ //console.log(retrieved); if(retrieved == 0){ $(&quot;#pointer1&quot;).css(&quot;background&quot;, &quot;red&quot;); } else { $(&quot;#pointer1&quot;).css(&quot;background&quot;, &quot;white&quot;); } } }); }, 10); function deviceOrientationListener(event) { var width = ($(window).width())/2; var height = ($(window).height())/2; //console.log(event.alpha*Math.PI/180); //console.log(event.beta); //-180 positive 180 //console.log(event.gamma); //-90 to 90 var beta = 60; var gamma = 0; var alpha = 160-event.beta; for(var xit = 0;xit &lt; apps.length; xit++){ var thisoneapps = apps[xit].element; var beta = translateitb(apps[xit].offb+event.alpha); var gamma = translateitg(apps[xit].offg+event.gamma); console.log(beta); thisoneapps.css(&quot;top&quot;, (height+(1*beta)*50)); thisoneapps.css(&quot;left&quot;, (height+(-1*gamma)*50)); var apppos = thisoneapps.offset(); var xcord = Math.abs(apppos.left-width); var ycord = Math.abs(apppos.top-height); } // $(&quot;body&quot;).css(&quot;-ms-transform&quot;, &quot;rotate(&quot;+alpha+&quot;deg)&quot;); // $(&quot;body&quot;).css(&quot;-webkit-transform&quot;, &quot;rotate(&quot;+alpha+&quot;deg)&quot;); // $(&quot;body&quot;).css(&quot;transform&quot;, &quot;rotate(&quot;+(alpha)+&quot;deg)&quot;); function makeMovable(element, offsetb, offsetg){ var width = ($(window).width())/2; var height = ($(window).height())/2; element.css(&quot;top&quot;, height-(element.height()/2)); element.css(&quot;left&quot;, width-(element.width()/2)); apps.push({element: element, offb: offsetb, offg: offsetg }); } function translateitb(variableSent){ variableSent += betastart; if(variableSent &gt; 180){ variableSent -= 360; } return variableSent; } function translateitg(variableSent){ variableSent += gammastart; if(variableSent &gt; 70){ variableSent -= 180; } return variableSent; } if (window.DeviceOrientationEvent) { window.addEventListener(&quot;deviceorientation&quot;, deviceOrientationListener); } else { alert(&quot;Sorry, your browser doesn&#39;t support Device Orientation&quot;); } }); &lt;/script&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>

Log in or sign up for Devpost to join the conversation.