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

Question

我一直在尝试让这个 java processing 程序正常工作，它看起来非常简单，但出于某种原因，我无法弄清楚出了什么问题。我不习惯使用 PVectors，所以我假设它与此有关。我会 post 原来的，然后是我的非工作 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;
}

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

Troubles converting processing to p5.js with PVectors

javascript

processing

p5.js