He estado probando de vez en cuando para que este programa de processing Java funcione y parece MUY simple, pero por alguna razón, no puedo entender qué es lo que está fallando. No estoy acostumbrado a usar PVectors , así que supongo que tiene algo que ver con eso. Publicaré el original y luego mi intento p5.js que no funciona.
He estado atrapado en esto por mucho tiempo. De hecho, aprendí p5.js antes de aprender el procesamiento original, así que tal vez por eso estoy cometiendo un error tonto. Actualmente, todo lo que obtengo es una pantalla en blanco. Además, estoy ejecutando Linux y encontrar una versión de Linux con una depuración realmente visible y que funcione en un IDE es difícil, al igual que hacer que el modo p5.js funcione en general. Acabo de usar prueba y error al alojarlo en línea. Así que no puedo entender qué IDE interpretaría los errores que está dando.
Original, funciona en 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 + qx * 4) + 1.7) * factor, ((_y + qy * 4) + 9.2) * factor) * n_range; float n4 = noise(((_x + qx * 4) + 8.3) * factor, ((_y + qy * 4) + 2.8) * factor) * n_range; PVector r = new PVector(n3, n4); return noise((_x + rx * 4) * factor, (_y + ry * 4) * factor) * n_range; }p5.js se ocupa de las imágenes de manera un poco diferente al procesamiento, consulte los documentos.
Puntos clave:
processing la matriz de imágenes sería una matriz de números con cada grupo de 4 en una fila que representa rgba para cada píxel. Pero al usar image.set() e image.get() puede evitar eso, y puede acceder usando solo x e y .p5.Vector , es básicamente un equivalente de PVector . Lo siguiente funciona para mí, no puedo garantizar que esté optimizado. Traté de traducir el tuyo lo más fielmente posible. (La conversión de processing a p5.js debería estar completamente automatizada).
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 + qx * 4) + 1.7) * factor, ((_y + qy * 4) + 9.2) * factor) * n_range; var n4 = noise(((_x + qx * 4) + 8.3) * factor, ((_y + qy * 4) + 2.8) * factor) * n_range; var r = createVector(n3, n4); return noise((_x + rx * 4) * factor, (_y + ry * 4) * factor) * n_range; }