<!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>
Log in or sign up for Devpost to join the conversation.