What are u v in 2d graphics?

DavidMatuszek

The explanations I have seen for u v are all for 3d images. I'm just trying to use textures in a 2d image, and I don't know what to use for u and v. The following does work:

  size(200, 200, P2D);
  PImage img = loadImage("/Users/dave/bricks.jpeg");
  beginShape();
    texture(img);
    vertex(50, 75, 50, 75);
    vertex(150, 75, 150, 75);
    vertex(150, 150, 150, 150);
    vertex(50, 150, 50, 150);
  endShape();

Here I've just used u=x and v=y. Will that always work?

quark

Here I've just used u=x and v=y. Will that always work?

No. It probably worked this time because the image (of bricks) is probably a highly tiled image so you don't notice. When experimenting with uv coordinates use an image that has no tiling so you can see exactly what is happening.

In lines 5-8 you are using the first two parameters to define the vertices of a quad on the screen.

The third and fourth parameters are used to define a quad on the image (using pixel positions). The part image defined by this quad is stretched over the display quad.

To use the whole image for the texture use

size(200, 200, P2D);
PImage img = loadImage("/Users/dave/bricks.jpeg");
beginShape();
texture(img);
  vertex(50, 75, 0, 0);
  vertex(150, 75, img.width, 0);
  vertex(150, 150, img.width, img.height);
  vertex(50, 150, 0, img.height);
endShape();

You might also look at the textureMode() method which changes the way the texture quad is defined.