将像素操作从 processig 转换为 p5.js 时出错

Question

我一直在尝试将简单的对比度和红色通道处理草图转换为 p5.js。

原始 .pde 使用 processing.js:

效果很好

// Declaring a variable of type PImage
PImage img;

void setup() {
  size(564, 698);
  // Make a new instance of a PImage by loading an image file
  img = loadImage("../image.jpg");
}

void draw() {
  loadPixels();

  // We must also call loadPixels() on the PImage since we are going to read its pixels.  img.loadPixels();
  for (int x = 0; x < img.width; x++ ) {
    for (int y = 0; y < img.height; y++ ) {

      // Calculate the 1D pixel location
      int loc = x + y*img.width;

      // Get the R,G,B values from image
      float r = red (img.pixels[loc]);
      float g = green (img.pixels[loc]);
      float b = blue (img.pixels[loc]);

      // We calculate a multiplier ranging from 0.0 to 8.0 based on mouseX position.
      // That multiplier changes the RGB value of each pixel.     
      float adjustBrightness = ((float) mouseX / width) * 4.0;
      float adjustRed =  ((float) mouseY / height) * 2.0;
      r *= adjustBrightness;  // see https://processing.org/reference/multiplyassign.html
      g *= adjustBrightness;
      b *= adjustBrightness;

      r *= adjustRed;

      // The RGB values are constrained between 0 and 255 before being set as a new color.     
      r = constrain(r,0,255);
      g = constrain(g,0,255);
      b = constrain(b,0,255);

      // Make a new color and set pixel in the window
      color c = color(r,g,b);
      pixels[loc] = c;
    }
  }

  updatePixels(); 

}

但是，当转换为p5.js更新的脚本（下）returns时出现错误：

Error: Needs p5.Color or pixel array as argument.

我已经为我尝试过的事情留下了一些评论：可变图像； // 可变灵敏度；

function preload() {
  img = loadImage("../image.jpg");
}

function setup() {
  createCanvas(564, 698);
  pixelDensity(1);
  img.loadPixels();
  loadPixels();
}

function draw() {
  loadPixels();
  for (var x = 0; x < img.width; x++) {
    for (var y = 0; y < img.height; y++ ) {
      // Calculate the 1D location from a 2D grid
      var loc = (x + y*img.width)*4;
      // Get the R,G,B values from image
      var r,g,b;
      r = red (img.pixels[loc]);
      g = green (img.pixels[loc]);
      b = blue (img.pixels[loc]);
      // Calculate an amount to change brightness based on proximity to the mouse
    //   var maxdist = 50;
    //   var d = dist(x, y, mouseX, mouseY);

      var adjustBrightness = (mouseX/width)*4;
      var adjustRed = (mouseY/height)*4;
      r *= adjustBrightness;
      g *= adjustBrightness; 
      b *= adjustBrightness;

      r *= adjustRed;
      // Constrain RGB to make sure they are within 0-255 color range
      r = constrain(r, 0, 255);
      g = constrain(g, 0, 255);
      b = constrain(b, 0, 255);
      // Make a new color and set pixel in the window
      //color c = color(r, g, b);
    //   var pixloc = (y*width + x)*4;
    c = color(r,g,b);
    pixels[loc] = c;
    //   pixels[loc] = r; //red
    //   pixels[loc+1] = 40; //green
    //   pixels[loc+2] = b; //blue
    //   pixels[loc+3] = 50; //alpha
    }
  }
  updatePixels();
}

我认为问题可能出在 red() green() blue() 函数中。

Answer 1

这些行没有意义：

r = red (img.pixels[loc]);
g = green (img.pixels[loc]);
b = blue (img.pixels[loc]);

pixels 数组将每种颜色保存在单独的索引中。它应该看起来更像这样：

var r = img.pixels[loc];
var g = img.pixels[loc+1];
var b = img.pixels[loc+2];

可以在 the reference 中找到更多信息。

即使您解决了这个问题，您仍然会遇到其他问题。例如，您什么时候声明 c 变量？

如果您仍然无法使其正常工作，请随时 post 您在新问题中使用的图像以及更新后的代码，我们将从那里开始。祝你好运。

Answer 2

感谢 Kevin，他让事情走上了正轨，这是有效的 p5.js 脚本：

function preload() {
  img = loadImage("../image.jpg");
}

function setup() {
  createCanvas(564, 698);
  pixelDensity(1);
  img.loadPixels();
  loadPixels();
}

function draw() {
  loadPixels();
  for (var x = 0; x < img.width; x++) {
    for (var y = 0; y < img.height; y++ ) {
      // Calculate the 1D location from a 2D grid
      var loc = (x + y*img.width)*4;

      // Get the R,G,B values from image
      var r = img.pixels[loc];
      var g = img.pixels[loc+1];
      var b = img.pixels[loc+2];

      // get mouse input on adjustment variables
      var adjustBrightness = (mouseX/width)*4;
      var adjustRed = (mouseY/height)*4;
      r *= adjustBrightness;
      g *= adjustBrightness; 
      b *= adjustBrightness;

      r *= adjustRed;
      // Constrain RGB to make sure they are within 0-255 color range
      r = constrain(r, 0, 255);
      g = constrain(g, 0, 255);
      b = constrain(b, 0, 255);

      // write back out pixel values
      pixels[loc] = r; //red
      pixels[loc+1] = g; //green
      pixels[loc+2] = b; //blue
      pixels[loc+3] = 255; //alpha
    }
  }
  updatePixels();
}

它比 prossessing.js 版本运行得慢得多。我不确定这是因为潜在差异还是编码效率低下！

将像素操作从 processig 转换为 p5.js 时出错

error when converting pixel manipulation from processig to p5.js

processing

p5.js