# Cube texture image is upside down

**URL:** <https://discourse.processing.org/t/cube-texture-image-is-upside-down/39233>\
**Category:** Coding Questions\
**Created:** [October 12, 2022, 7:30pm UTC](https://discourse.processing.org/t/cube-texture-image-is-upside-down/39233 "2022-10-12T19:30:44Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![svan](https://avatars.discourse-cdn.com/v4/letter/s/82dd89/32.png) [@svan](https://discourse.processing.org/u/svan)\
**Post date:** [October 12, 2022, 7:30pm UTC](https://discourse.processing.org/t/cube-texture-image-is-upside-down/39233/1 "2022-10-12T19:30:44Z")

</div>

I’m trying to place an image with text on the outside of a cube. The code below works well except for the fact that the text is upside down. How would I flip the text (img), either in PGraphics when the image is constructed or in the code below. Attached is the image that I used.

```auto
PShape cube;
PImage img;

void setup() { 
  size(600, 600, P3D); 
  img = loadImage("test.png");
  cube = createShape(BOX, 200);
  cube.setStroke(false);
  cube.setTexture(img);
}

void draw() { 
  background(255);
  translate(width/2, height/2); 
  rotateY(map(mouseX, 0, width, -PI, PI));
  rotateX(map(mouseY, 0, width, -PI, PI));
  shape(cube);
}

```

![test](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/0/c/0c079ce23ffb64be5fc15cc0f74d116ebe636179.png)

**Current Output:**

 ![output](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/f/0/f0519a272d671c14c3325402136dfcf6910570e3.png)

---

<div class="post-metadata">

**Author:** ![quark](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/quark/32/26_2.png) [@quark](https://discourse.processing.org/u/quark)\
**Post date:** [October 12, 2022, 7:49pm UTC](https://discourse.processing.org/t/cube-texture-image-is-upside-down/39233/2 "2022-10-12T19:49:23Z")

</div>

> [@svan](#):
>
> `cube = createShape(BOX, 200);`

I suggest that you either reverse the order you specify the vertices or reverse the texture coordinates when you create the shape.

---

<div class="post-metadata">

**Author:** ![svan](https://avatars.discourse-cdn.com/v4/letter/s/82dd89/32.png) [@svan](https://discourse.processing.org/u/svan)\
**Post date:** [October 12, 2022, 8:15pm UTC](https://discourse.processing.org/t/cube-texture-image-is-upside-down/39233/3 "2022-10-12T20:15:17Z")

</div>

@quark Not sure I understand. Are you suggesting that I create a custom cube as opposed to using the one pre-supplied by Processing?

---

<div class="post-metadata">

**Author:** ![quark](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/quark/32/26_2.png) [@quark](https://discourse.processing.org/u/quark)\
**Post date:** [October 12, 2022, 8:51pm UTC](https://discourse.processing.org/t/cube-texture-image-is-upside-down/39233/4 "2022-10-12T20:51:22Z")

</div>

> [@svan](#):
>
> cube = createShape(BOX, 200);

Sorry my mistake I didn’t realise it was a Processing pre-defined shape. I’ll recreate the sketch and see if I can find a solution.

---

<div class="post-metadata">

**Author:** ![quark](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/quark/32/26_2.png) [@quark](https://discourse.processing.org/u/quark)\
**Post date:** [October 12, 2022, 9:07pm UTC](https://discourse.processing.org/t/cube-texture-image-is-upside-down/39233/5 "2022-10-12T21:07:24Z")

</div>

In OpenGL the positive y axis is vertically up but in Processing they reversed the Y axis direction so it is the same as Java mode

```
OpenGL Processing
  Y -------------X
  | |
  | |
  | |
  | |
  ------------X Y
```

My solution is simple to invert the Y axis like this

```auto
PImage img;

void setup() { 
  size(600, 600, P3D); 
  img = loadImage("test.png");
  cube = createShape(BOX, 200);
  cube.setStroke(false);
  cube.setTexture(img);
}

void draw() { 
  background(255);
  translate(width/2, height/2); 
  scale(1,-1); // ######## ADDED THIS LINE #########
  rotateY(map(mouseX, 0, width, -PI, PI));
  rotateX(map(mouseY, 0, width, -PI, PI));
  shape(cube);
}

```

---

<div class="post-metadata">

**Author:** ![svan](https://avatars.discourse-cdn.com/v4/letter/s/82dd89/32.png) [@svan](https://discourse.processing.org/u/svan)\
**Post date:** [October 12, 2022, 9:24pm UTC](https://discourse.processing.org/t/cube-texture-image-is-upside-down/39233/6 "2022-10-12T21:24:53Z")

</div>

I tried scale(), but I flipped x instead of y. OpenGL is apparently like MacOS view, origin is a bottom left instead of top left. Explanation was very helpful. Order is also important: scale() has to follow translate() otherwise output is a white screen; observed that too. Thanks.

---

<div class="post-metadata">

**Author:** ![quark](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/quark/32/26_2.png) [@quark](https://discourse.processing.org/u/quark)\
**Post date:** [October 13, 2022, 8:08am UTC](https://discourse.processing.org/t/cube-texture-image-is-upside-down/39233/7 "2022-10-13T08:08:52Z")

</div>

Glad to help. If you want to try something then increase the box size to 2000 and the image is reversed again. 🤔

You are now inside the box looking out 😀

---

<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 30, 2022, 2:55pm UTC](https://discourse.processing.org/t/cube-texture-image-is-upside-down/39233/8 "2022-10-30T14:55:21Z")

</div>

Hello @svan,

This will also scale the image:

```auto
PImage img;
PShape cube;

void setup() { 
  size(400, 400, P3D); 
  img = loadImage("test.png");
  cube = createShape(BOX, 200);
  cube.setStroke(false);
  cube.setTexture(img);
  cube.scale(-1, 1, 1);
}

void draw() { 
  background(255);
  translate(width/2, height/2); 
  shape(cube);
}

```

![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/e/b/eb3f48c10da3fd16b764b6391a4f9e236366b22c.png)

Reference:  
[https://processing.org/reference/PShape.htm](https://processing.org/reference/PShape.htm)

`:)`