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 Side-by-side Diff

1 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 --
14   -/**
15   - * Check if an intersection exists between AB and CD.
16   - * Return :
17   - * - false if it has no intersection
18   - * - true otherwise
19   - */
20   -function isThereIntersection(A, B, C, D) {
21   - a = A.x;b = A.y;c = B.x;d = B.y
22   - p = C.x;q = C.y;r = D.x;s = D.y
23   - var det, gamma, lambda;
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   -};
  10 +<body>
  11 + <h1>Interface Mockup with Konda JS</h1>
  12 + <div id="container"></div>
  13 + <button onclick="eventNext()">Valider</button>
  14 + <div id="information" style="display:none">
  15 + <img src="image.png" id="image-char" width="150px" />
  16 + <audio controls id="audio-player-char">
  17 + <source src="" type="audio/wav">
  18 + Your browser does not support the audio element.
  19 + </audio>
  20 + </div>
33 21  
34   -/**
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
  22 + <script type="text/javascript">
45 23  
46   - l1_a = (B.y - A.y) / (B.x - A.x);
47   - l1_b = A.y - l1_a * A.x;
48   - l2_a = (D.y - C.y) / (D.x - C.x);
49   - l2_b = C.y - l2_a * C.x;
  24 + // -- FUNCTIONS --
  25 + /**
  26 + * Check if an intersection exists between AB and CD.
  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
52   - x = (l2_b - l1_b) / (l1_a - l2_a)
53   - y = l1_a * x + l1_b
54   - return {
55   - x: x,
56   - y: y
57   - }
58   -}
  45 + /**
  46 + * Compute intersection between two lines
  47 + * Please, check if an intersection exists between
  48 + * calling this function. (ref isThereIntersection)
  49 + *
  50 + * Return:
  51 + * - Intersection point between two lines
  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   -/**
61   - * Return the index of the closest point
62   - *
63   - */
64   -function closestPoint(ref, points)ย {
65   - var dist = 100000;
66   - var closest_i = -1;
67   - for(var i in points) {
68   - cur = Math.sqrt(Math.pow(ref.x - points[i].x, 2) + Math.pow(ref.y - points[i].y, 2));
69   - if(cur < dist) {
70   - dist = cur;
71   - closest_i = i;
  57 + l1_a = (B.y - A.y) / (B.x - A.x);
  58 + l1_b = A.y - l1_a * A.x;
  59 + l2_a = (D.y - C.y) / (D.x - C.x);
  60 + l2_b = C.y - l2_a * C.x;
  61 +
  62 + // Compute intersection point
  63 + x = (l2_b - l1_b) / (l1_a - l2_a)
  64 + y = l1_a * x + l1_b
  65 + return {
  66 + x: x,
  67 + y: y
  68 + }
72 69 }
73   - }
74   - return closest_i;
75   -}
76   -// -- DATA --
77   -data = {
78   - triangle: {
79   - A: {
80   - x:170,
81   - y: 80
82   - },
83   - B: {
84   - x: 365,
85   - y: 125
86   - },
87   - C: {
88   - x: 215,
89   - y: 260
  70 +
  71 + /**
  72 + * Return the index of the closest point
  73 + *
  74 + */
  75 + function closestPoint(ref, points) {
  76 + var dist = 100000;
  77 + var closest_i = -1;
  78 + for (var i in points) {
  79 + cur = Math.sqrt(Math.pow(ref.x - points[i].x, 2) + Math.pow(ref.y - points[i].y, 2));
  80 + if (cur < dist) {
  81 + dist = cur;
  82 + closest_i = i;
  83 + }
  84 + }
  85 + return closest_i;
90 86 }
91   - }
92   -}
93 87  
94   -// -- Help functions --
95   -function writeMessage(message) {
96   - text.text(message);
97   - layer.draw();
98   -}
  88 + currentId = 0
  89 + // -- EVENTS --
  90 + function eventInformationRef(id) {
  91 + $("#information").css("display", "block");
  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--
101   -var stage = new Konva.Stage({
102   - container: 'container', // id of container <div>
103   - width: 500,
104   - height: 500
105   -});
  97 + function eventNext() {
  98 + console.log("test")
  99 + $("#information").css("display", "none");
  100 + currentId++;
  101 + ref1Obj.src = data["refs"][currentId]["1"]["image"]
  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 --
110   -var text = new Konva.Text({
111   - x: 10,
112   - y: 10,
113   - fontFamily: 'Calibri',
114   - fontSize: 24,
115   - text: 'Test',
116   - fill: 'black'
117   -});
  107 + // -- DATA --
  108 + data = {
  109 + triangle: {
  110 + A: {
  111 + x: 170,
  112 + y: 80
  113 + },
  114 + B: {
  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 --
121   -// TODO: Ajouter un rectangle en fond qui serve ร 
122   -// gรฉrer l'รฉvรฉnement de la souris.
  176 + // -- STAGE & LAYER--
  177 + var stage = new Konva.Stage({
  178 + container: 'container', // id of container <div>
  179 + width: 500,
  180 + height: 500
  181 + });
123 182  
124   -var rect = new Konva.Rect({
125   - x: 0,
126   - y: 0,
127   - width: stage.attrs.width,
128   - height: stage.attrs.height,
129   - stroke: 'black',
130   - strokeWidth: 0
131   -});
  183 + var layer = new Konva.Layer();
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 = {
150   - x: (data.triangle.A.x + data.triangle.B.x + data.triangle.C.x) / 3,
151   - y: (data.triangle.A.y + data.triangle.B.y + data.triangle.C.y) / 3
152   -}
  196 + // -- RECTANGLE --
  197 + // TODO: Ajouter un rectangle en fond qui serve ร 
  198 + // gรฉrer l'รฉvรฉnement de la souris.
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) {
166   - if(event.evt.buttons === 1) {
167   - var mousePos = stage.getPointerPosition();
168   - var pointout = {
169   - x: mousePos.x,
170   - y: mousePos.y
  210 + // -- TRIANGLE --
  211 + var triangle = new Konva.Shape({
  212 + stroke: 'black',
  213 + fill: '#00D2FF',
  214 + strokeWidth: 1,
  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 = [
173   - {
174   - A: data.triangle.A,
175   - B: data.triangle.B
176   - },
177   - {
178   - A: data.triangle.B,
179   - B: data.triangle.C
180   - },
181   - {
182   - A: data.triangle.C,
183   - B: data.triangle.A
  229 +
  230 +
  231 + triangle.on("mousemove mousedown", function (event) {
  232 + if (event.evt.buttons === 1) {
  233 + var mousePos = stage.getPointerPosition();
  234 + var x = mousePos.x;
  235 + var y = mousePos.y;
  236 + point.position({ x: x, y: y });
  237 + layer.draw();
184 238 }
185   - ]
  239 + })
186 240  
187   - var intersections = []
188   - for(var ind in lines_to_test) {
189   - line = lines_to_test[ind];
190   - var inter = isThereIntersection(
191   - line.A, line.B,
192   - bar, pointout
193   - )
194   - if(inter !== false) {
195   - intersections.push(
196   - intersection(
  241 + function eventOutTriangle(event) {
  242 + if (event.evt.buttons === 1) {
  243 + var mousePos = stage.getPointerPosition();
  244 + var pointout = {
  245 + x: mousePos.x,
  246 + y: mousePos.y
  247 + }
  248 + var lines_to_test = [
  249 + {
  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 267 line.A, line.B,
198 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);
204   - point.position({
205   - x: intersections[i].x,
206   - y: intersections[i].y
  287 +
  288 + rect.on("mousemove", function (event) {
  289 + eventOutTriangle(event);
  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) {
213   - eventOutTriangle(event);
214   -})
  303 + point.listening(false);
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  
  318 + ref1.on("mousemove", function (event) {
  319 + eventOutTriangle(event);
  320 + });
229 321  
230   -// -- IMAGE REFS --
231   -// 1rst ref
232   -var ref1Obj = new Image();
233   -ref1Obj.onload = function() {
234   - var ref1 = new Konva.Image({
235   - x: 50,
236   - y: 50,
237   - image: ref1Obj,
238   - width: 100,
239   - height: 100
240   - });
  322 + ref1.on("click", function (event) {
  323 + eventInformationRef(1);
  324 + });
  325 + layer.add(ref1);
  326 + layer.draw();
  327 + }
  328 + ref1Obj.src = data["refs"][currentId]["1"]["image"];
241 329  
242   - ref1.on("mousemove", function(event) {
243   - eventOutTriangle(event);
244   - });
  330 + // 2nd ref
  331 + var ref2Obj = new Image();
  332 + ref2Obj.onload = function () {
  333 + var ref2 = new Konva.Image({
  334 + x: 150,
  335 + y: 300,
  336 + image: ref2Obj,
  337 + width: 100,
  338 + height: 100
  339 + });
245 340  
246   - layer.add(ref1);
247   - layer.draw();
248   -}
249   -ref1Obj.src="https://pixel.nymag.com/imgs/daily/vulture/2017/11/01/01-thor-ragnarok.w700.h700.jpg";
  341 + ref2.on("click", function (event) {
  342 + eventInformationRef(2);
  343 + })
250 344  
251   -// 2nd ref
252   -var ref2Obj = new Image();
253   -ref2Obj.onload = function() {
254   - var ref2 = new Konva.Image({
255   - x: 150,
256   - y: 300,
257   - image: ref1Obj,
258   - width: 100,
259   - height: 100
260   - });
  345 + ref2.on("mousemove", function (event) {
  346 + eventOutTriangle(event);
  347 + });
261 348  
262   - ref2.on("mousemove", function(event) {
263   - eventOutTriangle(event);
264   - });
  349 + layer.add(ref2);
  350 + layer.draw();
  351 + }
  352 + ref2Obj.src = data["refs"][currentId]["2"]["image"];
265 353  
266   - layer.add(ref2);
267   - layer.draw();
268   -}
269   -ref2Obj.src="https://pixel.nymag.com/imgs/daily/vulture/2017/11/01/01-thor-ragnarok.w700.h700.jpg";
270 354  
  355 + // 3rd ref
  356 + var ref3Obj = new Image();
  357 + ref3Obj.onload = function () {
  358 + var ref3 = new Konva.Image({
  359 + x: 390,
  360 + y: 50,
  361 + image: ref3Obj,
  362 + width: 100,
  363 + height: 100
  364 + });
271 365  
272   -// 3rd ref
273   -var ref3Obj = new Image();
274   -ref3Obj.onload = function() {
275   - var ref3 = new Konva.Image({
276   - x: 390,
277   - y: 50,
278   - image: ref3Obj,
279   - width: 100,
280   - height: 100
281   - });
  366 + ref3.on("click", function (event) {
  367 + eventInformationRef(3);
  368 + })
  369 + ref3.on("mousemove", function (event) {
  370 + eventOutTriangle(event);
  371 + });
282 372  
283   - ref3.on("mousemove", function(event) {
284   - eventOutTriangle(event);
285   - });
  373 + layer.add(ref3);
  374 + layer.draw();
  375 + }
  376 + ref3Obj.src = data["refs"][currentId]["3"]["image"];
286 377  
287   - layer.add(ref3);
288   - layer.draw();
289   -}
290   -ref3Obj.src="https://pixel.nymag.com/imgs/daily/vulture/2017/11/01/01-thor-ragnarok.w700.h700.jpg";
291 378  
  379 + // -- ADDING
  380 + // add the shape to the layer
  381 + layer.add(rect);
  382 + layer.add(triangle);
  383 + layer.add(point);
  384 + layer.add(text);
292 385  
293   -// -- ADDING
294   -// add the shape to the layer
295   -layer.add(rect);
296   -layer.add(triangle);
297   -layer.add(point);
298   -layer.add(text);
299 386  
  387 + // add the layer to the stage
  388 + stage.add(layer);
300 389  
301   -// add the layer to the stage
302   -stage.add(layer);
303 390  
  391 + // -- DRAWING
  392 + layer.draw();
  393 + </script>
304 394  
305   -// -- DRAWING
306   -layer.draw();
307   -</script>
  395 +</body>
308 396  
309   - </body>
310 397 </html>