-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
103 lines (101 loc) · 5.43 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="author" content="Zo DiSanto">
<meta name="description" content="Op Art by Bridget Riley comes to life on mobile devices with Device Motion.">
<link rel="icon" type="image/x-icon" href="https://avatars.githubusercontent.com/u/70993217?s=400&u=c252d82e2c57cd011fcbf8a6a89729fcbc9d9026&v=4">
<title>Device Motion by Zo DiSanto</title>
</head>
<style>
body {
background-color: #F0EAD6; /* Off White color */
margin: 0; /* Fill the Screen */
color: black; /* Permission Granted/Denied should show up here */
}
@media (min-width: 900px) {
body {
margin: 20px;
}
}
</style>
<body>
<!-- Always ask permission to take control of one's mobile device :) -->
<button id="permissAquired" onclick="grantPermission()">Request permission</button>
<p id="permission"></p>
<canvas id="canvas"></canvas>
<script>
// Device Motion Code Ahead!
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
// ----------------------------------------------------
// Properly obtaining permission code - From:
// https://leemartin.dev/how-to-request-device-motion-and-orientation-permission-in-ios-13-74fc9d6cd140
function grantPermission() {
if (typeof DeviceMotionEvent !== 'undefined' && typeof DeviceMotionEvent.requestPermission === 'function') {
// iOS 13+
DeviceMotionEvent.requestPermission().then(response => {
if (response == 'granted') {
window.addEventListener('devicemotion', (e) => {
// do something with e
document.getElementById("permission").innerHTML = "Device Motion Event is supported on your device.";
console.log("Device Motion Event is supported on your device.");
})
}
}).catch(() => {
document.getElementById("permission").innerHTML = "Device Motion Event is NOT supported on your device. Try again on a mobile device.";
console.log("Device Motion Event is NOT supported on your device.");
});
} else {
// non iOS 13+ or desktop browser
document.getElementById("permission").innerHTML = "Device Motion Event is NOT supported on your device. Try again on a mobile device or iOS 13+.";
console.log("Device Motion Event is NOT supported on your device.");
}
// } <---- Want to find the other end of this? Go to line 88
// ----------------------------------------------------
window.addEventListener('devicemotion', function(event) {
var acceleration = event.accelerationIncludingGravity;
/* alpha = z-axis; beta = x-axis; gamma = y-axis; */
var acceleraRaw = "[" + Math.round(acceleration.x) + ", " + Math.round(acceleration.y) + ", " + Math.round(acceleration.z) + "]";
var faceUp = -1;
if (acceleration.z > 0) {
faceUp = +1;
}
var gamma = Math.round(((acceleration.x) / 9.81) * - 90); // Left Right Movement
var beta = Math.round(((acceleration.y + 9.81) / 9.81) * 90 * faceUp); // Up Down Movement
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
const circles = 35; // number of circles
const numLines = 20;
const lines = 40; // number of lines in each circle
var zDeg = 0; // Had to rename x, y & z ... :(
var xDeg = canvas.width / 2;
var yDeg = canvas.height / 2;
var length = 10; // length of lines
var width = 3; // width of lines
for (var n = 0; n <= circles; n++) { // repeat this for loop circles num of times (in this case: 35)
for (var i = 0; i <= lines; i++) { // repeat this for loop lines number of times (in this case: 40)
ctx.fillRect(xDeg + zDeg, yDeg + zDeg, length, width);
ctx.translate(xDeg, yDeg);
ctx.rotate(Math.PI / numLines); // rotating lines on their degree
ctx.translate(-xDeg, -yDeg);
ctx.fillRect(xDeg + zDeg, yDeg + zDeg, length, width);
yDeg = yDeg + 1;
if (i % 2 == 0) { // if line is an even number make it black
ctx.fillStyle = "black";
ctx.fill();
} else { // if line is an odd number make it off white
ctx.fillStyle = "#F0EAD6";
ctx.fill();
}
} // increase the varibles below by a specific number after each iteration of the for loops
length = length + beta;
width = width + 0.25;
zDeg = zDeg + gamma;
}
}, false);
} // <-- Here it is :)
</script>
</body>
</html>