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时，更新后的脚本（如下所示）会返回错误：

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

我已经为我尝试过的事情留下了一些评论： var img; // var sensitivity;

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变量？

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

Answer 2

感谢凯文，他把事情推向了正确的轨道，这是工作的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时出错

2 个答案: