# Rotating in 3D Help

**URL:** <https://discourse.processing.org/t/rotating-in-3d-help/2573>\
**Category:** Processing\
**Created:** [August 12, 2018, 2:07pm UTC](https://discourse.processing.org/t/rotating-in-3d-help/2573 "2018-08-12T14:07:20Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![CrispyCabot](https://avatars.discourse-cdn.com/v4/letter/c/8edcca/32.png) [@CrispyCabot](https://discourse.processing.org/u/CrispyCabot)\
**Post date:** [August 12, 2018, 2:07pm UTC](https://discourse.processing.org/t/rotating-in-3d-help/2573/1 "2018-08-12T14:07:20Z")

</div>

So I’m trying to make a gamecube intro that draws out my own thing using simple boxes, but I don’t understand rotation. I’ve tried looking at the reference and all, but it just still doesn’t make sense to me. Basically, I would assume rotateX() rotates around the x axis, so like rotating 180 degrees it should look flat, shouldn’t it? but it doesn’t. For example [this](https://gyazo.com/0dc4ef10c866545fa05e457befd61bbc) has the same rotation all the way throughout, but it clearly looks different in different parts of the screen. So basically I’m just asking for some explanation of how 3d rotation works.

---

<div class="post-metadata">

**Author:** ![WakeMeAtThree](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/wakemeatthree/32/38_2.png) [@WakeMeAtThree](https://discourse.processing.org/u/WakeMeAtThree)\
**Post date:** [August 12, 2018, 2:16pm UTC](https://discourse.processing.org/t/rotating-in-3d-help/2573/2 "2018-08-12T14:16:12Z")

</div>

The screenshot you linked to just shows cube being translated along the same axis. They’re not rotating, but you’re seeing different sides of them because of perspective projection.

The [game cube intro](https://www.youtube.com/watch?v=CpmYW-gCSy4) uses [orthographic projection](https://processing.org/reference/ortho_.html), with the rotation axis being at the edge of the cube that coincides with the ground (or cube side as it goes down). Check out the documentation for 3d transformations that you may be able to use, like [rotateX](https://processing.org/reference/rotateX_.html), [rotateY](https://processing.org/reference/rotateY_.html), or [rotateZ](https://processing.org/reference/rotateZ_.html).

---

<div class="post-metadata">

**Author:** ![TfGuy44](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tfguy44/32/41_2.png) [@TfGuy44](https://discourse.processing.org/u/TfGuy44)\
**Post date:** [August 12, 2018, 2:22pm UTC](https://discourse.processing.org/t/rotating-in-3d-help/2573/3 "2018-08-12T14:22:42Z")

</div>

As WakeMeAtThree said, the cubes are not rotated - they look that way due to a perspective view.

Compare:

```auto
color[] colors = { color(200,0,0), color(0,200,0), color(0,0,200) };

void setup() {
  size(600, 400, P3D);
}

void draw() {
  background(0);
  translate(width/2, height/2);
  lights();  
  noStroke();
  for ( int i = -3; i < 4; i++) {
    pushMatrix();
    translate(i*100, 0, 0);
    fill(colors[(i+3)%colors.length]);
    box(40);
    popMatrix();
  }
}

```

To this:

```auto
color[] colors = { color(200,0,0), color(0,200,0), color(0,0,200) };

void setup() {
  size(600, 400, P3D);
  ortho();
}

void draw() {
  background(0);
  translate(width/2, height/2);
  lights();  
  noStroke();
  for ( int i = -3; i < 4; i++) {
    pushMatrix();
    translate(i*100, 0, 0);
    fill(colors[(i+3)%colors.length]);
    box(40);
    popMatrix();
  }
}

```

Notice that the only change is in setup(): the line `ortho();` is added. This causes the camera to draw things so that the Z distance of a point doesn’t change it’s x/y position.

Now you can rotate these cubes:

```auto
color[] colors = { color(200,0,0), color(0,200,0), color(0,0,200) };

void setup() {
  size(600, 400, P3D);
  ortho();
}

void draw() {
  background(0);
  translate(width/2, height/2);
  lights();  
  noStroke();
  for ( int i = -3; i < 4; i++) {
    pushMatrix();
    translate(i*100, 0, 0);
    switch ((i+3)%3){
      case 0:
        rotateX(map(millis(),0,5000,0,TWO_PI));
        break;
      case 1:
        rotateY(map(millis(),0,5000,0,TWO_PI));
        break;
      case 2:
        rotateZ(map(millis(),0,5000,0,TWO_PI));
        break;
    }
    fill(colors[(i+3)%colors.length]);
    box(40);
    popMatrix();
  }
}

```

Notice that with ortho camera on, this looks kind of flat for a 3D view.

```auto
color[] colors = { color(200,0,0), color(0,200,0), color(0,0,200) };

void setup() {
  size(600, 400, P3D);
}

void draw() {
  background(0);
  translate(width/2, height/2);
  lights();  
  noStroke();
  for ( int i = -3; i < 4; i++) {
    pushMatrix();
    translate(i*100, 0, 0);
    switch ((i+3)%3){
      case 0:
        rotateX(map(millis(),0,5000,0,TWO_PI));
        break;
      case 1:
        rotateY(map(millis(),0,5000,0,TWO_PI));
        break;
      case 2:
        rotateZ(map(millis(),0,5000,0,TWO_PI));
        break;
    }
    fill(colors[(i+3)%colors.length]);
    box(40);
    popMatrix();
  }
}

```

This looks more 3D-ish.