使用loadPixels复制图像时颜色错误

Question

我正在尝试复制椭圆，以使其副本的中心点是使用pixels[]数组将像素数据复制到新位置的两个轴上原始位置的倒数。但是，副本的颜色与原始颜色不同（而不是黑色，而是粉红色）。颜色没有按照我的预期进行复制。为什么会这样？

---

这是代码：

function setup() {
  createCanvas(600, 600);
  smooth(8);
  rectMode(CENTER);
  fill(250);
  stroke(32);
  strokeWeight(10);
}

function draw() {
    draw_();
}

function draw_() {
  background(250); 
  ellipse(100, 100, 100, 100)
  loadPixels();
  for(var i=0; i<pixels.length/2; i++)
    pixels[pixels.length-i-1] = pixels[i];
  updatePixels();
}

---

这是结果：

Answer 1

根据the reference，pixels数组根据索引包含红色，绿色，蓝色和alpha成分的信息，如下所示：

pixels[0] = red(myColor);
pixels[1] = green(myColor);
pixels[2] = blue(myColor);
pixels[3] = alpha(myColor);

pixels[4] = red(myColor);
pixels[5] = green(myColor);
pixels[6] = blue(myColor);
pixels[7] = alpha(myColor);

//...

因此，如果仅反转阵列，就不会反转映像。您还将弄乱颜色：将交换红色和Alpha，以及绿色和蓝色。

使用get()函数可能会更好，该函数接受x和y参数并返回全彩。同样，可以在the reference中找到更多信息。

Answer 2

非常感谢Kevin的帮助，它确实有效。

  for(var i=0; i<pixels.length/2; i+=4) {
    pixels[pixels.length-i-4] = pixels[i];
    pixels[pixels.length-i-3] = pixels[i+1];
    pixels[pixels.length-i-2] = pixels[i+2];
    pixels[pixels.length-i-1] = pixels[i+3];
  }