旋转一维 RGBA 数组

Question

我正在使用如下所示的一维像素 RGBA 阵列：

pixelArray =[0,0,0,255,0,0,0,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255];

这个pixelArray绘制时对应的是2个黑色像素和4个白色像素：

BB
WW
WW

我的目标是旋转数组中像素的顺序，使绘制的图片看起来像

BWW  or WWB
BWW     WWB

这意味着我需要将 pixelArray 转换为

rotatedPixelArray = [0,0,0,255,255,255,255,255,255,255,255,255,0,0,0,255,255,255,255,255,255,255,255,255]

上面的例子只是一个例子。实际的 rgba 可以代表任何图像，并且可以有 100 万 + 的长度。我已经尝试了各种算法 like this，并转换为二维数组，然后旋转和展平（这确实有效）但我想避免这种情况，因为 speed/memory 是一个问题。

Answer 1

所以我想通了，在我的例子中，它需要向左或向右旋转。我使用的代码如下：

function rotatePixelArray(pixelArray,w,h) {
  var rotatedArray = [];

  for (var x=0;x<w;x++) {
    for(var y=0;y<h;y++) {
      index = (x+y*w)*4;
      rotatedArray.push(pixelArray[index]);
      rotatedArray.push(pixelArray[index+1]);
      rotatedArray.push(pixelArray[index+2]);
      rotatedArray.push(pixelArray[index+3]);
    }
  }

  return rotatedArray;
}

要将其旋转回来，您可以传入切换的 w、h 变量。

Answer 2

也许这对 p5.js 90 度旋转（左和右）有帮助（之前建议的解决方案似乎有一点 'asymmetric' 错误）：

function rotateRight(img){

  var w = img.width;
  var h = img.height;
  var index, indexr;
  var img2 = createImage(w, h);

  img.loadPixels();
  img2.loadPixels();

  indexr = 0;

  for (let x = 0; x < w; x++) {

    for(let y = h - 1; y >= 0; y--) {

      index = (x+y*w)*4;
      img2.pixels[indexr] = img.pixels[index];
      img2.pixels[indexr + 1] = img.pixels[index+1];
      img2.pixels[indexr + 2] = img.pixels[index+2];
      img2.pixels[indexr + 3] = img.pixels[index+3];

      indexr += 4;

    }
  }

  img.updatePixels();
  img2.updatePixels();

  return img2;

}


function rotateLeft(img){

  var w = img.width;
  var h = img.height;
  var index, indexr;
  var img2 = createImage(w, h);

  img.loadPixels();
  img2.loadPixels();

  indexr = 0;

  for (let x = w - 1; x >= 0; x--) {

    for(let y = 0; y < h; y++) {

      index = (x+y*w)*4;
      img2.pixels[indexr] = img.pixels[index];
      img2.pixels[indexr + 1] = img.pixels[index+1];
      img2.pixels[indexr + 2] = img.pixels[index+2];
      img2.pixels[indexr + 3] = img.pixels[index+3];

      indexr += 4;

    }
  }

  img.updatePixels();
  img2.updatePixels();

  return img2;

}

旋转一维 RGBA 数组

Rotating a 1d RGBA array

javascript

arrays

rotation

p5.js