-
Notifications
You must be signed in to change notification settings - Fork 1
/
dev_motion.html
59 lines (51 loc) · 1.57 KB
/
dev_motion.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
<!DOCTYPE html>
<html>
<head>
<title>Device Motion using p5.js</title>
</head>
<body>
</body>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/p5.js"></script>
<script>
var x, y, z;
var xpos, ypos;
// Function to set up the canvas
function setup() {
// Set canvas size
createCanvas(400, 400);
// Default values
xpos = 200;
ypos = 200;
x = 0;
y = 0;
}
function draw() {
// set background color to white
background(255);
// Add/subract xpos and ypos
xpos = xpos + x;
ypos = ypos - y;
// Wrap ellipse if over bounds
if(xpos > 400) { xpos = 0; }
if(xpos < 0) { xpos = 400; }
if(ypos > 400) { ypos = 0; }
if(ypos < 0) { ypos = 400; }
// Draw ellipse
fill(255, 0, 0);
ellipse(xpos, ypos, 50, 50);
// Display variables
fill(0);
noStroke();
text("x: " + x, 25, 25);
text("y: " + y, 25, 50);
text("z: " + z, 25, 75);
}
// Accelerometer Data
window.addEventListener('devicemotion', function(e) {
// Get accelerometer values
x = parseInt(e.accelerationIncludingGravity.x);
y = parseInt(e.accelerationIncludingGravity.y);
z = parseInt(e.accelerationIncludingGravity.z);
});
</script>
</html>