Redraw pixels from Image after random with Processing - image

Question

Lets say I have a pixelated image… and I want to redraw it using Processing.
At first there should be a random colored grid of pixels – and after some time the pixelated image would appear through this pixelated grid.
I thought I could manage this with a system like this: if a specific random colored pixel matches the color of the pixelated image – there should a new pixel be drawn.
For a better understanding take a look at this code:
PImage img;
float rows;
float cols;
float pixel;
color gridcolor;
color imagecolor;
color[][] grid = new color[500][500];
color[] colors = new color[4];
void setup() {
size(600, 600);
img = loadImage("bw.jpg");
cols = grid.length;
rows = grid[0].length;
pixel = width/cols;
noStroke();
colors[0] = color(0, 0, 0);
colors[1] = color(219, 219, 219);
colors[2] = color(218, 218, 218);
colors[3] = color(255, 255, 255);
}
void draw() {
background(255);
for (int x = 0; x < rows; x++) {
for (int y = 0; y < cols; y++) {
int selector = int(random(colors.length));
grid[x][y] = colors[selector];
gridcolor = grid[x][y];
fill(gridcolor);
rect(x*pixel, y*pixel, pixel, pixel);
imagecolor = img.get(int(x*pixel), int(y*pixel));
if (imagecolor == gridcolor) {
fill(imagecolor);
rect(x*pixel, y*pixel, pixel, pixel);
}
}
}
}
So I was able to draw pixels if the color matches – but because the colored noise is tied using random – they dissappear again…
How can I transfer the rectangled pixels out of the if statement?
How to make them stay? I tried connecting it to a boolean statement… but this is only tangled...
BTW, this is my PImage img:
Thank you for any kind of help! I am really stuck with this one...

Answer 1

Here is the solution that I found using PGraphics… With PGraphics everything gets drawn on a second layer – and then redrawn on the sketch window using the image function:
PGraphics pg;
PImage img;
float rows;
float cols;
float pixel;
color gridcolor;
color imagecolor;
color[][] grid = new color[100][100];
color[] colors = new color[9];
void setup() {
size(600, 600);
pg = createGraphics(600, 600);
img = loadImage("1.bmp");
cols = grid.length;
rows = grid[0].length;
pixel = width/cols;
noStroke();
colors[0] = color(0, 0, 0);
colors[1] = color(255, 255, 0);
colors[2] = color(66, 94, 171);
colors[3] = color(240, 85, 90);
colors[4] = color(161, 205, 12);
colors[5] = color(93, 76, 132);
colors[6] = color(202, 132, 184);
colors[7] = color(16, 208, 208);
colors[8] = color(255, 255, 255);
}
void draw() {
background(255);
for (int x = 0; x < rows; x++) {
for (int y = 0; y < cols; y++) {
int selector = int(random(colors.length));
grid[x][y] = colors[selector];
gridcolor = grid[x][y];
fill(gridcolor);
rect(x*pixel, y*pixel, pixel, pixel);
pg.beginDraw();
imagecolor = img.get(int(x*pixel), int(y*pixel));
if (imagecolor == gridcolor) {
pg.noStroke();
pg.fill(imagecolor);
pg.rect(x*pixel, y*pixel, pixel, pixel);
pg.endDraw();
}
}
}
image(pg, 0, 0);
}