显示数组排序

Question

假设我有一个二维像素网格（4 x 4 像素）- 并且我有一张与我的草图大小相同的图像，已被切割成 16 个部分。现在我将所有 16 个部分加载到一个数组中。我想依次将这个数组映射到 2D 网格上，以便我的整体图像再次正确组合在一起。即，左上图 0.png 和右下图 16.png.

我只是找不到允许我这样做的公式。例如，我知道使用 x+y*width 你可以运行穿过所有像素——从左上角到右下角——所以我试过了。没有 *width 它不能正确地放在一起 - 使用 x+y*width- ArrayIndexOutOfBoundsException（当然）。

所以我想我需要一个二维数组 - 但是 images[x][y] 我得到一个 NullPointerException。我附上了一张我正在尝试创建的图片：

到目前为止，这是我的代码——没有二维数组……

float pixelamount = 4;
float pixelsize;

PImage[] images = new PImage [16];

void setup() {
  size(1080, 1080);
  pixelsize = width/pixelamount;
  for (int i = 0; i < images.length; i++) {
    images[i] = loadImage(i + ".png");
  }
  imageMode(CENTER);
}

void draw() {
  background(0);
  pushMatrix();
  translate(pixelsize/2, pixelsize/2);
  for (int x = 0; x < pixelamount; x++) {
    for (int y = 0; y < pixelamount; y++) {
      pushMatrix();
      translate(pixelsize*x, pixelsize*y);
      image(images[x+y], 0, 0, pixelsize, pixelsize);
      popMatrix();
    }
  }
  popMatrix();
}

正如我所说——在 image(images[x+y], 0, 0, pixelsize, pixelsize); 行中，我只是没有正确计算。我需要一个二维数组来解决这个问题吗？或者完全不同的东西？

Answer 1

没有二维数组应该可以解决这个问题。

如果字段的尺寸已知为 4x4，那么循环可能应该运行从 0 到 4，如下所示：

void draw() {
  background(0);
  pushMatrix();
  translate(pixelsize/2, pixelsize/2);
  for (int x = 0; x < 4; x++) {
    for (int y = 0; y < 4; y++) {
      pushMatrix();
      translate(pixelsize * x, pixelsize * y);
      image(images[4 * x + y], 0, 0, pixelsize, pixelsize);
      popMatrix();
    }
  }
  popMatrix();
}

Answer 2

基于最新的答案——这是我的代码——运行完美！

float pixelamount = 4;
float pixelsize;

PImage[] images = new PImage [16];

void setup() {
  size(1080, 1080);
  pixelsize = width/pixelamount;
  for (int i = 0; i < images.length; i++) {
    images[i] = loadImage(i + ".png");
  }
  imageMode(CENTER);
}

void draw() {
  background(0);
  pushMatrix();
  translate(pixelsize/2, pixelsize/2);
  for (int x = 0; x < pixelamount; x++) {
    for (int y = 0; y < pixelamount; y++) {
      pushMatrix();
      translate(pixelsize * x, pixelsize * y);
      image(images[x + y * int(pixelamount)], 0, 0, pixelsize, pixelsize);
      popMatrix();
    }
  }
  popMatrix();
}

Answer 3

亚历克斯是正确的。 Cyrill，你走在正确的轨道上，但似乎对查看数据的 3 种方式感到困惑：

图像数组是一维数组（索引 0 到 15）
for 循环是嵌套的，因此您需要将二维索引转换为一维索引。你是对的：x+y*width 会给你正确的数组索引，但在这种情况下 width 不是草图的全宽（以像素为单位），而是网格的宽度（即列数4x4 网格：4)
您得到一个空指针指针，因为您正试图像访问二维数组一样访问一维数组中的元素。

像这样的东西应该可以工作：

float pixelamount = 4;
float pixelsize;

PImage[] images = new PImage [16];

void setup() {
  size(1080, 1080);
  pixelsize = width/pixelamount;
  for (int i = 0; i < images.length; i++) {
    images[i] = loadImage(i + ".png");
  }
  //imageMode(CENTER);
}

void draw() {
  background(0);
  pushMatrix();
  translate(pixelsize/2, pixelsize/2);
  for (int x = 0; x < pixelamount; x++) {
    for (int y = 0; y < pixelamount; y++) {
      pushMatrix();
      translate(pixelsize*x, pixelsize*y);
      image(images[x + y * pixelamount], 0, 0, pixelsize, pixelsize);
      popMatrix();
    }
  }
  popMatrix();
}

如果您想使用与您存储数据的方式匹配的单个 for 循环（而不是嵌套 for 循环）进行循环，您可以使用此公式从 1D 索引转到 2D 索引：

x = index % gridColumns
y = index / gridColumns

（记住这些是整数（所以在其他语言中（比如 Python/JS/etc。）你会注意除法运算））

这里有一个基本的例子来说明这一点：

size(1080, 1080);
textAlign(CENTER, CENTER);
textFont(createFont("Courier New Bold", 12));

int pixelAmount = 4;
int pixelSize = width/pixelAmount;

int gridColumns = 4;

// iterate once
for(int i = 0; i < 16; i++){
  // calculate 2D grid indices
  int xIndex = i % gridColumns;
  int yIndex = i / gridColumns;
  // convert from index to pixel size
  int x = xIndex * pixelSize;
  int y = yIndex * pixelSize;
  // render debug data
  String debugText = "1D index:" +  i + 
                     "\n2D indices:[" + xIndex + "][" + yIndex + "]" +
                     "\nx, y pixels::" +  x + "," + y;
  
  fill(255);
  rect(x, y, pixelSize, pixelSize);
  fill(0);
  text(debugText, x + pixelSize / 2, y + pixelSize / 2);
  
}

下面是使用二维数组和嵌套循环的相同示例：

size(1080, 1080);
textAlign(CENTER, CENTER);
textFont(createFont("Courier New Bold", 12));

int pixelAmount = 4;
int pixelSize = width/pixelAmount;

int[][] grid = new int[pixelAmount][pixelAmount];

// mimick image loading (storing 1D index)
int index = 0;
for(int y = 0; y < pixelAmount; y++)
  for(int x = 0; x < pixelAmount; x++)
    grid[x][y] = index++;

// mimick reading 2D array data
for(int y = 0; y < pixelAmount; y++){
  for(int x = 0; x < pixelAmount; x++){
    
    int xPixels = x * pixelSize;
    int yPixels = y * pixelSize;
    
    // manually copute index
    // index = x + y * pixelAmount;
    // or retrieve stored index
    index = grid[x][y];
    
    String debugText = "1D index:" +  index + ".png" +
                     "\n2D indices:[" + x + "][" + y + "]" +
                     "\nx, y pixels::" +  xPixels + "," + yPixels;
  
  fill(255);
  rect(xPixels, yPixels, pixelSize, pixelSize);
  fill(0);
  text(debugText, xPixels + pixelSize / 2, yPixels + pixelSize / 2);
  }
}

我的回答更多是为了完整性：显示查看数据的 1D/2D 方式。

显示数组排序

display array sorted

java

arrays

sorting

processing