How to speed up Get func in p5.js? - p5.js

Question

Is there any way to speed up this piece of code (simplified)? On my Dell m4700 laptop, it works for 1 minute and 10 seconds (the size of the canvas is 1000x1400 pixels).
pg = createGraphics(1000,1400);
pg.pixelDensity(1);
***
for(j=0;j<pg.height;j++){
for(i=0;i<pg.width;i++){
pg.stroke(cc=pg.get(i,j));
pg.point(i,j+4);
}
}
Without this line,
pg.stroke(cc=pg.get(i,j));
the code executes in milliseconds.
I made another version that works in 20 seconds, but for some reason the result is slightly different visually:
for(j=0;j<pg.height;j++){
pg.loadPixels();
for(i=0;i<pg.width;i++){
let pi = i + (j * pg.width);
let ri = pi * 4;
let cr = pg.pixels[ri];
let cg = pg.pixels[ri + 1];
let cb = pg.pixels[ri + 2];
let ca = pg.pixels[ri + 3];
pg.stroke(color(cr,cg,cb,ca));
pg.point(i,floor(j+4));
}
}

Answer 1

Big edit:
Ok, I miss read the question and was thinking in java's processing not p5js as the OP has properly indicated. So my answer was very wrong. Sorry.
But still the approach exists in p5js and is faster.
p5js store pixels in 1d array, 4 slots for each pixel:
[pix1R, pix1G, pix1B, pix1A, pix2R, pix2G, pix2B, pix2A...]
And also the pixel density mathers.
So the code is different, I belive you are looking for something like (no pg here, but the thinking is the same):
loadPixels();
let d = pixelDensity();
let imagesize = 4 * (width * d) * ((height) * d);
for (let i = 0; i <= imagesize; i += 4) {
let j = i + 16;//4*4
pixels[i] = pixels[j];
pixels[i + 1] = pixels[j + 1];
pixels[i + 2] = pixels[j + 2];
pixels[i + 3] = pixels[j + 3];
}
updatePixels();
Now, to access a given area in the array is a little convoluted, here an example
//the area data
const area_x = 35;
const area_y = 48;
const width_of_area = 180;
const height_of_area = 200;
//the pixel density
const d = pixelDensity();
loadPixels();
// those 2 first loops goes trough every pixel in the area
for (let x = area_x; x < width_of_area; x++) {
for (let y = area_y; y < height_of_area; y++) {
//here we go trough the pixels array to get each value of a pixel
for (let i = 0; i < d; i++) {
for (let j = 0; j < d; j++) {
// calculate the index of the 1d array for every pixel
// 4 values in the array for each pixel
// y times density times #of pixels plus
// x times density times #of pixels
index = 4 * ((y * d + j) * width * d + (x * d + i));
// You can assign raw values for rgb color
pixels[index] = 255;
pixels[index + 1] = 30;
pixels[index + 2] = 200;
pixels[index + 3] = 255;
}
}
}
}
updatePixels();
Both this examples are at p5js online editor:
1:https://editor.p5js.org/v-k-/sketches/GGVeZvCk7
2: https://editor.p5js.org/v-k-/sketches/kW9lXyK2n
Hope that helps, and sorry for the previus processing answer/code.
cheers