Cube texture image is upside down

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.

``````PShape cube;
PImage img;

void setup() {
size(600, 600, P3D);
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);
}
``````

Current Output:

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

1 Like

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

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.

1 Like

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

``````PImage img;

void setup() {
size(600, 600, P3D);
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);
}
``````
4 Likes

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.

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

Hello @svan,

This will also scale the image:

``````PImage img;
PShape cube;

void setup() {
size(400, 400, P3D);
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);
}
``````

`:)`