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

Question

I am writing a small javascript application that simulates passing books around a circle. The code can be found here: http://anura28.github.io/HCF/

If a box receives the book, it is coloured green.

Currently, when you click a number, the passing-of-the-book itself is not very visible. Instead, every box that will receive the book highlights at the same time. This is because I haven't figured out how to create a delay between when a box is coloured green and the next box is identified.

This is the code that draws the green boxes:

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) throws an error in processing saying "{ is unexpected}"

How do I create a delay between drawing each green rectangle?

The rest of my code can be found at https://github.com/anura28/anura28.github.com/blob/master/HCF/jam_modulus.pde

Answer 1

I think you're mixing js with Processing in a way that it doesn't support it. I've never personally used the setTimout function to do this kind of task. Here's what you should think about when doing this:

If what you want is a "gradual" coloring of the box, then what you want to do is set a gradient in color from your starting color to the end, and you increase it little by little on each step.

However, I think what you mean is literally wait a couple of seconds before going from one color to the next. In this case, I suggest using frameCount or millis() as a conditional and do something like this:

pseudo-code:

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;
    } 
}