How can I convert an image into text instead of pixels?

shaq

So instead of pixels, I want to use words/alphabets in the image which form the image and when someone comes closer to the image, I am getting values with a proximity sensor and words start coming out of the image and keep getting bigger as the user comes close and image is not recognisable then but bigger words can be read on the big screen.

Eeyorelife

Sounds like a really complicated problem, could you show us what you have tried and tell us where you are bumping into problems?

shaq

Attached is the image that I want to achieve with Processing. Follow is the code I have been working with. But I do not know how to convert pixels or group of pixels in to words taken from an array of strings/words. I have seen many examples of converting an image into text with the help of html/java scripting but there is not example for this in processing. Please guide me.

PImage kkwoman;

void setup (){

size (800, 386); kkwoman = loadImage("kkwoman.jpg");

}

void draw (){

loadPixels (); kkwoman.loadPixels(); for (int x=0; x<width; x++) { for (int y=0; y<height; y++) { int loc=x+y*width; float b = brightness (kkwoman.pixels[loc]); if (b>mouseX){ pixels[loc]=color(255); } else { pixels[loc]=color(0);

}

} }

updatePixels ();

}

Eeyorelife

1. You should format your code so its eassier for us to read: https://forum.processing.org/two/discussion/8045/how-to-format-code-and-text#latest
2. Processing is Java, so if you find an example of this kind of thing you should be able to run it in processing with some adaptions.
3. Again, this seems to be a really complicated problem and you might want to get a little bit more used to the software before you take on this project.
4. I don't have nearly enough experience or knowledge around programming that I can tell you how you should do this exactly.

benja

If you have a working example in any language, then it should not be had to translate that into processing/java. But if you don't understand the code, that is maybe not the best way.

I don't know how far you are yet. But i would start with a static image and if that works, you can proceed to an animated/interactive version.

With letters instead of words, that's kind of easy, you can find a good start in
Examples -> Libraries -> Video -> Capture -> AsciiVideo.

The basic idea is to break down the image into smaller areas and find the average brightness of these areas. Then you place a letter that has a similiar brightness-value in this area. (i.e: a "M" should appear darker than an "i").

With words this gets more complicated, you would have to consider regions of different sizes. Depending on the desired output, you may have to think about how much words may overlap, how much the size of the words can differ, etc.

Ater

Well, you can have an array of Strings with words you want to use, then, you can use pixel data to choose the word from array according to your rules. As I understand, you don't need to convert each pixel, rather a group of pixels (as text is bigger then 1 px). And then you place words using text() function on the appropriate place. Which part feels hard for you?

shaq

Thank you for your responses. Yes that is what I want to do but I do not know how to. Can you give me a basic code to replace a group of pixels with one word? And the most difficult part is how to put more words where there is concentration of dark colours in the picture.

benja

Ok, i suppose you did not look into the AsciiVideo-example? Did not see any code yet, so i can only guess your level of code-comprehension. Here is another very basic example, from there it's still a lot of work until you get results like you posted above.

PImage src;
int threshold = 150;

void setup(){
  // basic settings
  size(800, 600);
  textAlign(CENTER);
  background(255);
  fill(0);

  // load an image
  src = loadImage("http:"+"//images.techtimes.com/data/images/full/161832/snoopy-dance.png");
  // resize
  src.resize(80, 60);


  // load piyels of source-image
  src.loadPixels();

  // iterate over image-pixels
  for(int i=0; i<src.pixels.length; i++ ){
    // get the color
    int col = src.pixels[i];

    // draw a word if pixels is darker than threshold
    if(brightness(col) < threshold){
      int x = i%src.width * 10;
      int y = i/src.width * 10 +10;
      text("snoopy", x, y );
    }
  }
  src.updatePixels();
}

shaq

Hi Benja, Thank you so much for the above code. Yes I did see the ASCII Video example and do understand some of its code. I was thinking, can we replace any image instead of loading a video and all that code can be applied to the image and show the result in ASCII code. I have also tested your code and it is a great start to solve my problem. Could you tell me why are you doing resizing on line 14? What is the purpose of this? Can we apply/copy an array of words to array of pixels instead?

benja

Sure you can use an image instead of a video. A video is actually just an sequence of images.

The resize in the example above is to get a low-resolution image, where each pixel represents an area of 10px*10px from the original image. You could as well calculate the average brightness of these 10x10 squares yourself, but the resize-function already does that.

You could use an array of strings, but you would have to find the average brightness of these words. Is "Snoopy" darker or brighter than "Woodstock"? I guess that it doesn't make a big difference and you would maybe use the size of the words and the spaces in between for that.