Cube texture image is upside down

Processing Coding Questions
1

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); 
  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

Current Output:

output
output508×502 6.95 KB

2

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

1 Like
3

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

4

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
5

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); 
  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);
}
4 Likes
6

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.

7

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

You are now inside the box looking out :grinning:

8

Hello @svan,

This will also scale the image:

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

Reference:
https://processing.org/reference/PShape.htm

:)