Different results with the same code on a computer and a smartphone (with used loadPixels())

p5.js Beginners
1

Hello. Different results are obtained with the same code on a computer(windows 10) and a smartphone(android) with used loadPixels(). Below is an example code and screenshots.

///////////////////////////////////
function setup() {
  createCanvas(300, 300);     
	randomSeed(1);
for (let x2=0; x2<width; x2 +=100) { 
for (let y2=0; y2<height; y2 += 100) {      
 
	fill(random(200),random(55),random(155));   
   rect(x2,y2,100,100);
	 
}
}

///////
loadPixels();
background(0); 
for (let y1=0; y1<height; y1+=100) {
    for (let x1=0; x1<width; x1+=100) {
      let poz=(x1+y1*width)*4;
       
let r=pixels[poz];
let g=pixels[poz+1];
let b=pixels[poz+2];
     
fill(r,g,b);
			
  rect(x1,y1,100,100);
    }
  }
//////////
	
}
////////////////////////////////////////////

PC

Screenshot
Screenshot1416Ă—2340 76.3 KB

2

Hi @Nik,

I see that you are using OpenProcessing to run your sketch. It may be due to the “responsiveness” of the website and how the canvas adapts to your screen size / ratio (even thought you set the canvas size… I don’t know :thinking:).

Can you post a link to your sketch so we can try it on mobile? You can also test with the p5 online editor: editor.p5js.org/

1 Like
3

Hello @josephh!
Yes it’s openprocessing.
Link:

Link (p5js editor):

4

I asked this question on stackoverflow and got an answer. I’ll leave a link here I think many will be interested

3 Likes
5

I think you’d be interested in checking out a sketch that uses pixels[] for both Java Mode & p5js flavors:

3 Likes