Troubles converting processing to p5.js with PVectors

Question

I have been trying off and on to get this java processing program to work and it seems REALLY simple but for some reason, I can not figure out what is going wrong. I am not used to using PVectors, so I am assuming it has something to do with that. I will post the original, and then my non-working p5.js attempt.

I have been stuck on this for soooo long. I actually learned p5.js before I learned original processing so maybe that is why I'm making a dumb mistake. Currently, all I am getting is a blank screen. Also, I am running on linux and finding a linux version with actually visible and working debug in an IDE is hard and so is getting p5.js mode working in general. I've just been using trial and error by hosting it online. So I can't figure out what IDE would interpret the errors it is giving.

Original, works in 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 deals with images a bit differently to processing, see docs.

Key Points:

• In processing the image array would be an array of numbers with each group of 4 in a row representing r g b a for each pixel. But by using image.set() and image.get() methods you can avoid that, and you can access using only x and y.
• Have a look at p5.Vector, it is basically a PVector equivalent.

The following works for me, can't guarantee that it's optimised. I tried to translate yours as closely as possible. (Converting from processing to p5.js should really be fully automated by now.)

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