使用 Pvector 将处理转换为 p5.js 时遇到问题

Question

我一直在尝试让这个 java processing 程序工作，它看起来真的很简单，但由于某种原因，我不知道出了什么问题。我不习惯使用PVectors，所以我假设它与此有关。我将发布原件，然后我的非工作 p5.js 尝试。

我已经被困在这个问题上太久了。我实际上是在学习原始处理之前学习了 p5.js，所以也许这就是我犯了一个愚蠢的错误的原因。 目前，我得到的只是一个空白屏幕。此外，我在 linux 上运行，并且很难在 IDE 中找到一个具有实际可见和工作调试的 linux 版本，因此p5.js 模式通常可以正常工作。我只是通过在线托管来使用试错法。所以我不知道什么 IDE 会解释它给出的错误。

原创，在 Java IDE 中工作：

PImage img;

void setup(){
   size(500, 500, P2D); //width and height should be similar to the picture's dimensions
    
    img = loadImage("turner.jpg");
}

void draw(){
    img.resize(500,500);
    int len = img.pixels.length;
    //print(len);
    //print(img.width * img.height);
    loadPixels();
    for(int x = 0; x < img.width; x++){ // by row
      for(int y = 0; y < img.height; y++) { // by column
         int i = x + y * img.width; // i = index of grid columns
         float n = warp(x, y, .003, 255); 
         int offset = (i-int(n)); //%len; // with a modulo the offset should wrap around 
         if (offset<0){
          offset = 0; 
         }
         color c = img.pixels[offset]; // --> ArrayIndexOutOfBoundsException
         
         pixels[i] = color(c);
         }
      }
    updatePixels();
}

       
float warp(int _x, int _y, float factor, int n_range) {
    float n1 = noise((_x+0.0) * factor, (_y+0.0) * factor) * n_range;
    float n2 = noise((_x+5.2) * factor, (_y+1.3) * factor) * n_range;
    PVector q = new PVector(n1, n2);
            
    float n3 = noise(((_x + q.x * 4) + 1.7) * factor, ((_y + q.y * 4) + 9.2) * factor) * n_range;
    float n4 = noise(((_x + q.x * 4) + 8.3) * factor, ((_y + q.y * 4) + 2.8) * factor) * n_range;
    PVector r = new PVector(n3, n4);
                
    return noise((_x + r.x * 4) * factor, (_y + r.y * 4) * factor) * n_range;
}

Answer 1

p5.js 处理图像的方式与处理方式略有不同，请参阅docs.

关键点：

• 在processing 中，图像数组将是一个数字数组，每组 4 个在一行中代表每个像素的 r g b a。但是通过使用image.set() 和image.get() 方法可以避免这种情况，并且只能使用x 和y 进行访问。
• 看看p5.Vector，它基本上相当于PVector。

以下对我有用，不能保证它是优化的。我试图尽可能地翻译你的。 （从processing 到p5.js 的转换现在应该已经完全自动化了。）

var img;

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

function setup() {
    createCanvas(500, 500, P2D);
}

function draw() {
    img.resize(500, 500);
    
    var len = img.pixels.length;
    // pr___parseint(len);
    // pr___parseint(img.width * img.height);
    img.loadPixels();
    
    for (var x = 0; x < img.width; x++) {
        for (var y = 0; y < img.height; y++) {
            var i = x + y * img.width;
            
            var n = warp(x, y, 0.003, 255);
            // %len; // with a modulo the offset should wrap around
            var offset = (i - int(n));
            if (offset < 0) {
                offset = 0;
            }

            img.set(x,y, img.get(offset%img.width, Math.floor(offset/img.width)));
        }
    }
    img.updatePixels();  
    image(img, 0, 0);
    noLoop();
}

function warp(_x, _y, factor, n_range) {
    var n1 = noise((_x + 0.0) * factor, (_y + 0.0) * factor) * n_range;
    var n2 = noise((_x + 5.2) * factor, (_y + 1.3) * factor) * n_range;
    var q = createVector(n1, n2);
    var n3 = noise(((_x + q.x * 4) + 1.7) * factor, ((_y + q.y * 4) + 9.2) * factor) * n_range;
    var n4 = noise(((_x + q.x * 4) + 8.3) * factor, ((_y + q.y * 4) + 2.8) * factor) * n_range;
    var r = createVector(n3, n4);
    return noise((_x + r.x * 4) * factor, (_y + r.y * 4) * factor) * n_range;
}