[英]Troubles converting processing to p5.js with PVectors
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.我一直在尝试让这个 java
processing
程序工作,它看起来非常简单,但出于某种原因,我无法弄清楚出了什么问题。 I am not used to using PVectors
, so I am assuming it has something to do with that.我不习惯使用
PVectors
,所以我假设它与此有关。 I will post the original, and then my non-working p5.js
attempt.我将发布原件,然后发布我的非工作
p5.js
尝试。
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.
我实际上是在学习原始处理之前学习了 p5.js,所以也许这就是为什么我犯了一个愚蠢的错误。 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.另外,我在 linux 上运行,找到一个 linux 版本,在 IDE 中实际可见和工作调试很难,一般情况下让
p5.js
模式工作也是如此。 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.
所以我不知道 IDE 会解释它给出的错误。
Original, works in Java 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;
}
p5.js
deals with images a bit differently to processing, see docs. p5.js
处理图像与处理图像有点不同,请参阅文档。
Key Points:关键点:
processing
the image array would be an array of numbers with each group of 4 in a row representing r gba for each pixel.processing
中,图像阵列将是一个数字阵列,每组 4 个连续代表每个像素的 r gba。 But by using image.set()
and image.get()
methods you can avoid that, and you can access using only x
and y
.image.set()
和image.get()
方法可以避免这种情况,并且您可以仅使用x
和y
进行访问。p5.Vector
, it is basically a PVector
equivalent.p5.Vector
,它基本上是PVector
的等价物。 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.) (从
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;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.