diff options
Diffstat (limited to 'temp.js')
| -rw-r--r-- | temp.js | 181 |
1 files changed, 181 insertions, 0 deletions
@@ -0,0 +1,181 @@ +const canvas = document.getElementById('drawing-board'); +const ctx = canvas.getContext('2d'); +const reset = document.getElementById("reset"); + +robot = document.getElementById('robot'); +cross = document.getElementById('cross'); + +const canvasOffsetX = canvas.offsetLeft; +const canvasOffsetY = canvas.offsetTop; + +let scale = 2 +let drawings = [] +let prev = 0 +let angle = 0 + +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; + +ctx.translate(canvas.width/2 + canvasOffsetX, canvas.height/2 + canvasOffsetY) + +reset.style.top = canvasOffsetY * 2 + "px"; +reset.style.right = canvasOffsetX * 2 + "px"; +robot.style.left = (canvas.width/2 + canvasOffsetX)/canvas.width *100 + "%" +robot.style.top = (canvas.height/2 + canvasOffsetY)/canvas.height *100 + "%" + +class Wall { + constructor(x,y,a) { + this.x = x + this.y = y + this.h = 5 + this.a = a + } + + draw(context) { + context.fillRect(this.x - robot.offsetWidth/2, this.y - this.h/2,robot.offsetWidth,this.h) + } +} + +canvas.addEventListener('mousedown', (e) => { + if (animation != 0) { + cancelAnimationFrame(animation) + } + cross.style.visibility = "visible"; + + x = e.layerX - canvas.width/2 - 2*canvasOffsetX + y = e.layerY - canvas.height/2 - 2*canvasOffsetY + cross.style.left = e.layerX - canvasOffsetX + "px" + cross.style.top = e.layerY - canvasOffsetY + "px" + + prev = angle + angle = Math.atan(x/Math.abs(y)) + + sym = 1 + if (x < 0) { + sym = -1 + } + + if (y > 0) { + angle = sym*Math.PI - angle + } + + robot.style.transform = 'translate(-50%, -50%) rotate('+ angle +'rad)'; + 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() +}); +/* +client.on('message', function (topic, message) { + let val = message.toString(); + if (val == 'STOP') { + dx = 0 + dy = 0 + } + else { + 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) + } +} + + +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() +} + +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 -= 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)'; +} + +function resizeCanvas() { + cross.style.visibility = 'hidden' + canvas.width = window.innerWidth - canvasOffsetX * 2 + canvas.height = window.innerHeight - canvasOffsetY *2 + reset.style.top = canvasOffsetY * 2 + "px"; + reset.style.right = canvasOffsetX * 2 + "px"; + robot.style.left = (canvas.width/2 + canvasOffsetX)/canvas.width *100 + "%" + robot.style.top = (canvas.height/2 + canvasOffsetY)/canvas.height *10 + + ctx.setTransform(1, 0, 0, 1, 0, 0); + ctx.translate(canvas.width/2 + canvasOffsetX, canvas.height/2 + canvasOffsetY) + moveAll(0,0) +} + +window.onresize = resizeCanvas;
\ No newline at end of file |