使用setTimout()在Processing.js中创建延迟将不起作用

时间:2013-12-31 12:27:38

标签: javascript delay settimeout processing.js

我正在编写一个小型的javascript应用程序,模拟围绕一个圆圈传递书籍。代码可以在这里找到:http://anura28.github.io/HCF/

如果一个盒子收到这本书,它会显示为绿色。

目前,当您点击某个数字时,该书的传递本身并不是很明显。相反,每个收到这本书的盒子都会同时突出显示。这是因为我还没有弄清楚如何在一个方框显示为绿色并且识别出下一个方框之间产生延迟。

这是绘制绿框的代码:

void drawGreenSquares(int number)
{
  userDefinedSetup();

  int hcf = gcd(totalBoxes, number);
  int i;
  float theta;
  float arclength = 0;
  float boxSize = 0.036615134 * width;
  float radius = ((totalBoxes) * (boxSize))/ (2 * PI);
  //  start = millis();
  for (i = 0; i < (totalBoxes/hcf) ; i++)
  {
    theta = (arclength * number)/ radius;
    pushMatrix();
    translate(width/2, height/2);
    translate(radius*cos(theta), radius*sin(theta));
    rotate(theta);
    fill(156, 255, 0, 100);
    rectMode(CENTER);
    rect(0, 0, boxSize, boxSize);
    popMatrix();
    arclength += boxSize;
  }
}

setTimeout(function(){},delay)在处理“{is unexpected}”时抛出错误

如何在绘制每个绿色矩形之间创建延迟?

我的其余代码可以在https://github.com/anura28/anura28.github.com/blob/master/HCF/jam_modulus.pde

找到

1 个答案:

答案 0 :(得分:0)

我认为你是以一种不支持它的方式将js与Processing混合在一起。我从未亲自使用setTimout函数来执行此类任务。这是你在做这件事时应该考虑的事情:

如果您想要的是盒子的“渐变”颜色,那么您想要做的是设置从起始颜色到结束的渐变颜色,并逐步增加每一步。

然而,我认为你的意思是在从一种颜色到另一种颜色之前等待几秒钟。在这种情况下,我建议使用frameCount或millis()作为条件,并执行以下操作:

伪码:

void setup() {
    ...
    double initial_time = millis();
    boolean delay_box = false;
    ...
}
void draw() {
    ...
    if (box event gets activated) {
        initial_time = millis();
        delay_box = true;
    }
    ...
    other stuff
    ...
    if (delay_box && millis() > initial_time + 5000) {
        draw_delayed_box();
        delay_box = false;
    } 
}