diff --git a/html/assets/js/script.js b/html/assets/js/script.js index 0545a8c68e2b94fceb2d50ea2ef6957fa58965d7..1452bee38831e74398bf5aa9cbbf876c8130401a 100644 --- a/html/assets/js/script.js +++ b/html/assets/js/script.js @@ -15,28 +15,16 @@ window.addEventListener("load", function () { initInputHandlers(graph); let svg = document.querySelector("header svg"); graph.setOutput(svg).initSvgGraph(); - // Periodically update graph to create animation - const frameIntervalMs = 20; window.addEventListener('resize', function() { graph.setOutput(svg); }); - setInterval(() => { + function stepGraph() { graph.stepFrame(); graph.redrawOutput(); - }, frameIntervalMs); + window.requestAnimationFrame(stepGraph); + } + window.requestAnimationFrame(stepGraph); } // Sets event handlers for form input elements, and sets configuration variables. function initInputHandlers(graph) { - function setAndCall(elemId, func) { - let handler; - let elem = document.getElementById(elemId); - if (elem instanceof HTMLInputElement) { - handler = () => func(parseFloat(elem.value)); - elem.oninput = handler; - } else if (elem instanceof HTMLSelectElement) { - handler = () => func(parseFloat(elem.value)); - elem.onchange = handler; - } else throw new Error("Assertion error"); - handler(); - } graph.idealNumNodes = 40; graph.extraEdgeProportion = 40 / 100; graph.radiiWeightPower = 0.8;