CODEWITHSUNDEEP
imageloopsgridprocessing
Cyrill
Cyrill

Reputation: 833

Redraw pixels from Image after random with Processing

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: enter image description here

Thank you for any kind of help! I am really stuck with this one...

Upvotes: 1

Views: 155

Answers (1)

Cyrill
Cyrill

Reputation: 833

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);
}

Upvotes: 1

Related Questions