1 function RotationSupport(accelerationCallback) { |
1 function RotationSupport(accelerationCallback) { |
2 this.controls = new RotationControls(accelerationCallback); |
2 this.controls = new RotationControls(accelerationCallback); |
3 } |
3 } |
4 |
4 |
5 function RotationControls(accelCallback) { |
5 function RotationControls(accelCallback) { |
6 var width = 50, height = 100, depth = 10; |
6 this.angleX = 180; |
7 var margin = 5, bottomMargin = 15; |
7 this.angleY = 180; |
8 var angleX = 180; |
8 this.angleZ = 180; |
9 var angleY = 180; |
9 var control = this; |
10 var angleZ = 180; |
10 this.accelerationCallback = accelCallback; |
11 var accelerationCallback = accelCallback; |
|
12 |
11 |
13 $("#sliderX").slider( { |
12 $("#sliderX").slider( { |
14 slide : updateAngleX, |
13 slide : updateAngleX, |
15 animate : true, |
14 animate : true, |
16 max : 360, |
15 max : 360, |
17 min : 0, |
16 min : 0, |
18 value : angleX |
17 value : this.angleX |
19 }); |
18 }); |
20 $("#sliderY").slider( { |
19 $("#sliderY").slider( { |
21 slide : updateAngleY, |
20 slide : updateAngleY, |
22 animate : true, |
21 animate : true, |
23 max : 360, |
22 max : 360, |
24 min : 0, |
23 min : 0, |
25 value : angleY |
24 value : this.angleY |
26 }); |
25 }); |
27 $("#sliderZ").slider( { |
26 $("#sliderZ").slider( { |
28 slide : updateAngleZ, |
27 slide : updateAngleZ, |
29 animate : true, |
28 animate : true, |
30 max : 360, |
29 max : 360, |
31 min : 0, |
30 min : 0, |
32 value : angleZ |
31 value : this.angleZ |
33 }); |
32 }); |
34 renderUI(); |
33 this.paint(); |
35 |
34 |
36 function translateFace(xy, xz, yz) { |
35 function updateAngleX(event, ui) { |
37 var px = width / 2; |
36 control.angleX = ui.value; |
38 var py = height / 2; |
37 control.paint(); |
39 var pz = depth/2; |
38 } |
40 var points = [ { |
39 |
41 x : px, |
40 function updateAngleY(event, ui) { |
42 y : py, |
41 control.angleY = ui.value; |
43 z : pz |
42 control.paint(); |
44 }, { |
43 } |
45 x : px, |
44 |
46 y : -py, |
45 function updateAngleZ(event, ui) { |
47 z : pz |
46 control.angleZ = ui.value; |
48 }, { |
47 control.paint(); |
49 x : -px, |
48 } |
50 y : -py, |
49 } |
51 z : pz |
50 |
52 }, { |
51 RotationControls.prototype.paint = function(ignoreListeners) { |
53 x : -px, |
52 var width = 50, height = 100, depth = 10; |
54 y : py, |
53 var margin = 5, bottomMargin = 15; |
55 z : pz |
54 |
56 } ]; |
55 var canvas = document.getElementById("phoneposition"); |
57 return rotate(points, xy, xz, yz); |
56 var ctx = canvas.getContext("2d"); |
58 } |
57 ctx.clearRect(0, 0, canvas.width, canvas.height); |
59 |
58 |
60 function translateScreen(xy, xz, yz) { |
59 var r = 62; |
61 var px = width / 2; |
60 |
62 var py = height / 2; |
61 var xy = (180 - this.angleX) * Math.PI / 180; |
63 var pz = depth/2; |
62 var yz = (this.angleY - 180) * Math.PI / 180; |
64 var points = [ { |
63 var xz = (180 - this.angleZ) * Math.PI / 180 + Math.PI / 2; |
65 x : px - margin, |
64 |
66 y : py - bottomMargin, |
65 var back = translateBack(xy, xz, yz); |
67 z : pz |
66 if ((back[0].z + back[2].z) / 2 < 0) { |
68 }, { |
67 paint(canvas, ctx, back); |
69 x : px - margin, |
68 } else { |
70 y : -py + bottomMargin, |
69 paint(canvas, ctx, translateFace(xy, xz, yz)); |
71 z : pz |
70 paintScreen(canvas, ctx, translateScreen(xy, xz, yz)); |
72 }, { |
71 } |
73 x : -px + margin, |
72 |
74 y : -py + margin, |
73 var dz = 0; |
75 z : pz |
74 if (back[0].z > back[3].z) { |
76 }, { |
75 var bottom = translateBottom(xy, xz, yz); |
77 x : -px + margin, |
76 paint(canvas, ctx, bottom); |
78 y : py - margin, |
77 dz = bottom[1].y - bottom[0].y; |
79 z : pz |
78 } else if (back[0].z != back[3].z) { |
80 } ]; |
79 var top = translateTop(xy, xz, yz); |
81 return rotate(points, xy, xz, yz); |
80 paint(canvas, ctx, top); |
82 } |
81 dz = top[1].y - top[0].y; |
83 |
82 } |
84 function translateBack(xy, xz, yz) { |
83 |
85 var px = width / 2; |
84 if (back[1].z > back[0].z) { |
86 var py = height / 2; |
85 paint(canvas, ctx, translateLeft(xy, xz, yz)); |
87 var pz = -depth/2; |
86 } else if (back[1].z != back[0].z) { |
88 var points = [ { |
87 paint(canvas, ctx, translateRight(xy, xz, yz)); |
89 x : px, |
88 } |
90 y : py, |
89 if (!ignoreListeners) { |
91 z : pz |
|
92 }, { |
|
93 x : px, |
|
94 y : -py, |
|
95 z : pz |
|
96 }, { |
|
97 x : -px, |
|
98 y : -py, |
|
99 z : pz |
|
100 }, { |
|
101 x : -px, |
|
102 y : py, |
|
103 z : pz |
|
104 } ]; |
|
105 return rotate(points, xy, xz, yz); |
|
106 } |
|
107 |
|
108 function translateTop(xy, xz, yz) { |
|
109 var px = width / 2; |
|
110 var py = height / 2; |
|
111 var pz = depth/2; |
|
112 var points = [ { |
|
113 x : px, |
|
114 y : -py, |
|
115 z : pz |
|
116 }, { |
|
117 x : px, |
|
118 y : -py, |
|
119 z : -pz |
|
120 }, { |
|
121 x : px, |
|
122 y : py, |
|
123 z : -pz |
|
124 }, { |
|
125 x : px, |
|
126 y : py, |
|
127 z : pz |
|
128 } ]; |
|
129 return rotate(points, xy, xz, yz); |
|
130 } |
|
131 |
|
132 function translateBottom(xy, xz, yz) { |
|
133 var px = -width / 2; |
|
134 var py = height / 2; |
|
135 var pz = depth/2; |
|
136 var points = [ { |
|
137 x : px, |
|
138 y : -py, |
|
139 z : pz |
|
140 }, { |
|
141 x : px, |
|
142 y : -py, |
|
143 z : -pz |
|
144 }, { |
|
145 x : px, |
|
146 y : py, |
|
147 z : -pz |
|
148 }, { |
|
149 x : px, |
|
150 y : py, |
|
151 z : pz |
|
152 } ]; |
|
153 return rotate(points, xy, xz, yz); |
|
154 } |
|
155 |
|
156 function translateLeft(xy, xz, yz) { |
|
157 var px = width / 2; |
|
158 var py = height / 2; |
|
159 var pz = depth/2; |
|
160 var points = [ { |
|
161 x : px, |
|
162 y : py, |
|
163 z : pz |
|
164 }, { |
|
165 x : px, |
|
166 y : py, |
|
167 z : -pz |
|
168 }, { |
|
169 x : -px, |
|
170 y : py, |
|
171 z : -pz |
|
172 }, { |
|
173 x : -px, |
|
174 y : py, |
|
175 z : pz |
|
176 } ]; |
|
177 return rotate(points, xy, xz, yz); |
|
178 } |
|
179 |
|
180 function translateRight(xy, xz, yz) { |
|
181 var px = width / 2; |
|
182 var py = -height / 2; |
|
183 var pz = depth/2; |
|
184 var points = [ { |
|
185 x : px, |
|
186 y : py, |
|
187 z : pz |
|
188 }, { |
|
189 x : px, |
|
190 y : py, |
|
191 z : -pz |
|
192 }, { |
|
193 x : -px, |
|
194 y : py, |
|
195 z : -pz |
|
196 }, { |
|
197 x : -px, |
|
198 y : py, |
|
199 z : pz |
|
200 } ]; |
|
201 return rotate(points, xy, xz, yz); |
|
202 } |
|
203 |
|
204 |
|
205 function renderUI() { |
|
206 var canvas = document.getElementById("phoneposition"); |
|
207 var ctx = canvas.getContext("2d"); |
|
208 ctx.clearRect(0, 0, canvas.width, canvas.height); |
|
209 |
|
210 var r = 62; |
|
211 |
|
212 var xy = (180 - angleX) * Math.PI / 180; |
|
213 var yz = (angleY - 180) * Math.PI / 180; |
|
214 var xz = (180 - angleZ) * Math.PI / 180 + Math.PI / 2; |
|
215 |
|
216 var back = translateBack(xy, xz, yz); |
|
217 if ((back[0].z + back[2].z)/2 < 0) { |
|
218 paint(canvas, ctx, back); |
|
219 } else { |
|
220 paint(canvas, ctx, translateFace(xy, xz, yz)); |
|
221 paintScreen(canvas, ctx, translateScreen(xy, xz, yz)); |
|
222 } |
|
223 |
|
224 var dz = 0; |
|
225 if (back[0].z > back[3].z) { |
|
226 var bottom = translateBottom(xy, xz, yz); |
|
227 paint(canvas, ctx, bottom); |
|
228 dz = bottom[1].y - bottom[0].y; |
|
229 } else if (back[0].z != back[3].z) { |
|
230 var top = translateTop(xy, xz, yz); |
|
231 paint(canvas, ctx, top); |
|
232 dz = top[1].y - top[0].y; |
|
233 } |
|
234 |
|
235 if (back[1].z > back[0].z) { |
|
236 paint(canvas, ctx, translateLeft(xy, xz, yz)); |
|
237 } else if (back[1].z != back[0].z) { |
|
238 paint(canvas, ctx, translateRight(xy, xz, yz)); |
|
239 } |
|
240 var accelX = (back[1].y - back[0].y) / width; |
90 var accelX = (back[1].y - back[0].y) / width; |
241 var accelY = (back[0].y - back[3].y) / height; |
91 var accelY = (back[0].y - back[3].y) / height; |
242 var accelZ = dz / depth; |
92 var accelZ = dz / depth; |
243 |
93 notifyAcceleration(accelX, accelY, accelZ); |
244 notifyAcceleration(accelX, accelY, accelZ); |
94 } |
|
95 function translateFace(xy, xz, yz) { |
|
96 var px = width / 2; |
|
97 var py = height / 2; |
|
98 var pz = depth / 2; |
|
99 var points = [ { |
|
100 x : px, |
|
101 y : py, |
|
102 z : pz |
|
103 }, { |
|
104 x : px, |
|
105 y : -py, |
|
106 z : pz |
|
107 }, { |
|
108 x : -px, |
|
109 y : -py, |
|
110 z : pz |
|
111 }, { |
|
112 x : -px, |
|
113 y : py, |
|
114 z : pz |
|
115 } ]; |
|
116 return rotate(points, xy, xz, yz); |
|
117 } |
|
118 |
|
119 function translateScreen(xy, xz, yz) { |
|
120 var px = width / 2; |
|
121 var py = height / 2; |
|
122 var pz = depth / 2; |
|
123 var points = [ { |
|
124 x : px - margin, |
|
125 y : py - bottomMargin, |
|
126 z : pz |
|
127 }, { |
|
128 x : px - margin, |
|
129 y : -py + bottomMargin, |
|
130 z : pz |
|
131 }, { |
|
132 x : -px + margin, |
|
133 y : -py + margin, |
|
134 z : pz |
|
135 }, { |
|
136 x : -px + margin, |
|
137 y : py - margin, |
|
138 z : pz |
|
139 } ]; |
|
140 return rotate(points, xy, xz, yz); |
|
141 } |
|
142 |
|
143 function translateBack(xy, xz, yz) { |
|
144 var px = width / 2; |
|
145 var py = height / 2; |
|
146 var pz = -depth / 2; |
|
147 var points = [ { |
|
148 x : px, |
|
149 y : py, |
|
150 z : pz |
|
151 }, { |
|
152 x : px, |
|
153 y : -py, |
|
154 z : pz |
|
155 }, { |
|
156 x : -px, |
|
157 y : -py, |
|
158 z : pz |
|
159 }, { |
|
160 x : -px, |
|
161 y : py, |
|
162 z : pz |
|
163 } ]; |
|
164 return rotate(points, xy, xz, yz); |
|
165 } |
|
166 |
|
167 function translateTop(xy, xz, yz) { |
|
168 var px = width / 2; |
|
169 var py = height / 2; |
|
170 var pz = depth / 2; |
|
171 var points = [ { |
|
172 x : px, |
|
173 y : -py, |
|
174 z : pz |
|
175 }, { |
|
176 x : px, |
|
177 y : -py, |
|
178 z : -pz |
|
179 }, { |
|
180 x : px, |
|
181 y : py, |
|
182 z : -pz |
|
183 }, { |
|
184 x : px, |
|
185 y : py, |
|
186 z : pz |
|
187 } ]; |
|
188 return rotate(points, xy, xz, yz); |
|
189 } |
|
190 |
|
191 function translateBottom(xy, xz, yz) { |
|
192 var px = -width / 2; |
|
193 var py = height / 2; |
|
194 var pz = depth / 2; |
|
195 var points = [ { |
|
196 x : px, |
|
197 y : -py, |
|
198 z : pz |
|
199 }, { |
|
200 x : px, |
|
201 y : -py, |
|
202 z : -pz |
|
203 }, { |
|
204 x : px, |
|
205 y : py, |
|
206 z : -pz |
|
207 }, { |
|
208 x : px, |
|
209 y : py, |
|
210 z : pz |
|
211 } ]; |
|
212 return rotate(points, xy, xz, yz); |
|
213 } |
|
214 |
|
215 function translateLeft(xy, xz, yz) { |
|
216 var px = width / 2; |
|
217 var py = height / 2; |
|
218 var pz = depth / 2; |
|
219 var points = [ { |
|
220 x : px, |
|
221 y : py, |
|
222 z : pz |
|
223 }, { |
|
224 x : px, |
|
225 y : py, |
|
226 z : -pz |
|
227 }, { |
|
228 x : -px, |
|
229 y : py, |
|
230 z : -pz |
|
231 }, { |
|
232 x : -px, |
|
233 y : py, |
|
234 z : pz |
|
235 } ]; |
|
236 return rotate(points, xy, xz, yz); |
|
237 } |
|
238 |
|
239 function translateRight(xy, xz, yz) { |
|
240 var px = width / 2; |
|
241 var py = -height / 2; |
|
242 var pz = depth / 2; |
|
243 var points = [ { |
|
244 x : px, |
|
245 y : py, |
|
246 z : pz |
|
247 }, { |
|
248 x : px, |
|
249 y : py, |
|
250 z : -pz |
|
251 }, { |
|
252 x : -px, |
|
253 y : py, |
|
254 z : -pz |
|
255 }, { |
|
256 x : -px, |
|
257 y : py, |
|
258 z : pz |
|
259 } ]; |
|
260 return rotate(points, xy, xz, yz); |
245 } |
261 } |
246 |
262 |
247 function rotate(points, xy, xz, yz) { |
263 function rotate(points, xy, xz, yz) { |
248 var res = new Array(); |
264 var res = new Array(); |
249 for ( var p in points) { |
265 for ( var p in points) { |