使用 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 参数以及 returns 全色。同样，可以在 the reference.

中找到更多信息

Answer 2

非常感谢凯文的帮助，成功了。

  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];
  }

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

Wrong color when using loadPixels to copy image

processing

p5.js