将像素操作从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更新脚本（下同）时返回一个错误：

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

感谢凯文，谁在正确的轨道上得到的东西，这里的工作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版本。我不确定这是由于底层差异还是只是低效的编码造成的！

Answer 2

这些线没有意义：

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

如果仍然无法正常工作，请随时在新问题中发布您使用的图片以及更新后的代码，我们将从此处继续。祝你好运。