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.
BergsByBauer
Augmented Reality with a cheap headset and a phone
Updates
<!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></style> </code></pre> <p></head> <body> <div id="pointer1" class="pointer"> </div> <!-- <div id="pointer2" class="pointer"> </div> <div id="pointer3" class="pointer"> </div></p> <pre class="language--->"><code> <script> var apps = []; var betastart = 0; var gammastart = 0; var apppos = 0; var newpos = 0; var x = 1; $(document).ready(function(){ makeMovable($("#pointer1"), 30, 30); // makeMovable($("#pointer2"), -50, 50); // makeMovable($("#pointer3"), 30, 50); window.setInterval(function() { var deviceID = "54ff6d066678574910310667"; var accessToken = "ef9fd156f3cfc2cabaeb6943d719fd7c4c4f203e"; var varName = "temperature"; requestURL = "https://api.spark.io/v1/devices/" + deviceID + "/" + varName + "/?access_token=" + accessToken; $.getJSON(requestURL, function(json) { var retrieved = parseInt(json.result); if(retrieved >= 0){ //console.log(retrieved); if(retrieved == 0){ $("#pointer1").css("background", "red"); } else { $("#pointer1").css("background", "white"); } } }); }, 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 < 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("top", (height+(1*beta)*50)); thisoneapps.css("left", (height+(-1*gamma)*50)); var apppos = thisoneapps.offset(); var xcord = Math.abs(apppos.left-width); var ycord = Math.abs(apppos.top-height); } // $("body").css("-ms-transform", "rotate("+alpha+"deg)"); // $("body").css("-webkit-transform", "rotate("+alpha+"deg)"); // $("body").css("transform", "rotate("+(alpha)+"deg)"); function makeMovable(element, offsetb, offsetg){ var width = ($(window).width())/2; var height = ($(window).height())/2; element.css("top", height-(element.height()/2)); element.css("left", width-(element.width()/2)); apps.push({element: element, offb: offsetb, offg: offsetg }); } function translateitb(variableSent){ variableSent += betastart; if(variableSent > 180){ variableSent -= 360; } return variableSent; } function translateitg(variableSent){ variableSent += gammastart; if(variableSent > 70){ variableSent -= 180; } return variableSent; } if (window.DeviceOrientationEvent) { window.addEventListener("deviceorientation", deviceOrientationListener); } else { alert("Sorry, your browser doesn't support Device Orientation"); } }); </script> </body> </html> </code></pre>
Leave feedback in the comments!
Log in or sign up for Devpost to join the conversation.
Hi
Log in or sign up for Devpost to join the conversation.
Log in or sign up for Devpost to join the conversation.