-
Notifications
You must be signed in to change notification settings - Fork 8
/
D-example-p5-1.html
102 lines (91 loc) · 2.6 KB
/
D-example-p5-1.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
<html>
<head>
<!-- import css-->
<link rel="stylesheet" type="text/css" href="./stylesheet.css">
<!-- import jquery-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<!-- import tramontana-->
<script src="../lib/tramontana_min.js"></script>
<!-- import processing-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.4/p5.min.js" type="text/javascript"></script>
<!-- create a global variable-->
<script>
var device=new tramontana();
var lerpValue=0;
var didStart =false;
var rotationAngle = {};
var isIncreasing =false;
var drawRect=function( x, y, r, sub)
{
stroke(123);
push();
translate((width-r)/2,(height-r)/2);
rotate(map(rotationAngle.r,-1,1,0,1));
scale(map(r,0,width,0,1));
rect(0,0,r,r);
pop();
if(r>0)
{
drawRect(x,y,r-sub,sub);
}
}
function setup(){
createCanvas(600, 600);
var aTmp=$("canvas");
$(document).remove($("canvas"));
$("#startPanel").before(aTmp);
$("canvas").css({'position':'absolute','left': '50%','margin-left':'-300px','top':'50%','margin-top':' -300px', 'width':'600px','height':'600px'});
}
function draw(){
background(0);
fill(0);
stroke(255);
if(didStart)
{
if(isIncreasing)
{
lerpValue++;
if(lerpValue>width*2)
{isIncreasing=true;
}
}
else
{
lerpValue--;
if(lerpValue<10)
{isIncreasing=true;
}
}
drawRect(width/2,height/2,lerpValue,15);
}
}
//FUNCTION TRIGGERED WHEN USER PRESSED START BUTTON
function clicked()
{
device.start($('#ipInput').val(),function(e){
$('#startPanel').hide();
didStart=true;
device.subscribeAttitude(10, function(ip,e){
rotationAngle=e;
});
});
}
</script>
</head>
<body>
<!--Link to tramontana the app!-->
<div>To get started download the Tramontana App on your iOS device from <a href="https://itunes.apple.com/us/app/tramontana/id1121069555?mt=8">here</a>.</div>
<div>
</br>
Insert the IP address of your device and press start to begin.
</br> </br>
Turn your phone to see the pyramid rotate.
</div>
<div style="position:absolute;left: 50%;margin-left:-300px;top:50%;margin-top: -300px; width:600px;height:600px;padding: 30px;background-color: #000" id="startPanel">
<!-- OPEN SOCKET -->
<label>IPAddress:</label>
<input type="text" id="ipInput" placeholder="192.168.1.1">
<button onclick="clicked()">start</button><br/>
</div>
</body>
</html>