# Rotate on Command

**URL:** <https://discourse.processing.org/t/rotate-on-command/14865>\
**Category:** Coding Questions\
**Created:** [October 21, 2019, 10:18pm UTC](https://discourse.processing.org/t/rotate-on-command/14865 "2019-10-21T22:18:57Z")\
**Posts on this page:** 17\
**Page:** 1

<div class="post-metadata">

**Author:** ![hahayes](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hahayes/32/6838_2.png) [@hahayes](https://discourse.processing.org/u/hahayes)\
**Post date:** [October 21, 2019, 10:18pm UTC](https://discourse.processing.org/t/rotate-on-command/14865/1 "2019-10-21T22:18:57Z")

</div>

I am attempting to make a cube that can rotate in any direction on command. I am currently trying to see if I can make it rotate at all on command, and I think that it does rotate, but I am trying to think about how to animate the rotation. Any help would be appreciated. Current code below.

```
boolean rotate=false;
void setup(){
  size(1000,1000,P3D);
  background(0);
  smooth();
  fill(255);
  strokeWeight(5);
}
void draw(){
  background(0);
  translate(width/2,height/2);
  if(rotate){
    rotateY(HALF_PI);
  }
  box(500);
}
void keyPressed(){
  if(key==CODED){
    if(keyCode==UP){
      rotate=true;
    }
  }
}
```

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [October 21, 2019, 10:28pm UTC](https://discourse.processing.org/t/rotate-on-command/14865/2 "2019-10-21T22:28:07Z")

</div>

3D looks better when using lights(); after background in draw

Anyway code looks good.

Does it work? When you press UP?

An animation would be possible when you have an angle variable that you use with rotateY and then say angle += 0.21; when rotate is true

This animation could stop when angle reached HALF\_PI or a maximum value that would be increased by 1 every time UP is hit

---

<div class="post-metadata">

**Author:** ![hahayes](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hahayes/32/6838_2.png) [@hahayes](https://discourse.processing.org/u/hahayes)\
**Post date:** [October 22, 2019, 3:06am UTC](https://discourse.processing.org/t/rotate-on-command/14865/3 "2019-10-22T03:06:42Z")

</div>

I have attempted to integrate what you have suggested, but it may not be the way you thought of it.

```auto
boolean rotate=false;
float angle=0;
void setup(){
  size(1000,1000,P3D);
  background(0);
  smooth();
  noFill();
  stroke(255);
}
void draw(){
  background(0);
  translate(width/2,height/2);
  box(500);
  if(rotate){
    rotateY(angle);
    angle+=0.0001;
  }
}
void keyPressed(){
  if(key==CODED){
    if(keyCode==UP){
      rotate=true;
    }
  }
}

```

I thought that by making the rotateY depend on the angle variable. I made it so that when rotate is true, the angle variable starts to increase in value, and the rotateY would rotate at the angle variable. However, it did not work. I think that it has something to do with the rotateY and the angle value.

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [October 22, 2019, 4:01am UTC](https://discourse.processing.org/t/rotate-on-command/14865/4 "2019-10-22T04:01:15Z")

</div>

like that?

```auto
boolean rotate=false;
float angle=0;

void setup() {
  size(1000, 1000, P3D);
  noFill();
  stroke(255);
  println("use key [space] for animation");
}

void draw() {
  background(0);
  angle += 0.001;
  translate(width/2, height/2);
  if (rotate) rotateY(angle);
  box(500);
}

void keyPressed() {
  if (key == ' ' ) rotate = !rotate;
}

```

---

<div class="post-metadata">

**Author:** ![hahayes](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hahayes/32/6838_2.png) [@hahayes](https://discourse.processing.org/u/hahayes)\
**Post date:** [October 22, 2019, 10:29pm UTC](https://discourse.processing.org/t/rotate-on-command/14865/5 "2019-10-22T22:29:58Z")

</div>

I tested the code you posted, and I liked how it worked, although when I pressed space again, the box was reset back to its original person. I looked at the code, and I believe this is because the box is put after the rotation code.

```auto
boolean rotateU=false;
boolean rotateD=false;
boolean rotateL=false;
boolean rotateR=false;
float angleX=0;
float angleY=0;
float anglechgU=HALF_PI/90;
float anglechgD=HALF_PI/90;
float anglechgL=HALF_PI/90;
float anglechgR=HALF_PI/90;
void setup() {
  size(1000,1000,P3D);
  noFill();
  stroke(255);
  println("press a to rotate right, b for left");
}
void draw(){
  background(0);
  translate(width/2,height/2);
  if(rotateU){
    rotateX(angleX);
    angleX+=anglechgU;
  }else{
    anglechgU=0;
  }
  if(rotateD){
    rotateX(angleX);
    angleX-=anglechgD;
  }else{
    anglechgD=0;
  }
  if(rotateL){
    rotateY(angleY);
    angleY-=anglechgL;
  }else{
    anglechgL=0;
  }
  if(rotateR){
    rotateY(angleY);
    angleY+=anglechgR;
  }else{
    anglechgR=0;
  }
  box(500);
}
void keyPressed(){
  if(key=='w'){
    rotateU=!rotateU;
  }
  if(key=='s'){
    rotateD=!rotateD;
  }
  if(key=='a'){
    rotateL=!rotateL;
  }
  if(key=='d'){
    rotateR=!rotateR;
  }
}

```

I edited the code to my liking, and created some new variables to make the rotation a little more regulated. I still do not understand why the box keeps reappearing in its original position.

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [October 22, 2019, 10:54pm UTC](https://discourse.processing.org/t/rotate-on-command/14865/6 "2019-10-22T22:54:50Z")

</div>

> [@hahayes](#):
>
> I still do not understand why the box keeps reappearing in its original position.

That’s probaly because when you rotate 90 degrees and then 180 degree, they look exactly the same. Try instead of `float anglechgU=HALF_PI/90;` better `float anglechgU=HALF_PI/76;` so it’s not 90, then 180… which would look exactly the same…

**my idea**

here is my idea

```auto
boolean rotateU=false;
boolean rotateD=false;
boolean rotateL=false;
boolean rotateR=false;

float angleX=0;
float angleY=10;

float anglechgU=HALF_PI/90;
float anglechgD=HALF_PI/90;
float anglechgL=HALF_PI/90;
float anglechgR=HALF_PI/90;

float max1Add =HALF_PI/2.9; 
float max1=max1Add; 

void setup() {
  size(1000, 1000, P3D);
  noFill();
  stroke(255);
  println("press w to rotate ");
}

void draw() {
  background(0);

  fill(255);
  text("Use w to move on", 19, 19);

  lights(); 

  translate(width/2, height/2);
  rotateX(angleX);

  if (rotateU) {
    angleX+=anglechgU;

    if (angleX>=max1) {
      anglechgU=0;
      rotateU=false;
      max1+=max1Add;
    } else {
      //
    }
  }

  fill(255, 0, 0); 
  box(500);
}

void keyPressed() {
  if (key=='w') {
    rotateU=true;
    anglechgU=HALF_PI/90;
  }
}

```

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [October 23, 2019, 12:01am UTC](https://discourse.processing.org/t/rotate-on-command/14865/7 "2019-10-23T00:01:56Z")

</div>

Hello,

Working with your code only…

> [@hahayes](#):
>
> I still do not understand why the box keeps reappearing in its original position.

You are setting them to “original” position in your code in the “else” part of if statement.

Comment out all your else statements:

```auto
if(rotateU){
    //rotateX(angleX);
    angleX+=anglechgU;
  }
  //else{
  // //anglechgU=0;
  //}

```

Move the rotateX() and rotate(Y) from the if statements to:

```auto
  rotateY(angleY);
  rotateX(angleX); 
  box(500);

```

Use a key like “r” to reset everything in a separate if statement.

🙂

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [October 23, 2019, 1:13am UTC](https://discourse.processing.org/t/rotate-on-command/14865/8 "2019-10-23T01:13:56Z")

</div>

> anyhow you got the main idea:

- translate
- rotate
- box

next step could be some mouse integration?

---

<div class="post-metadata">

**Author:** ![hahayes](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hahayes/32/6838_2.png) [@hahayes](https://discourse.processing.org/u/hahayes)\
**Post date:** [October 23, 2019, 4:53am UTC](https://discourse.processing.org/t/rotate-on-command/14865/9 "2019-10-23T04:53:09Z")

</div>

> [@Chrisir](#):
>
> they look exactly the same.

I am actually planning to get the sides of cube to have different colors, so I was hoping to get the rotation down first, before putting the colors in the desired positions.

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [October 23, 2019, 11:05am UTC](https://discourse.processing.org/t/rotate-on-command/14865/10 "2019-10-23T11:05:53Z")

</div>

> [@hahayes](#):
>
> they look exactly the same.

I didn’t mean the colors of the sides.

I was referring to your sentence:

> I still do not understand why the box keeps reappearing in its original position.

That’s because when you have rotation by certain amounts, after 90 degree rotation they are the same angle. See my example where I avoid that.

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [October 23, 2019, 2:30pm UTC](https://discourse.processing.org/t/rotate-on-command/14865/11 "2019-10-23T14:30:47Z")

</div>

Hello,

This is not correct:

> [@Chrisir](#):
>
> after 90 degrees rotation, they are the same angle.

This should be “after 360”.  
They are not “the same angle”; mathematically sin(θ) = sin( θ+360) and will yield the same rotation and plot in this example.

I am sure this was just a typo!

Processing reference:  
[https://processing.org/tutorials/trig/](https://processing.org/tutorials/trig/)

🙂

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [October 23, 2019, 4:03pm UTC](https://discourse.processing.org/t/rotate-on-command/14865/12 "2019-10-23T16:03:49Z")

</div>

> [@glv](#):
>
> after 90 degrees rotation, they are the same angle.

😉

I mean: after 90 degrees they look the same as 0 degrees, 180 degrees, 270 degrees, when you rotate around one axis only. So better around by 76 degrees for example

---

<div class="post-metadata">

**Author:** ![hahayes](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hahayes/32/6838_2.png) [@hahayes](https://discourse.processing.org/u/hahayes)\
**Post date:** [October 23, 2019, 9:05pm UTC](https://discourse.processing.org/t/rotate-on-command/14865/13 "2019-10-23T21:05:35Z")

</div>

by that i meant that after I deactivate the rotation command, the box appears in its original position after the rotation stops, even if it does not rotate 90 degrees.

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [October 23, 2019, 9:07pm UTC](https://discourse.processing.org/t/rotate-on-command/14865/14 "2019-10-23T21:07:05Z")

</div>

ah, never mind.

That was because rotateX was inside the if I think:

```auto
  if(rotateU){
    rotateX(angleX);

```

---

<div class="post-metadata">

**Author:** ![hahayes](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hahayes/32/6838_2.png) [@hahayes](https://discourse.processing.org/u/hahayes)\
**Post date:** [October 23, 2019, 9:11pm UTC](https://discourse.processing.org/t/rotate-on-command/14865/15 "2019-10-23T21:11:53Z")

</div>

I have taken your idea and used the rotation code bits to rotate the cube along the Y axis as well as the X axis originally.

```auto
boolean rotateU=false;
boolean rotateD=false;
boolean rotateL=false;
boolean rotateR=false;
float angleX=0;
float angleY=0;
float anglechgU=HALF_PI/60;
float anglechgD=HALF_PI/60;
float anglechgL=HALF_PI/60;
float anglechgR=HALF_PI/60;
float max1Add=HALF_PI;
float max2Add=HALF_PI;
float max1=max1Add;
float max2=max2Add;
void setup(){
  size(1000,1000,P3D);
  noFill();
  stroke(255);
  println("press w to rotate ");
}
void draw(){
  background(0);
  fill(255);
  text("Use w to rotate Up",19,19);
  text("Use s to rotate Down",19,38);
  text("Use a to rotate Left",19,57);
  text("Use d to rotate Right",19,76);
  lights(); 
  translate(width/2,height/2);
  rotateX(angleX);
  if(rotateU){
    angleX+=anglechgU;
    if(angleX>=max1){
      anglechgU=0;
      rotateU=false;
      max1+=max1Add;
    }
  }
  if(rotateD){
    angleX-=anglechgD;
    if(angleX<=max1){
      anglechgD=0;
      rotateD=false;
      max1-=max1Add;
    }
  }
  rotateY(angleY);
  if(rotateL){
    angleY-=anglechgL;
    if(angleY<=max2){
      anglechgL=0;
      rotateL=false;
      max2-=max2Add;
    }
  }
  if(rotateR){
    angleY+=anglechgR;
    if(angleY>=max2){
      anglechgR=0;
      rotateR=false;
      max2+=max2Add;
    }
  }
  fill(255,0,0); 
  box(500);
  println("X angle=",angleX);
  println("Y angle=",angleY);
}
void keyPressed(){
  if(key=='w'){
    rotateU=true;
    anglechgU=HALF_PI/60;
  }
  if(key=='s'){
    rotateD=true;
    anglechgD=HALF_PI/60;
  }
  if(key=='a'){
    rotateL=true;
    anglechgL=HALF_PI/60;
  }
  if(key=='d'){
    rotateR=true;
    anglechgR=HALF_PI/60;
  }
}

```

I think that I will need to create some vectors for the rotation code, because when I rotate the cube in the desired direction, for example, rotate it upward 90 deg/.5 pi, it seems that the entire dimensional plane moves around with it, because after the X rotation is finished, and if I rotate it to the right by pressing d, it seems like the cube rotates along its Z axis. In fact, it is actually rotating along the angleY variable with the rotateY bit I put in there. The two println functions in there were used to prove this.

---

<div class="post-metadata">

**Author:** ![hahayes](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hahayes/32/6838_2.png) [@hahayes](https://discourse.processing.org/u/hahayes)\
**Post date:** [October 23, 2019, 10:29pm UTC](https://discourse.processing.org/t/rotate-on-command/14865/16 "2019-10-23T22:29:11Z")

</div>

I thought so, but I was not sure, so i guess this is confirmation.

---

<div class="post-metadata">

**Author:** ![clankill3r](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/clankill3r/32/1098_2.png) [@clankill3r](https://discourse.processing.org/u/clankill3r)\
**Post date:** [November 3, 2019, 9:02pm UTC](https://discourse.processing.org/t/rotate-on-command/14865/17 "2019-11-03T21:02:46Z")

</div>

You don’t need a `void keyPressed`, you can check in `void draw` if a key is pressed.

```auto
if (keyPressed) {
    if (key == 'r' ) {
     ...

```