I'd like to use HTML and Javascript to simulate some system, let's say a discretized differential equation like
x_new = x_old + factor * (bound - x_old)
Now I would like to give the user looking at the HTML page the possibility to interfere in real time, for example change the value of factor with some slider and see its effect on the dynamical system.
Now in principle I know the basics to do that but I am having trouble with the following issue:
I need to set the simulation speed at some value and as the calculation is (obviously) very quick, I need to insert artificial waiting times (such that the simulations feels like "real time" and does not just whizz past in a tenth of a second). At the same time I would like to let the user interact with all the elements without the window "freezing up" due to some waiting process. All in all, I have the following specs:
I am sure that something like that already exists so could anyone point out to me a "best practice" example? Alternatively, a tip on how to resolve the issue myself would also be greatly appreciated. Thanks!
Well for the "sliding" part, you could use some external components, but that depends a bit on the JavaScript framework you're using and /or if you use Jquery or things like that.
For simulating a lower speed, you could use the window.setTimeout. This function basically executes another function after waiting an amount of milliseconds.
setTimeout(
function(){
///Make something here
}, 3000); //execute it after 3000 milliseconds passed.
I made a very basic pure javascript/html sample in jsfiddle. This should get you started.