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

[fix] www: rework the simulator page

Browse Source
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; var zoom = 0.5;
//ctx.save //ctx.save
// Draws every segment received, except black colored target ones
// Todo : laser point will have black points to go from a polyline to another. Need to discard those black points.
function draw() { function draw() {
// Clear Canvas At The Start Of Every Frame
//ctx.restore
if (pl2.length > 0) 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.clearRect(0,0,400,400);
ctx.beginPath(); lastpoint = {
x:pl2[0],
ctx.moveTo(pl2[0]*zoom, pl2[1]*zoom); y:pl2[1],
lastpoint.color = pl2[2]; color:pl2[2]
}
// Draw n Lines for (var i = 0; i <= pl2.length; i+=3)
for (var i = 0; i < pl2.length/3; i++) {
{ point = {
x:pl2[i],
// New point has the same color -> add a new line to the new point y:pl2[i+1],
if (pl2[2+(i*3)] === lastpoint.color) color:pl2[i+2]
{
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)];
} }
// 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 // Call Draw Function Again To Create Animation
window.requestAnimationFrame(draw); window.requestAnimationFrame(draw);
} }
// Initialize The Draw Function // Initialize The Draw Function
draw(); draw();