Processing X P5JS (image quality on canvas)

p5.js Coding Questions
1

I have transferred a processing code to P5JS. In it I use an image with rotation and all axes. But image quality on P5JS canvas is not the same as on processing. Does anybody know how to solve this?

2

Hi @vargas,

Can you provide a minimal code example for both Processing and p5.js so everyone can reproduce it? (use an online image so we don’t have to download an image)

This can be expected since they don’t use the same renderer (either awt, JavaFX or JogAmp in Processing and Canvas / WebGL for p5.js)

1 Like
3

*PROCESSING CODE, HERE I JUST USED AN IMAGEM FROM INTERNET.

PImage webImg;
float angle;
void setup(){
size(600,600,P3D);
background(0);
String url = “https://i1.wp.com/arteref.com/wp-content/uploads/2019/09/antropofagia.jpg?fit=900%2C700&ssl=1”;
// Load image from a web server
webImg = loadImage(url, “jpg”);

}

void draw(){
background(0);

float s = 25;
for(float x = 0;x<=width;x+=s){
for(float y= 0;y<=height;y+=s){
pushMatrix();

    float f = radians(pmouseY + pmouseY);
    float f2 = radians(pmouseX + pmouseX);
    f = map(f, -1,1,0,255); 
  
    
    translate(x,y,-f2*50);
    angle += 0.5;
    rotateY(pmouseX); 
    rotateZ(angle++);
    rotateX(pmouseY);
    image(webImg, 0,0);
    
    popMatrix();
    
}

}

}

4

I actually have a lot of problems here. For example, with PROCESSING I use (angle += 0.5;) without needing to set a previous value. In P5JS I need to set an initial value and that makes a lot of difference in the output image. I would like to upload this code on the web, but my attempts fail. The output image is never the same.

5

*P5JS CODE

var angle = 1.0;
let img;
let f;
let f2;

function preload() {
img = loadImage(“ffff.png”);
}
function setup() {
//imageMode(CORNER);
createCanvas(windowWidth, windowHeight, WEBGL);
background(0);
}

function draw() {

background(0);

var s = 25;
for (let x = 0; x <= width; x += s) {
for (let y = 0; y <= height; y += s) {
push();

  f = radians(pmouseY + pmouseY);
  f2 = radians(pmouseX + pmouseX);
  f = map(f, -1, 1, 0, 255); //texto??


  translate(x, y, -f2 * 50);

  angle += 0.5;

  rotateY(pmouseX);
  rotateZ(angle++);
  rotateX(pmouseY);
  image(img, -500, 0);

  pop();
  
}

}
}

6

This doesn’t make sense. In Java, and therefore in Processing, a variable with type int will automatically be initialized to 0, so one thing that is making the initial output of your p5.js sketch different is that you’ve chosen to initialize this variable to 1.0

2 Likes
7

Thanks KumuPaul, but why do the codes still have different output images (processing and P5JS)?

8

To be honest when I run the code you posted in processing 4 vs p5.js 1.4.0 it looks pretty similar to me, however it is quite chaotic and rapidly animated so thorough comparison is pretty difficult. You’re going to need to be more specific about the differences you’re observing and preferably provide some code that results in more static sketches.

2 Likes