Quillot Mathias / triangle

Download as
Browse Code »

Commit ea49b23e2420ddec5ef1c2dc383d66dd5aa7b238

Authored by Mathias Quillot
1 parent 9db1a6bb0f
Exists in master

Nouvelle version avec les images et le son (son pas dans le git encore)

Showing 1 changed file with 383 additions and 296 deletions Inline Diff

1 <html> 1 <html>
2 <head>
3 <meta charset="UTF-8">
4 <title>Konva's test</title>
5 <script src="https://unpkg.com/konva@3.3.2/konva.min.js"></script>
6 </head>
7 <body>
8 <h1>Interface Mockup with Konda JS</h1>
9 <div id="container"></div>
10 2
11 <script type="text/javascript"> 3 <head>
4 <meta charset="UTF-8">
5 <title>Konva's test</title>
6 <script src="https://unpkg.com/konva@3.3.2/konva.min.js"></script>
7 <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
8 </head>
12 9
13 // -- FUNCTIONS -- 10 <body>
14 /** 11 <h1>Interface Mockup with Konda JS</h1>
15 * Check if an intersection exists between AB and CD. 12 <div id="container"></div>
16 * Return : 13 <button onclick="eventNext()">Valider</button>
17 * - false if it has no intersection 14 <div id="information" style="display:none">
18 * - true otherwise 15 <img src="image.png" id="image-char" width="150px" />
19 */ 16 <audio controls id="audio-player-char">
20 function isThereIntersection(A, B, C, D) { 17 <source src="" type="audio/wav">
21 a = A.x;b = A.y;c = B.x;d = B.y 18 Your browser does not support the audio element.
22 p = C.x;q = C.y;r = D.x;s = D.y 19 </audio>
23 var det, gamma, lambda; 20 </div>
24 det = (c - a) * (s - q) - (r - p) * (d - b);
25 if (det === 0) {
26 return false;
27 } else {
28 lambda = ((s - q) * (r - a) + (p - r) * (s - b)) / det;
29 gamma = ((b - d) * (r - a) + (c - a) * (s - b)) / det;
30 return (0 < lambda && lambda < 1) && (0 < gamma && gamma < 1)
31 }
32 };
33 21
34 /** 22 <script type="text/javascript">
35 * Compute intersection between two lines
36 * Please, check if an intersection exists between
37 * calling this function. (ref isThereIntersection)
38 *
39 * Return:
40 * - Intersection point between two lines
41 */
42 function intersection(A, B, C, D) {
43 a = A.x;b = A.y;c = B.x;d = B.y
44 p = C.x;q = C.y;r = D.x;s = D.y
45 23
46 l1_a = (B.y - A.y) / (B.x - A.x); 24 // -- FUNCTIONS --
47 l1_b = A.y - l1_a * A.x; 25 /**
48 l2_a = (D.y - C.y) / (D.x - C.x); 26 * Check if an intersection exists between AB and CD.
49 l2_b = C.y - l2_a * C.x; 27 * Return :
28 * - false if it has no intersection
29 * - true otherwise
30 */
31 function isThereIntersection(A, B, C, D) {
32 a = A.x; b = A.y; c = B.x; d = B.y
33 p = C.x; q = C.y; r = D.x; s = D.y
34 var det, gamma, lambda;
35 det = (c - a) * (s - q) - (r - p) * (d - b);
36 if (det === 0) {
37 return false;
38 } else {
39 lambda = ((s - q) * (r - a) + (p - r) * (s - b)) / det;
40 gamma = ((b - d) * (r - a) + (c - a) * (s - b)) / det;
41 return (0 < lambda && lambda < 1) && (0 < gamma && gamma < 1)
42 }
43 };
50 44
51 // Compute intersection point 45 /**
52 x = (l2_b - l1_b) / (l1_a - l2_a) 46 * Compute intersection between two lines
53 y = l1_a * x + l1_b 47 * Please, check if an intersection exists between
54 return { 48 * calling this function. (ref isThereIntersection)
55 x: x, 49 *
56 y: y 50 * Return:
57 } 51 * - Intersection point between two lines
58 } 52 */
53 function intersection(A, B, C, D) {
54 a = A.x; b = A.y; c = B.x; d = B.y
55 p = C.x; q = C.y; r = D.x; s = D.y
59 56
60 /** 57 l1_a = (B.y - A.y) / (B.x - A.x);
61 * Return the index of the closest point 58 l1_b = A.y - l1_a * A.x;
62 * 59 l2_a = (D.y - C.y) / (D.x - C.x);
63 */ 60 l2_b = C.y - l2_a * C.x;
64 function closestPoint(ref, points) { 61
65 var dist = 100000; 62 // Compute intersection point
66 var closest_i = -1; 63 x = (l2_b - l1_b) / (l1_a - l2_a)
67 for(var i in points) { 64 y = l1_a * x + l1_b
68 cur = Math.sqrt(Math.pow(ref.x - points[i].x, 2) + Math.pow(ref.y - points[i].y, 2)); 65 return {
69 if(cur < dist) { 66 x: x,
70 dist = cur; 67 y: y
71 closest_i = i; 68 }
72 } 69 }
73 } 70
74 return closest_i; 71 /**
75 } 72 * Return the index of the closest point
76 // -- DATA -- 73 *
77 data = { 74 */
78 triangle: { 75 function closestPoint(ref, points) {
79 A: { 76 var dist = 100000;
80 x:170, 77 var closest_i = -1;
81 y: 80 78 for (var i in points) {
82 }, 79 cur = Math.sqrt(Math.pow(ref.x - points[i].x, 2) + Math.pow(ref.y - points[i].y, 2));
83 B: { 80 if (cur < dist) {
84 x: 365, 81 dist = cur;
85 y: 125 82 closest_i = i;
86 }, 83 }
87 C: { 84 }
88 x: 215, 85 return closest_i;
89 y: 260
90 } 86 }
91 }
92 }
93 87
94 // -- Help functions -- 88 currentId = 0
95 function writeMessage(message) { 89 // -- EVENTS --
96 text.text(message); 90 function eventInformationRef(id) {
97 layer.draw(); 91 $("#information").css("display", "block");
98 } 92 $("#information #image-char").attr("src", data["refs"][currentId][id]["image"])
93 $("#information #audio-player-char source").attr("src", data["refs"][currentId][id]["audio"])
94 $("#information #audio-player-char")[0].load();
95 }
99 96
100 // -- STAGE & LAYER-- 97 function eventNext() {
101 var stage = new Konva.Stage({ 98 console.log("test")
102 container: 'container', // id of container <div> 99 $("#information").css("display", "none");
103 width: 500, 100 currentId++;
104 height: 500 101 ref1Obj.src = data["refs"][currentId]["1"]["image"]
105 }); 102 ref2Obj.src = data["refs"][currentId]["2"]["image"]
103 ref3Obj.src = data["refs"][currentId]["3"]["image"]
104 }
106 105
107 var layer = new Konva.Layer();
108 106
109 // -- TEXT -- 107 // -- DATA --
110 var text = new Konva.Text({ 108 data = {
111 x: 10, 109 triangle: {
112 y: 10, 110 A: {
113 fontFamily: 'Calibri', 111 x: 170,
114 fontSize: 24, 112 y: 80
115 text: 'Test', 113 },
116 fill: 'black' 114 B: {
117 }); 115 x: 365,
116 y: 125
117 },
118 C: {
119 x: 215,
120 y: 260
121 }
122 },
123 refs:
124 [
125 {
126 1: {
127 "image": "https://pixel.nymag.com/imgs/daily/vulture/2017/11/01/01-thor-ragnarok.w700.h700.jpg",
128 "audio": "fr-fr,global_admiral_koris,gth002_bigchoice_m,00506414_m.wav"
129 },
130 2: {
131 "image": "https://vignette.wikia.nocookie.net/lotr/images/e/e7/Gandalf_the_Grey.jpg/revision/latest?cb=20121110131754",
132 "audio": "fr-fr,global_illusive_man,cat004_premech_log_kleng_d,00636312_m.wav"
133 },
134 3: {
135 "image": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTpZXULP94DEy5J5gyfRx3MPNZYU6QeHHaHkzrcrUpyr_eoeLE0Rw",
136 "audio": "fr-fr,global_joker,nor_joker_bridge_d,00648244_m.wav"
137 }
138 },
139 {
140 1: {
141 "image": "https://upload.wikimedia.org/wikipedia/en/7/77/EricCartman.png",
142 "audio": "fr-fr,global_oldcouncil_turian,procit_turian_request_m,00618678_m.wav"
143 },
144 2: {
145 "image": "https://images-na.ssl-images-amazon.com/images/I/513jWqHJZDL._SY355_.jpg",
146 "audio": "fr-fr,global_thane,citprs_hosp_thane_d,00638983_m.wav"
147 },
148 3: {
149 "image": "https://tous-les-heros.com/modules/mdg_blog/views/img/front/1779/visuel-article_article_offredumoment_actualitedesheros.jpg",
150 "audio": "fr-fr,global_wreav,kro002_truck_talk1_m,00595765_m.wav"
151 }
152 },
153 {
154 1: {
155 "image": "https://the-big-bang-theory.com/images/uploads/5/rs_3463ec66edb459bd1dd.jpg",
156 "audio": "fr-fr,global_zaeed,citprs_zaeed_a,00674049_m.wav"
157 },
158 2: {
159 "image": "https://the-big-bang-theory.com/images/uploads/2/rs_35619e852e696869058.jpg",
160 "audio": "fr-fr,hench_ashley,cermir_observation_enter_b,00635714_m.wav"
161 },
162 3: {
163 "image": "https://wwwimage-secure.cbsstatic.com/thumbnails/photos/w425/cast/cast_bigbang_johnnygalecki.jpg",
164 "audio": "fr-fr,hench_ashley,norcat_cat4_romculm_ash_m,00652553_m.wav"
165 }
166 }
167 ]
168 }
118 169
170 // -- Help functions --
171 function writeMessage(message) {
172 text.text(message);
173 layer.draw();
174 }
119 175
120 // -- RECTANGLE -- 176 // -- STAGE & LAYER--
121 // TODO: Ajouter un rectangle en fond qui serve à 177 var stage = new Konva.Stage({
122 // gérer l'événement de la souris. 178 container: 'container', // id of container <div>
179 width: 500,
180 height: 500
181 });
123 182
124 var rect = new Konva.Rect({ 183 var layer = new Konva.Layer();
125 x: 0,
126 y: 0,
127 width: stage.attrs.width,
128 height: stage.attrs.height,
129 stroke: 'black',
130 strokeWidth: 0
131 });
132 184
185 // -- TEXT --
186 var text = new Konva.Text({
187 x: 10,
188 y: 10,
189 fontFamily: 'Calibri',
190 fontSize: 24,
191 text: 'Test',
192 fill: 'black'
193 });
133 194
134 // -- TRIANGLE --
135 var triangle = new Konva.Shape({
136 stroke: 'black',
137 fill: '#00D2FF',
138 strokeWidth: 1,
139 sceneFunc: function(context) {
140 context.beginPath();
141 context.moveTo(data.triangle.A.x, data.triangle.A.y);
142 context.lineTo(data.triangle.B.x, data.triangle.B.y);
143 context.lineTo(data.triangle.C.x, data.triangle.C.y);
144 context.closePath();
145 context.fillStrokeShape(this);50
146 }
147 });
148 195
149 bar = { 196 // -- RECTANGLE --
150 x: (data.triangle.A.x + data.triangle.B.x + data.triangle.C.x) / 3, 197 // TODO: Ajouter un rectangle en fond qui serve à
151 y: (data.triangle.A.y + data.triangle.B.y + data.triangle.C.y) / 3 198 // gérer l'événement de la souris.
152 }
153 199
200 var rect = new Konva.Rect({
201 x: 0,
202 y: 0,
203 width: stage.attrs.width,
204 height: stage.attrs.height,
205 stroke: 'black',
206 strokeWidth: 0
207 });
154 208
155 triangle.on("mousemove mousedown", function(event){
156 if(event.evt.buttons === 1) {
157 var mousePos = stage.getPointerPosition();
158 var x = mousePos.x;
159 var y = mousePos.y;
160 point.position({x: x, y: y});
161 layer.draw();
162 }
163 })
164 209
165 function eventOutTriangle(event) { 210 // -- TRIANGLE --
166 if(event.evt.buttons === 1) { 211 var triangle = new Konva.Shape({
167 var mousePos = stage.getPointerPosition(); 212 stroke: 'black',
168 var pointout = { 213 fill: '#00D2FF',
169 x: mousePos.x, 214 strokeWidth: 1,
170 y: mousePos.y 215 sceneFunc: function (context) {
216 context.beginPath();
217 context.moveTo(data.triangle.A.x, data.triangle.A.y);
218 context.lineTo(data.triangle.B.x, data.triangle.B.y);
219 context.lineTo(data.triangle.C.x, data.triangle.C.y);
220 context.closePath();
221 context.fillStrokeShape(this); 50
222 }
223 });
224
225 bar = {
226 x: (data.triangle.A.x + data.triangle.B.x + data.triangle.C.x) / 3,
227 y: (data.triangle.A.y + data.triangle.B.y + data.triangle.C.y) / 3
171 } 228 }
172 var lines_to_test = [ 229
173 { 230
174 A: data.triangle.A, 231 triangle.on("mousemove mousedown", function (event) {
175 B: data.triangle.B 232 if (event.evt.buttons === 1) {
176 }, 233 var mousePos = stage.getPointerPosition();
177 { 234 var x = mousePos.x;
178 A: data.triangle.B, 235 var y = mousePos.y;
179 B: data.triangle.C 236 point.position({ x: x, y: y });
180 }, 237 layer.draw();
181 {
182 A: data.triangle.C,
183 B: data.triangle.A
184 } 238 }
185 ] 239 })
186 240
187 var intersections = [] 241 function eventOutTriangle(event) {
188 for(var ind in lines_to_test) { 242 if (event.evt.buttons === 1) {
189 line = lines_to_test[ind]; 243 var mousePos = stage.getPointerPosition();
190 var inter = isThereIntersection( 244 var pointout = {
191 line.A, line.B, 245 x: mousePos.x,
192 bar, pointout 246 y: mousePos.y
193 ) 247 }
194 if(inter !== false) { 248 var lines_to_test = [
195 intersections.push( 249 {
196 intersection( 250 A: data.triangle.A,
251 B: data.triangle.B
252 },
253 {
254 A: data.triangle.B,
255 B: data.triangle.C
256 },
257 {
258 A: data.triangle.C,
259 B: data.triangle.A
260 }
261 ]
262
263 var intersections = []
264 for (var ind in lines_to_test) {
265 line = lines_to_test[ind];
266 var inter = isThereIntersection(
197 line.A, line.B, 267 line.A, line.B,
198 bar, pointout 268 bar, pointout
199 ) 269 )
200 ); 270 if (inter !== false) {
271 intersections.push(
272 intersection(
273 line.A, line.B,
274 bar, pointout
275 )
276 );
277 }
278 }
279 i = closestPoint(pointout, intersections);
280 point.position({
281 x: intersections[i].x,
282 y: intersections[i].y
283 });
284 layer.draw();
201 } 285 }
202 } 286 }
203 i = closestPoint(pointout, intersections); 287
204 point.position({ 288 rect.on("mousemove", function (event) {
205 x: intersections[i].x, 289 eventOutTriangle(event);
206 y: intersections[i].y 290 })
291
292 // -- POINT --
293 // create our shape
294 var point = new Konva.Circle({
295 x: bar.x,
296 y: bar.y,
297 radius: 5,
298 fill: 'red',
299 stroke: 'black',
300 strokeWidth: 1
207 }); 301 });
208 layer.draw();
209 }
210 }
211 302
212 rect.on("mousemove", function(event) { 303 point.listening(false);
213 eventOutTriangle(event);
214 })
215 304
216 // -- POINT --
217 // create our shape
218 var point = new Konva.Circle({
219 x: bar.x,
220 y: bar.y,
221 radius: 5,
222 fill: 'red',
223 stroke: 'black',
224 strokeWidth: 1
225 });
226 305
227 point.listening(false); 306 // -- IMAGE REFS --
307 // 1rst ref
308 var ref1Obj = new Image();
309 ref1Obj.onload = function () {
310 var ref1 = new Konva.Image({
311 x: 50,
312 y: 50,
313 image: ref1Obj,
314 width: 100,
315 height: 100
316 });
228 317