Trigger animation of a rotation on a keypress

Programming Questions

mbjorge

Trigger animation of a rotation on a keypress

in Programming Questions • 1 year ago

When I press a key, I want the entire screen that is currently drawn to animate through a 90 degree rotation. That is, I want to watch the screen rotate; I do not want it simply to jump to the rotated state.

However, I want to do all of the rotation/animating in a method other than the draw method (for instance, in the keyPressed() method).

I can make things rotate using the draw() method, and I can have keyPressed() affect the rotation, but this is not what I am looking for:

int angle;
void setup() {
size(200, 200);
angle = 0;
}
void draw() {
background(0);
if(angle < 90) {
angle++;
}
translate(width/2,height/2);
rotate(radians(angle));
translate(-width/2,-height/2);
ellipse(width/2, height/2, 50, 30);
}
void keyPressed() {
angle = 0;
}

I want the ellipse to start out horizontal, and then when I press a button I want to watch it rotate to the vertical.

If I use a for/while loop in the keyPressed() method, it goes much to quickly to actually see the animation:

int angle;
void setup() {
size(200, 200);
angle = 0;
background(0);
ellipse(width/2, height/2, 50, 30);
}
void draw() {
}
void keyPressed() {
while (angle < 90) {
background(0);
translate(width/2, height/2);
rotate(radians(1)); //since the effect is cumulative
translate(-width/2, -height/2);
ellipse(width/2, height/2, 50, 30);
angle++;
}
angle = 0;
}

Any suggestions?

Thanks

Replies(1)

PhiLho

Re: Trigger animation of a rotation on a keypress

1 year ago

" it goes much to quickly to actually see the animation"
No, it doesn't animate at all...
One concept hard to understand in Processing is that you have to go through (including exiting) draw() to get things drawn, thus animated. For what it is worth, I tried to explain it a bit in the http://wiki.processing.org/w/Technical_FAQ (might be worth a separate page, I think).
Processing is low-level, you have nothing telling "animate this" and having it done automatically (except by libraries, but that's different).
Like in animated movies, you get things animated by drawing each step on each frame. So you have to draw each intermediary image in draw().
Thus, " I want to do all of the rotation/animating in a method other than the draw method (for instance, in the keyPressed() method)" just cannot work. The usual way is to switch a global boolean variable (eg. named animating) to true in keyPressed(), and to watch this variable in draw(): if true, process to the next step of the animation, otherwise, just draw the last frame (or do something else, you can have several booleans). Reset the variable to false at the end of the animation.

Top Reply