diff options
Diffstat (limited to 'src_frontend/Components/Editor/Simulation.svelte')
| -rw-r--r-- | src_frontend/Components/Editor/Simulation.svelte | 27 |
1 files changed, 21 insertions, 6 deletions
diff --git a/src_frontend/Components/Editor/Simulation.svelte b/src_frontend/Components/Editor/Simulation.svelte index abe202c..86cc66c 100644 --- a/src_frontend/Components/Editor/Simulation.svelte +++ b/src_frontend/Components/Editor/Simulation.svelte @@ -5,6 +5,7 @@ let svg; let pixels = []; + let pixelBuffer = []; function updateMatrix(matrix) { if (matrix == null) { return; } @@ -24,12 +25,26 @@ } async function updateColors(colors) { - for (let i = 0; i+2 < colors.length; i+=3) { - try { - document.querySelector("#sim-pixel-"+(i/3)).style.setProperty("fill", `rgb(${colors[i]}, ${colors[i+1]}, ${colors[i+2]})`); - } catch(e) {} - } + pixelBuffer = colors; + } + + async function flushPixelBuffer() { + //console.log(pixelBuffer); + window.requestAnimationFrame((ts) => { + for (let i = 0; i+2 < pixelBuffer.length; i+=3) { + try { + document.querySelector("#sim-pixel-"+(i/3)) + .style + .setProperty( + "fill", + `rgb(${pixelBuffer[i]}, ${pixelBuffer[i+1]}, ${pixelBuffer[i+2]})`); + } catch(e) { + console.log(e); + } + } + }); } + setInterval(flushPixelBuffer, 50); onMount(() => { authorizedSocket.on("matrix", updateMatrix); @@ -58,4 +73,4 @@ <rect id="sim-pixel-{pixel.n}" x="{pixel.x*2+1}" y="{pixel.y*2+1}" width="1" height="1" style="fill:rgb(0,0,0);filter:blur(0.2px);" /> {/each} </svg> -</div>
\ No newline at end of file +</div> |