进行用户可以交互的实时(动态系统)模拟
Make a real-time (dynamical systems) simulations where user can interact
我想用 HTML 和 Javascript 来模拟一些系统,比如说像
这样的离散微分方程
x_new = x_old + factor * (bound - x_old)
现在我想为查看 HTML 页面的用户提供实时干预的可能性,例如使用一些滑块更改 factor
的值并查看其对页面的影响动力系统。
现在原则上我知道这样做的基础知识,但我遇到了以下问题:
我需要将模拟速度设置为某个值,并且由于计算(显然)非常快,我需要插入人为的等待时间(这样模拟感觉就像 "real time",而不只是快速过去十分之一秒)。同时,由于一些等待过程,我想让用户在没有 window "freezing up" 的情况下与所有元素进行交互。总而言之,我有以下规格:
- 一些过程的实时模拟
- 用户可以随时交互(使用按钮和滑块)并查看动态变化
我确信类似的东西已经存在所以任何人都可以向我指出一个 "best practice" 例子吗?或者,也将不胜感激有关如何自己解决问题的提示。谢谢!
那么对于 "sliding" 部分,您可以使用一些外部组件,但这在一定程度上取决于您使用的 JavaScript 框架和/或如果您使用 Jquery或类似的东西。
要模拟较低的速度,您可以使用 window.setTimeout。
此函数基本上是在等待一定毫秒数后执行另一个函数。
setTimeout(
function(){
///Make something here
}, 3000); //execute it after 3000 milliseconds passed.
我在 jsfiddle 中制作了一个非常基本的纯 javascript/html 示例。这应该可以帮助您入门。
感谢 CodeHacker,我能够实现我想要的东西。下面是他的建议的一个稍微改编的版本,现在你可以使用 "real-time" sim 进行更改。为了创建连续模拟,我使用了更新函数的递归调用和全局计数器变量。代码:
function calculate(x_old, factor, bound){
return x_old + factor * (bound - x_old);
}
var cnt = 0;
function callDelayed(){
console.log(cnt)
var x_old = Number(document.getElementById('x-old').value) ;
var factor =Number(document.getElementById('factor').value) ;
var bound = Number(document.getElementById('bound').value) ;
setTimeout(
function(){
var calculation = calculate(x_old, factor, bound);
document.getElementById('result').value = calculation;
console.log("Finished step " + cnt);
// update x_old
document.getElementById('x-old').value = document.getElementById('result').value
cnt = cnt+1;
// if time has not run out, update again
if (cnt <= 100)
{
callDelayed()
}
else
return
}, 100);
}
这种(递归调用)被认为是不好的做法还是可以的?
我想用 HTML 和 Javascript 来模拟一些系统,比如说像
这样的离散微分方程x_new = x_old + factor * (bound - x_old)
现在我想为查看 HTML 页面的用户提供实时干预的可能性,例如使用一些滑块更改 factor
的值并查看其对页面的影响动力系统。
现在原则上我知道这样做的基础知识,但我遇到了以下问题:
我需要将模拟速度设置为某个值,并且由于计算(显然)非常快,我需要插入人为的等待时间(这样模拟感觉就像 "real time",而不只是快速过去十分之一秒)。同时,由于一些等待过程,我想让用户在没有 window "freezing up" 的情况下与所有元素进行交互。总而言之,我有以下规格:
- 一些过程的实时模拟
- 用户可以随时交互(使用按钮和滑块)并查看动态变化
我确信类似的东西已经存在所以任何人都可以向我指出一个 "best practice" 例子吗?或者,也将不胜感激有关如何自己解决问题的提示。谢谢!
那么对于 "sliding" 部分,您可以使用一些外部组件,但这在一定程度上取决于您使用的 JavaScript 框架和/或如果您使用 Jquery或类似的东西。
要模拟较低的速度,您可以使用 window.setTimeout。 此函数基本上是在等待一定毫秒数后执行另一个函数。
setTimeout(
function(){
///Make something here
}, 3000); //execute it after 3000 milliseconds passed.
我在 jsfiddle 中制作了一个非常基本的纯 javascript/html 示例。这应该可以帮助您入门。
感谢 CodeHacker,我能够实现我想要的东西。下面是他的建议的一个稍微改编的版本,现在你可以使用 "real-time" sim 进行更改。为了创建连续模拟,我使用了更新函数的递归调用和全局计数器变量。代码:
function calculate(x_old, factor, bound){
return x_old + factor * (bound - x_old);
}
var cnt = 0;
function callDelayed(){
console.log(cnt)
var x_old = Number(document.getElementById('x-old').value) ;
var factor =Number(document.getElementById('factor').value) ;
var bound = Number(document.getElementById('bound').value) ;
setTimeout(
function(){
var calculation = calculate(x_old, factor, bound);
document.getElementById('result').value = calculation;
console.log("Finished step " + cnt);
// update x_old
document.getElementById('x-old').value = document.getElementById('result').value
cnt = cnt+1;
// if time has not run out, update again
if (cnt <= 100)
{
callDelayed()
}
else
return
}, 100);
}
这种(递归调用)被认为是不好的做法还是可以的?