Slowing a rotation using millis() does not work

Processing Coding Questions
1

I apologise. I know this topic has been covered several times in various forms in this forum. Unfortunately, after several readings, I seem to miss the point. As a result, my timing in the sketch turns out to be wrong. With one mouse click, the square in the center of the background should slowly rotate HALF_PI. The point here is “slow”. For that I have provided a rotation of HALF_PI/15 that has to be executed 15 times with a short delay of 0.25 sec so that the entire rotation takes 3.75 sec. Unfortunately, the rotation doesn’t seem to be running.

// processing 4.1.1.

// Shapes
PShape block;
// timing
int timeStart;
int timeElapsed;

void setup() {
  size(200, 200, P2D);

  timeStart = millis();

  rectMode(CENTER);
  block = createShape(RECT, 0, 0, 50, 50);
  block.setFill(color(255));
}

void draw() {
  background(50);
  translate(width/2, height/2);
  shape(block, 0, 0);
}

void mouseClicked() {
  timeStart = millis();
  int i = 0;
  while (i < 16) {
    timeElapsed = millis() - timeStart;
    if (timeElapsed > 250) {
      println(timeElapsed);
      block.rotate(HALF_PI / 15);
      timeStart = millis();
      i = i + 1;
      println(i);
    }
  }
}
1 Like
2

Hello @mmuylle

If the goal is to just slow the rotation you can do this. No need to use milliseconds… :slightly_smiling_face:

// Shapes
PShape block;
// timing
int timeStart;
int timeElapsed;

void setup() {
  size(200, 200, P2D);

  rectMode(CENTER);
  block = createShape(RECT, 0, 0, 50, 50);
  block.setFill(color(255));
}

void draw() {
  background(50);

  block.rotate(HALF_PI / 60); // Here! :-)
  translate(width/2, height/2);
  shape(block, 0, 0);
}

:nerd_face:

3

mouseClicked is only executed briefly (once) when you click the mouse, not throughout.

Moreover, draw() or mouseClicked() don’t update the screen throughout (in your case during the while loop) but only ONCE at the end of draw().

Hence, you need to

  • get rid of the while loop (animation not visible) and
  • move the section therein inside draw() (which loops automatically and is therefore the right place for animations),
  • enclosed by an if-clause (animation should start only after mouse click),
  • that gets true when you have the mouseClicked() event.

To that end, in mouseClicked() set a boolean var (myMouseClicked) to true, that you evaluate in draw():

if(myMouseClicked)  {

    timeElapsed = millis() - timeStart;
    if (timeElapsed > 250) {
      println(timeElapsed);
      block.rotate(HALF_PI / 15);
      timeStart = millis();
      i = i + 1;
      println(i);
    }

}

Chrisir

1 Like
4

Didn’t see that you were also replying. My apologies!

5

@Chrisir No need to apologize!!! :slightly_smiling_face:
I always appreciate the opportunity to learn alternate solutions and yours are always spot on! :slightly_smiling_face:
:nerd_face:

1 Like
6

Thank you debxyz, but I need a little bit more control over the animation than just slow it down.

1 Like
7

Thank you Chrisir. Everything works fine know. The best thing is that I now really understand where I was wrong.

2 Likes