1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
|
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
canvas.width = window.innerWidth - canvasOffsetX * 2;
canvas.height = window.innerHeight - canvasOffsetY * 2;
//robot.style.top = canvas.height/2 - robot.height/2 - canvasOffsetY;
//robot.style.left = canvas.width/2 - robot.width/2 - canvasOffsetX;
const tr = {x: 0, y: 0, a: 0}
ctx.translate(canvas.width/2 + canvasOffsetX, canvas.height/2 + canvasOffsetY)
reset.style.top = canvasOffsetY * 2 + "px";
reset.style.right = canvasOffsetX * 2 + "px";
let lineWidth = 2;
let strokeColor = "red"
let drawings = [];
ctx.lineWidth = lineWidth;
ctx.lineCap = 'square';
ctx.strokeStyle = strokeColor;
ctx.fillStyle = "red";
const wall = (x, y) => {
ctx.fillRect(x * canvas.width - canvasOffsetX - robot.offsetWidth/2, y * canvas.height - canvasOffsetY, robot.offsetWidth, 5);
ctx.stroke();
ctx.beginPath();
}
canvas.addEventListener('mousedown', (e) => {
cross.style.visibility = "visible";
cross.style.left = e.layerX - canvasOffsetX + "px"
cross.style.top = e.layerY - canvasOffsetY + "px"
moveTo(-(e.layerX - canvasOffsetX - canvas.width/2) * scale, -(e.layerY - canvasOffsetY - canvas.height/2) * scale)
tr.a = Math.atan((e.layerX - document.querySelector('body').clientWidth/2)/(e.layerY - document.querySelector('body').clientHeight/2))
if ( e.layerY < canvas.height/2 )
{
tr.a += Math.PI
}
robot.style.transform = 'translate(-50%, -50%) rotate('+ -(tr.a+Math.PI)+'rad)';
// (-(e.layerX - canvasOffsetX - canvas.width/2) * scale, -(e.layerY - canvasOffsetY - canvas.height/2) * scale)
update()
});
client.on('message', function (topic, message) {
let val = message.toString();
var n = parseInt(val);
update();
if (!isNaN(n)){
if (n < 150){
drawings.push({x: (n - 30) * Math.sin(tr.a)/canvas.width, y: ((n - 30) * Math.cos(tr.a))/canvas.height, tr: {x: tr.x, y: tr.y}}) // add a wall
tr.x -= (n - 30) * Math.sin(tr.a) / 2
tr.y -= (n - 30) * Math.cos(tr.a) / 2
}
else{
tr.x -= (n - 30) * Math.sin(tr.a)
tr.y -= (n - 30) * Math.cos(tr.a)
}
}
});
/* canvas.addEventListener('touchstart', (e) => {
drawCross(e.targetTouches[0].layerX, e.targetTouches[0].layerY);
// moveTo((e.targetTouches[0].layerX - canvasOffsetX - canvas.width/2) * scale, (e.targetTouches[0].layerY - canvasOffsetY - canvas.height/2) * scale)
tr.a = Math.atan((-e.targetTouches[0].layerX + canvasOffsetX + canvas.width/2)/(e.targetTouches[0].layerY - canvasOffsetY - canvas.height/2))
if ( e.targetTouches[0].layerY - canvasOffsetY > canvas.height/2 )
{
tr.a += Math.PI
}
// if wall detected then
// drawings.push({x: (canvasOffsetX - robot.width/2)/canvas.width, y: -(20 * scale + canvasOffsetY + robot.height)/canvas.height, tr: {x: tr.x, y: tr.y, a: tr.a}}) // add a wall
update()
});
*/
reset.onclick = () => {
drawings = [];
tr.x = 0
tr.y = 0
tr.a = 0
robot.style.transform = 'translate(-50%, -50%) rotate(0deg)';
update();
}
function resizeCanvas() {
canvas.width = window.innerWidth - canvasOffsetX * 2;
canvas.height = window.innerHeight - canvasOffsetY * 2;
ctx.strokeStyle = strokeColor;
ctx.lineWidth = lineWidth;
ctx.lineCap = 'round';
ctx.fillStyle = "red";
robot.style.top = canvas.height/2 - robot.height/2 - canvasOffsetY;
robot.style.left = canvas.width/2 - robot.width/2 - canvasOffsetX;
ctx.setTransform(1, 0, 0, 1, 0, 0);
}
function redrawCanvas(){
ctx.translate(canvas.width/2 + canvasOffsetX, canvas.height/2 + canvasOffsetY)
drawings.forEach(element => {
//ctx.setTransform(1, 0, 0, 1, 0, 0)
//ctx.translate(tr.x, tr.y)
// ctx.translate(element.tr.x, element.tr.y)
// ctx.rotate(tr.a)
// ctx.rotate(element.tr.a)
wall(element.x + element.tr.x, element.y + element.tr.y);
});
}
function update(){
resizeCanvas();
redrawCanvas();
}
const updateOnFrame = () => {
update();
requestAnimationFrame(updateOnFrame)
}
//updateOnFrame();
window.onresize = update;
|
