处理：高效创建均匀网格

Question

我试图创建一个图像网格（以一种将平铺背景的方式）。以下是我一直在使用的：

PImage bgtile;
PGraphics bg;
int tilesize = 50;

void setup() {
  
  int t = millis();
  
  fullScreen(P2D);
  background(0);
  
  bgtile = loadImage("bgtile.png");
  int bgw = ceil( ((float) width) / tilesize) + 1;
  int bgh = ceil( ((float) height) / tilesize) + 1;
  
  
  
  bg = createGraphics(bgw*tilesize,bgh*tilesize);
  bg.beginDraw();
  for(int i = 0; i < bgw; i++){
    for(int j = 0; j < bgh; j++){
      bg.image(bgtile, i*tilesize, j*tilesize, tilesize, tilesize);
    }
  }
  bg.endDraw();
  
  print(millis() - t);
 
}

计时代码说这需要大约四分之一秒，但根据我的计算，一旦窗口打开，屏幕上就会出现任何东西（这应该在第一次运行draw时发生）。有没有更快的方法可以得到同样的效果？（我想避免在绘制循环中呈现bgtile数百次，原因显而易见）

Answer 1

一种方法是利用GPU，让OpenGL为您重复一个纹理。处理使得通过texturewrap(repeat)重复纹理变得相当容易

不绘制图像，您可以创建自己的四方形状，例如，不调用顶点(x，y)，而是调用顶点(x，y，u，v)；传递纹理坐标（上面OpenGL链接中的更多低级信息）。简单的想法是x，y将控制屏幕上的几何图形，u，v将控制纹理如何应用于几何图形。

您可以控制的另一件事是texturemode()，它允许您控制如何指定纹理坐标（U,V）：

null

PImage img;

void setup() {
  fullScreen(P2D);
  noStroke();
  img = loadImage("https://processing.org/examples/moonwalk.jpg");
  // texture mode can be IMAGE (pixel dimensions) or NORMAL (0.0 to 1.0)
  // normal means 1.0 is full width (for U) or height (for V) without having to know the image resolution 
  textureMode(NORMAL);
  // this is what will make handle tiling for you
  textureWrap(REPEAT);
}
void draw() {
  // drag mouse on X axis to change tiling
  int tileRepeats = (int)map(constrain(mouseX,0,width), 0, width, 1, 100);
  // draw a textured quad
  beginShape(QUAD);
  // set the texture 
  texture(img);
  //     x    , y     , U          , V
  vertex(0    , 0     , 0          , 0);
  vertex(width, 0     , tileRepeats, 0);
  vertex(width, height, tileRepeats, tileRepeats);
  vertex(0    , height, 0          , tileRepeats);
  endShape();
  text((int)frameRate+"fps",15,15);
}