|
|
@@ -0,0 +1,86 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html style="height: 100%;">
|
|
|
+ <head>
|
|
|
+ <meta charset="utf-8">
|
|
|
+ <meta name="viewport" content="width=device-width">
|
|
|
+ <title>ASR tangibles</title>
|
|
|
+ <style>
|
|
|
+ body {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ margin: 0;
|
|
|
+ background-color: #EEEEEE;
|
|
|
+ }
|
|
|
+ canvas {
|
|
|
+ border: gray;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+ </head>
|
|
|
+
|
|
|
+ <body>
|
|
|
+
|
|
|
+ <!--<div id="box"></div>-->
|
|
|
+ <canvas id="myCanvas" width="1000" height="800"></canvas>
|
|
|
+
|
|
|
+ <script>
|
|
|
+ var canvasElement = document.querySelector("#myCanvas");
|
|
|
+ canvasElement.addEventListener('touchstart', (evt) => {
|
|
|
+ return eventHandler(evt, 'touchstart');
|
|
|
+ });
|
|
|
+
|
|
|
+ canvasElement.addEventListener('touchmove', (evt) => {
|
|
|
+ return eventHandler(evt, 'touchmove');
|
|
|
+ });
|
|
|
+
|
|
|
+ canvasElement.addEventListener('touchend', (evt) => {
|
|
|
+ return eventHandler(evt, 'touchend');
|
|
|
+ });
|
|
|
+
|
|
|
+ var context = canvasElement.getContext("2d");
|
|
|
+ context.font = '48px serif';
|
|
|
+
|
|
|
+ function distance(touches, id1, id2){
|
|
|
+ return Math.sqrt( (touches[id1].pageX-touches[id2].pageX)**2 + (touches[id1].pageY-touches[id2].pageY)**2 );
|
|
|
+ }
|
|
|
+ function angle(touches, id){
|
|
|
+ var AB = distance(touches, id, (id+1)%3);
|
|
|
+ var BC = distance(touches, (id+1)%3, (id+2)%3);
|
|
|
+ var AC = distance(touches, (id+2)%3, id);
|
|
|
+ return Math.acos((BC*BC+AB*AB-AC*AC)/(2*BC*AB))*180/Math.PI;
|
|
|
+ }
|
|
|
+
|
|
|
+ const eventHandler = (evt, type) => {
|
|
|
+ console.log("test");
|
|
|
+ if(evt.touches.length === 3){
|
|
|
+ console.log(evt.touches);
|
|
|
+ context.clearRect(0, 0, canvasElement.width, canvasElement.height);
|
|
|
+ // the triangle
|
|
|
+ context.beginPath();
|
|
|
+ context.moveTo(evt.touches[0].pageX, evt.touches[0].pageY);
|
|
|
+ context.fillText(distance(evt.touches, 0, 1), 10, 50);
|
|
|
+ context.fillText(angle(evt.touches, 0), 10, 100);
|
|
|
+ context.lineTo(evt.touches[1].pageX, evt.touches[1].pageY);
|
|
|
+ context.fillText(distance(evt.touches, 1, 2), 10, 150);
|
|
|
+ context.fillText(angle(evt.touches, 1), 10, 200);
|
|
|
+ context.lineTo(evt.touches[2].pageX, evt.touches[2].pageY);
|
|
|
+ context.fillText(distance(evt.touches, 2, 0), 10, 250);
|
|
|
+ context.fillText(angle(evt.touches, 2), 10, 300);
|
|
|
+ context.closePath();
|
|
|
+
|
|
|
+ // the outline
|
|
|
+ context.lineWidth = 1;
|
|
|
+ context.strokeStyle = '#666666';
|
|
|
+ context.stroke();
|
|
|
+
|
|
|
+ // the fill color
|
|
|
+ context.fillStyle = "#FFCC00";
|
|
|
+ context.fill();
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ evt.preventDefault();
|
|
|
+ };
|
|
|
+
|
|
|
+ </script>
|
|
|
+ </body>
|
|
|
+</html>
|
Alexis