titi
/
ASR_tangibles


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687
							<!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>