Hi all! I want to rotate a cube about a particular axis through a particular angle every time the user presses the RIGHTARROW key. I want the user to see the rotation happen, starting at its original position and rotating through until it reaches its final position over the course of a couple of seconds. I can do all the necessary math, I just can’t figure out a nice way to have a short animation like that play upon a keyPressed. Is this a bad question? Do I need to be more clear and/or specific? Oh, I’m doing this in p5.js. Thank you, Jack

Hi Hope this helps p5.js: How to rotate 3D objects on the X, Y, and Z axis - Chris Nielsen Code... On the 2D plain of a browser window p5.js can represent 3D space using WEBGL. This is specified as the third argument to the createCanvas() function in the setup portion of the sketch: createCanvas(400, 300, WEBGL); Here is some code that... Est. reading time: 1 minute [How to Rotate Shapes in p5.js (translate, rotate, push, pop)] reference | p5.js p5.js a JS client-side library for creating graphic and interactive experiences, based on the core principles of Processing.

Thank you jafal! I’m super familiar with these functions, but how would I get an animation like this to start upon a key press and then stop a predetermined number of seconds later? I also need to update some variables at the end of each round of animation. I’m going to try some simple versions of this on my own so I have code to share, but I hope that clears up my question.

Think of it as running in a state machine with a variable that represents your current state. Yours is simple with just two states – stopped or rotating – so you could just represent that with a boolean. You also need to keep track of where you are along the rotation while in the rotating state, which you can do with a counter that starts at however many frames you want the animation to take and tics down by one each frame. When it hits zero, you’re done animating and switch back to the stopped state. So, in keyPressed(), you would set your state variable to rotating (true) and set the counter to the number of frames to animate, and set up whatever math you want for your start and end orientations. In draw(), if your rotating state variable is true, you set the rotation based on the interpolated rotation based on the counter, decrease the counter, and if it hits 0, set the state back to false and update your other variables for the new orientation. In your case, you could even just use the counter as the state variable. If it’s greater than 0, then you are in the rotating state. 0 means you are stopped. counter / total number of frames gives you your interpolation variable from 1 to 0 between the start and end orientations.

thank you scudly! i am going to take a closer look at this response tomorrow and see what i can come up with. much appreciated.

[image] jackeddielove: I want the user to see the rotation happen, starting at its original position I think the basic information here is that Processing updates the screen only once at the end of draw(). This means that using a for-loop for an animation won’t work since the screen is not updated throughout but only at the end of draw() - and then your for-loop is already over. So, don’t use a for-loop or while-loop for animations but make use of the fact that draw() loops in itself 60 times per second automatically, which is perfect for animations. void draw() { background(0); if(stateVariableAnimate) { angle+=0.022; }//if showCube(); }//func Easing We could also use easing, which is a simple technique to slow down an action / animation. In our case we would apply the easing to the change of the angle, here is the example for a ball following the mouse but slowly: Easing / Examples / Processing.org. Here the easing is for the change of the position I guess. Chrisir

here is an easing example, the easing happens with the two angles // "Demo for Easing" final String title = "Demo for Easing"; final String helpText = "Use right mouse button (click or drag). Use Escape key."; final color RED = color(255, 0, 0); final color GREEN = color(0, 255, 0); final color BLUE = color(0, 0, 255); final color YELLOW = color(240, 240, 0); final color PINK = color(0, 240, 240); // for the graphical representation, 2 pairs coupled with easing float angleXThatIs; // current angles, used for displaying the cube float angleYThatIs; float angleXDesired; // the angles entered by the mouse (requested by the user) float angleYDesired; // -------------------------------------------------------------------- // Core functions void setup() { size(1300, 700, P3D); } void draw() { background(255); lights(); // read mouse to change angles angleXDesired and angleYDesired ---- if (mousePressed && mouseButton==RIGHT) { angleXDesired=map(mouseY, 0, height, PI, -PI); angleYDesired=map(mouseX, 0, width, -PI, PI); } // calc the current angle angleXThatIs and angleYThatIs with easing (this is done throughout) angleXThatIs += (angleXDesired-angleXThatIs)*0.08; angleYThatIs += (angleYDesired-angleYThatIs)*0.08; // Show the cube/scene ----------------- showCube(); // HUD --------------------------------- HUD(); // The Texts } // -------------------------------------------------------------------- // Input functions // (mouse is read in draw()) void keyPressed() { if (key==ESC) { // reset view angleXDesired=0; angleYDesired=0; key=0; // kill Esc } } // -------------------------------------------------------------------- // Other functions void showCube() { // pushMatrix(); translate (width/2, height/2+98); rotateX(angleXThatIs); // use angles / ESC resets rotateY(angleYThatIs); fill(RED); stroke(111); box(100); // main box // 4 decorations cubes smallCubeRelativePos(0, -65, 0, GREEN); // Top smallCubeRelativePos(0, 65, 0, PINK); // Bottom smallCubeRelativePos(65, 0, 0, BLUE); // right smallCubeRelativePos(-65, 0, 0, YELLOW); // left popMatrix(); } void smallCubeRelativePos (float x_, float y_, float z_, color col_) { // draws a small Cube from a Relative Pos x,y,z and color col pushMatrix(); translate(x_, y_, z_); fill(col_); box(28); popMatrix(); } void HUD() { // Head-up-Display (HUD) camera() ; noLights(); // TOP Text // Title textSize(32); textAlign(CENTER, CENTER); fill(0); text (title, width / 2, 30); // Help textSize(14); text (helpText, width / 2, 90); // reset textAlign(LEFT); } // New version New version, in which first angle x is handled, and afterwards angle y Visually, this makes it easier to understand what’s going on. It’s especially good when clicking Escape key or click the mouse right button It’s less good when dragging the mouse since the rotation is not complete // "Demo for Easing" final String title = "Demo for Easing"; final String helpText = "Use right mouse button (click or drag). Use Escape key."; final color RED = color(255, 0, 0); final color GREEN = color(0, 255, 0); final color BLUE = color(0, 0, 255); final color YELLOW = color(240, 240, 0); final color PINK = color(0, 240, 240); // for the graphical representation, 2 pairs coupled with easing float angleXThatIs; // current angles, used for displaying the cube float angleYThatIs; float angleXDesired; // the angles entered by the mouse (requested by the user) float angleYDesired; // -------------------------------------------------------------------- // Core functions void setup() { size(1300, 700, P3D); } void draw() { background(255); lights(); // read mouse to change angles angleXDesired and angleYDesired ---- if (mousePressed && mouseButton==RIGHT) { angleXDesired=map(mouseY, 0, height, PI, -PI); angleYDesired=map(mouseX, 0, width, -PI, PI); } // calc the current angles // we start with angle X // println(abs(angleXDesired-angleXThatIs)); // calc the current angle angleXThatIs with easing (this is done throughout) angleXThatIs += (angleXDesired-angleXThatIs)*0.08; // below a certain value we stop x if (abs(angleXDesired-angleXThatIs)<0.02) angleXThatIs = angleXDesired; // when x is done, we start y if (abs(angleXDesired-angleXThatIs) == 0.0) { // calc the current angle angleYThatIs with easing (this is done throughout) angleYThatIs += (angleYDesired-angleYThatIs)*0.08; // below a certain value we stop y if (abs(angleYDesired-angleYThatIs)<0.02) angleYThatIs = angleYDesired; } // Show the cube/scene ----------------- showCube(); // HUD --------------------------------- HUD(); // The Texts } // -------------------------------------------------------------------- // Input functions // (mouse is read in draw()) void keyPressed() { if (key==ESC) { // reset view angleXDesired=0; angleYDesired=0; key=0; // kill Esc } } // -------------------------------------------------------------------- // Other functions void showCube() { // pushMatrix(); translate (width/2, height/2+98); rotateX(angleXThatIs); // use angles / ESC resets rotateY(angleYThatIs); fill(RED); stroke(111); box(100); // main box // 4 decorations cubes smallCubeRelativePos(0, -65, 0, GREEN); // Top smallCubeRelativePos(0, 65, 0, PINK); // Bottom smallCubeRelativePos(65, 0, 0, BLUE); // right smallCubeRelativePos(-65, 0, 0, YELLOW); // left popMatrix(); } void smallCubeRelativePos (float x_, float y_, float z_, color col_) { // draws a small Cube from a Relative Pos x,y,z and color col pushMatrix(); translate(x_, y_, z_); fill(col_); box(28); popMatrix(); } void HUD() { // Head-up-Display (HUD) camera() ; noLights(); // TOP Text // Title textSize(32); textAlign(CENTER, CENTER); fill(0); text (title, width / 2, 30); // Help textSize(14); text (helpText, width / 2, 90); // reset textAlign(LEFT); } //

How does this look? It does what I want, but is it clunky? Is there anything to clean up? An important feature I need is that the square rotates through an additional PI/4 every time the right arrow is pressed, hence the ‘rotations’ variable keeping track of how many times it’s been pressed. function setup() { createCanvas(400, 400); countdown = 100; rotations = 0; animate = false; } function keyPressed() { if (keyCode === RIGHT_ARROW) { animate = true; countdown = 100; } } function draw() { background(220); push(); translate(width / 2, height / 2); if (animate == true) { rotate((rotations + (100 - countdown) / 100) * (PI / 4)); rect(0, 0, 100, 100); countdown--; } else { rotate(rotations * (PI / 4)); rect(0, 0, 100, 100); } pop(); if (countdown == 0) { animate = false; rotations++; countdown = 100; } }

One caution any time you are doing division is whether you want your result to be an integer or a float. If you divide an integer by another integer, the result will be an integer. In this case, though, you want (100 - countdown) / 100 to be a float between 0.0 and 1.0. If the calculation is done on integers, you can only get a value of 0 or 1, but nothing in between. To ensure a float result, you want at least one of those values in the expression to be a float. You don’t show your declaration for countdown. If it’s a float, you’ll be good. Alternatively, leave it as an int and change the 100s to 100.0. Another problem is that you only want to check for the transition from rotating to stopping while you are rotating and not the rest of the time. That means your final check of if (countdown == 0) { should only be done inside the if block when animate == true. So move that whole second if block up to just below the countdown--; statement inside the first if block.

this is great, thank you. it performs the same before and after i make the changes you suggest, so i guess p5 is treating countdown as a float. i guess also that, although the performance looks the same to me, p5 has much less work to do if it’s not checking whether countdown equals 0 every time it runs through the code. again, thank you

Ah, right. You’re in javascript where every number is a float. I forgot. The other reason you need to keep the countdown == 0 check inside the first if is that you increase the rotations variable each time, so your object would continue rotating by PI/4 every frame. Try drawing a triangle instead of a square to see what happens if you don’t move it.

How to play a short animation upon interaction (rotate a shape)

p5.js Coding Questions

GoToLoop October 13, 2023, 5:14am 14

Another cube rotating example:

Topic		Replies	Views
Rotate arc in pacman animation Coding Questions	44	581	February 20, 2025
Rotate on Command Coding Questions	16	1483	November 3, 2019
Hello. I am just a beginner. I want to know how to complete a jump Coding Questions homework	13	961	October 25, 2020
Rotation and Easing Coding Questions	18	2286	November 3, 2019
First coded with blockly then P5 Gallery	3	484	August 19, 2019

How to play a short animation upon interaction (rotate a shape)

Related topics