finalHEADmain

1 files changed, 83 insertions, 35 deletions

diff --git a/index.js b/index.js
index b4b6154..0a06b9e 100644
--- a/index.js
+++ b/index.js
@@ -9,8 +9,16 @@ const canvasOffsetX = canvas.offsetLeft;
 const canvasOffsetY = canvas.offsetTop;
 
 let scale = 2
-let angle = 0
 let drawings = []
+let prev = 0
+let angle = 0
+let reading = false
+
+let speed = 200 // mm/s
+let dx = 0
+let dy = 0
+let conv = 10
+let animation = 0
 
 canvas.width = window.innerWidth - canvasOffsetX * 2;
 canvas.height = window.innerHeight - canvasOffsetY * 2;
@@ -36,6 +44,10 @@ class Wall {
 }
 
 canvas.addEventListener('mousedown', (e) => {
+    reading = false
+    if (animation != 0) {
+        cancelAnimationFrame(animation)
+    }
     cross.style.visibility = "visible";
 
     x = e.layerX - canvas.width/2 - 2*canvasOffsetX
@@ -43,8 +55,7 @@ canvas.addEventListener('mousedown', (e) => {
     cross.style.left = e.layerX - canvasOffsetX + "px"
     cross.style.top = e.layerY - canvasOffsetY + "px"
 
-    
-    temp = angle
+    prev = angle
     angle = Math.atan(x/Math.abs(y))
 
     sym = 1
@@ -55,73 +66,110 @@ canvas.addEventListener('mousedown', (e) => {
     if (y > 0) {
         angle = sym*Math.PI - angle
     }
-    console.log(temp)
-    console.log(angle)
 
     robot.style.transform = 'translate(-50%, -50%) rotate('+ angle +'rad)';
-    a = -(e.layerX - canvasOffsetX - canvas.width/2) * scale
-    b = -(e.layerY - canvasOffsetY - canvas.height/2) * scale
-    rot = (angle - temp)
-    moveTo(a*Math.cos(-rot)- b * Math.sin(-rot),a * Math.sin(-rot) + b*Math.cos(-rot))
+    dist = Math.sqrt(x*x + y*y)
+    t = (dist/speed) * 1000/conv //miss conv
+    dx = x/(t)
+    dy = y/(t)
+    diff = angle - prev
+
+    if(angle * prev < 0 ) {
+        diff = (Math.abs(angle) + Math.abs(prev))
+        if (angle < 0)
+            diff = -diff
+    }
+    console.log("net angle :" + angle * 180 / Math.PI)
+
+    if(diff > Math.PI) {
+        diff = diff - 2*Math.PI
+    }
+    if (diff < -Math.PI) {
+        diff = diff + 2*Math.PI
+    }
+    moveTo(dist,diff)
     
-    moveAll(x,y)
+    moveAll()
 });
 
 client.on('message', function (topic, message) {
     let val = message.toString();
-    var n = parseInt(val);
-    if (!isNaN(n)){
-        if (n < 150){
-	        wall = new Wall(n * Math.sin(angle), - n * Math.cos(angle), angle)
-            drawings.push(wall)
-            draw(wall)
+    if (val == 'STOP') {
+        stop()
+    }
+    else {
+        if (reading) {
+            var n = parseInt(val);
+            if (!isNaN(n)){
+                if (n < 150){
+                    wall = new Wall(n * Math.sin(angle), - n * Math.cos(angle), angle)
+                    drawings.push(wall)
+                    draw(wall)
+                }
+            }
         }
     }
 });
 
-/*
+
 function test(wall) {
     drawings.push(wall)
     draw(wall)
 }
-*/
+
+function stop() {
+    dx = 0
+    dy = 0
+    if (animation != 0) {
+        cancelAnimationFrame(animation)
+    }
+    reading = true
+}
+
 
 function draw(wall) {
-            ctx.save()
-            x = wall.x
-            y = wall.y
-            wall.x = 0
-            wall.y = 0
-            ctx.translate(x,y)
-            ctx.rotate(wall.a)
-            wall.draw(ctx)
-            wall.x = x
-            wall.y = y
-            ctx.restore()
+    ctx.save()
+    x = wall.x
+    y = wall.y
+    wall.x = 0
+    wall.y = 0
+    ctx.translate(x,y)
+    ctx.rotate(wall.a)
+    wall.draw(ctx)
+    wall.x = x
+    wall.y = y
+    ctx.restore()
 }
 
-function moveAll(x,y) {
+function moveAll() {
+
     a = canvas.width/2 + canvasOffsetX
     b = canvas.height/2 + canvasOffsetY
     ctx.clearRect(-a,-b,canvas.width,canvas.height)
 
     drawings.forEach((e) => {
-        e.x -= x
-        e.y -= y
+        e.x -= dx
+        e.y -= dy
         draw(e) 
     })
+    animation = requestAnimationFrame(moveAll)
 }
 
 reset.onclick = () => {
+    a = canvas.width/2 + canvasOffsetX
+    b = canvas.height/2 + canvasOffsetY
+    ctx.clearRect(-a,-b,canvas.width,canvas.height)
+    cross.style.visibility = 'hidden'
     drawings = [];
     angle = 0
+    prev = 0
+    dx = 0
+    dy = 0
     robot.style.transform = 'translate(-50%, -50%) rotate(0deg)';
-    a = canvas.width/2 + canvasOffsetX;
-    b = canvas.height/2 + canvasOffsetY;
-    ctx.clearRect(-a,-b,canvas.width,canvas.height);
 }
 
 function resizeCanvas() {
+    cross.style.visibility = 'hidden'
     canvas.width = window.innerWidth - canvasOffsetX * 2
     canvas.height = window.innerHeight - canvasOffsetY *2
     reset.style.top = canvasOffsetY * 2 + "px";