ошибка при преобразовании обработки точек из 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. 

I Я оставил некоторые комментарии для вещей, которые я пробовал: var img; // var-чувствительность;

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(); 
} 

Я думаю, проблема может быть в красных() зеленых() синих() функциях.

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?

Если вы все еще не можете заставить его работать, не стесняйтесь отправлять изображения, который вы используете в новом вопросе наряду с обновленным кодом, и мы будем идти оттуда. Удачи.