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 se…

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: c…

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…

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, w…

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 …

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 …

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. functi…

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 do…

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 …

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 instea…

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	344	February 20, 2025
Rotate on Command Coding Questions	16	1421	November 3, 2019
Hello. I am just a beginner. I want to know how to complete a jump Coding Questions homework	13	932	October 25, 2020
Rotation and Easing Coding Questions	18	2203	November 3, 2019
First coded with blockly then P5 Gallery	3	475	August 19, 2019

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

Related topics