protonphoton
/
LJ
6
0
Fork 1
Code Issues Pull Requests 1 Releases Wiki Activity

[fix] www: rework the simulator page

This commit is contained in:
alban 2020-10-03 17:51:26 +02:00
parent 371003fce2
commit 5e26faa798
1 changed files with 85 additions and 116 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

83
www/simu.html
View File

@ -517,70 +517,39 @@
var zoom = 0.5;
//ctx.save
// Todo : laser point will have black points to go from a polyline to another. Need to discard those black points.
// Draws every segment received, except black colored target ones
function draw() {
// Clear Canvas At The Start Of Every Frame
//ctx.restore
if (pl2.length > 0)
{
// Begin a new path
// 0.7 reduces max coordinates in a more browser compatible resolution.
{
ctx.clearRect(0,0,400,400);
ctx.beginPath();
ctx.moveTo(pl2[0]*zoom, pl2[1]*zoom);
lastpoint.color = pl2[2];
// Draw n Lines
for (var i = 0; i < pl2.length/3; i++)
{
// New point has the same color -> add a new line to the new point
if (pl2[2+(i*3)] === lastpoint.color)
{
ctx.lineTo(pl2[i*3]*zoom, pl2[1+(i*3)]*zoom);
}
// New point has different color -> stroke with previous color
if (pl2[2+(i*3)] != lastpoint.color)
{
ctx.strokeStyle = "#"+(lastpoint.color + Math.pow(16, 6)).toString(16).slice(-6);
ctx.stroke();
ctx.closePath()
//ctx.restore
ctx.beginPath();
//ctx.clearRect(0,0,400,400);
ctx.moveTo(pl2[i*3]*zoom, pl2[1+(i*3)]*zoom);
}
// Last point -> stroke with current color
if (i === (pl2.length/3)-1 )
{
ctx.moveTo(pl2[i*3]*zoom, pl2[1+(i*3)]*zoom);
ctx.strokeStyle = "#"+((pl2[2+(i*3)]) + Math.pow(16, 6)).toString(16).slice(-6);
ctx.stroke();
ctx.closePath()
//ctx.restore
//ctx.clearRect(0,0,400,400);
}
// store point for comparison
lastpoint.x = pl2[i*3];
lastpoint.y = pl2[1+(i*3)];
lastpoint.color = pl2[2+(i*3)];
lastpoint = {
x:pl2[0],
y:pl2[1],
color:pl2[2]
}
for (var i = 0; i <= pl2.length; i+=3)
{
point = {
x:pl2[i],
y:pl2[i+1],
color:pl2[i+2]
}
// console.log(lastpoint,point)
// if the target is black, skip drawing
if( point.color != 0){
ctx.beginPath()
ctx.strokeStyle = "#"+(point.color + Math.pow(16, 6)).toString(16).slice(-6);
ctx.moveTo(lastpoint.x * zoom, lastpoint.y * zoom);
ctx.lineTo(point.x * zoom, point.y * zoom);
ctx.stroke();
ctx.closePath()
}
lastpoint = point
}
}
// Call Draw Function Again To Create Animation
window.requestAnimationFrame(draw);
}
}
// Initialize The Draw Function
draw();