How to get each value of Red, Green and Blue of a set of images without displaying images ??

kimseongjun

Hi ~ I'm a newb of using Processing. I've been trying to make a mosaic program using Processing nowadays. What I really want to do is make a mosaic image with a set of images from web. http://www.hobbynote.com/bundles/wmdhobbynote/images/api/screen/tf1-the-voice-mosaique-facebook-01.jpg

I've made a mosaic image with rectangles filled with average colors of each area of original image. http://web1.c2.cyworld.com/myhompy/board/popupBoardImageFullView.php?home_id=a4204787&img_url=http://c2down.cyworld.co.kr/download?fid=642241a2ad57d69ba66141a2ad57b8db&name=%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202013-10-10%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%2011.00.10.png

Now, I'm trying to get average colors of web images (without displaying) , compare them and finally display them to the closest (in color) area. But I have a problem to compare average colors of web images with those of areas of original image. But I have no idea of what i have to do next, so I stop. I don't know how to get average colors of images without displaying. Is there anyone who can solve this problem? or is there another way to make a mosaic image with a set of images?? Thanks. Here is my code below. :D

import controlP5.*;
ControlP5 slide;
//setting the size of grids and transparency
int gridsize = (int) 10;
int tran = (int) 200;



void setup(){
PImage myImage;
myImage = loadImage("sunflower.png");
size(myImage.width, myImage.height);
image(myImage,0,0);

int larg = max(myImage.width, myImage.height);
// to prevent the size of a grid be bigger than the size of image
int[] values = { myImage.width, myImage.height, 30};
int rang = min(values);

slide = new ControlP5(this);
slide.addSlider("gridsize", 0, rang, (int)10, 20, 20, 50, 10);
slide.addSlider("tran", 0, 255, (int)200, 20, 40, 50, 10);
}



void draw(){
PImage myImage;
myImage = loadImage("sunflower.png");
size(myImage.width, myImage.height);
image(myImage,0,0);
int larg = max(myImage.width, myImage.height);

for (int h = 0; h < larg; h = h + gridsize){
  for (int w = 0; w < larg; w = w + gridsize){

// get average colors of each area of original image    
  int SumOfR = 0;
  int SumOfG = 0;
  int SumOfB = 0;
  int AverR = 0;
  int AverG = 0;
  int AverB = 0;
    for (int x = 0; x < gridsize; x++){
      for (int y = 0; y < gridsize; y++){
      color myPixel = get(w+x, y+h);

      int R = int (red(myPixel));
      int G = int (green(myPixel));
      int B = int (blue(myPixel));

      SumOfR = SumOfR + R;
      SumOfG = SumOfG + G;
      SumOfB = SumOfB + B;

      AverR = SumOfR / (gridsize * gridsize);
      AverG = SumOfG / (gridsize * gridsize);
      AverB = SumOfB / (gridsize * gridsize);
      }
     }
  rectMode(CORNER);
  noStroke();
  println(AverR+"," +AverG+","+AverB);
  fill(AverR, AverG, AverB, tran);
  rect(w,h,gridsize,gridsize);
  }
 }
}

PhiLho

What is this loadImage() and size() ! in draw()?

See the What are setup() and draw()? article: make the image a global variable and load it only in setup().

See also the pixels[] array, it allows to access the colors in an image without needing to display it.

GoToLoop

Also take a look at this following post -> forum.processing.org/two/discussion/comment/406

kimseongjun

Thank you guys!! I think I should study more :)