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
|
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 angle = 0
let drawings = []
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) => {
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"
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)';
moveTo(x * scale,y * scale)
moveAll(x,y)
});
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)
}
}
});
/*
function test(wall) {
drawings.push(wall)
draw(wall)
}
*/
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(x,y) {
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
draw(e)
})
}
reset.onclick = () => {
drawings = [];
angle = 0
robot.style.transform = 'translate(-50%, -50%) rotate(0deg)';
}
function resizeCanvas() {
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;
|
