Now I am trying to draw picture based on the data got from the original picture. It went quite successful on p5.js but it somehow did not work well on Processing. Am I doing wrong? and What is the problem? Thank you for reading.

Don’t compute tileWidth and tileHeight in the for loop because their values are the same every time.

This is also true for loadPixels();, you only need to load your image once but at the beginning of the setup() function.

Why do you use tileWidth and tileHeight? In your processing code, it force you to check if gridx is larger than the size of the array. Make the canvas width and height the same as your image might ease the process…