We closed this forum 18 June 2010. It has served us well since 2005 as the ALPHA forum did before it from 2002 to 2005. New discussions are ongoing at the new URL http://forum.processing.org. You'll need to sign up and get a new user account. We're sorry about that inconvenience, but we think it's better in the long run. The content on this forum will remain online.
Index › Discussion › Exhibition › Image to text
‹ Previous Topic | Next Topic ›
Page Index Toggle Pages: 1
Image to text (Read 1704 times)
PhiLho 
Image to text
Jan 6th, 2009, 6:02pm  
Somebody asked in Stack Overflow how to Programmatically modify an image to replace detail with text.
I first answered by a generic algorithm, then I implemented it in Processing (what else Wink).
I thought I should share my code, even though I suppose there might be other examples on this forum.
I repeat the code here (it is not so long), for reference (topics can be deleted on SO).
Code:
final int GRID_SIZE_H = 9;
final int GRID_SIZE_V = 9;
final int GRID_SIZE = GRID_SIZE_H * GRID_SIZE_V;
final String TEXT_TO_DISPLAY = "Picture yourself in a boat on a river With tangerine trees and marmalade skies";

void setup()
{
  size(600, 600);
  smooth();
  noStroke();
  background(0);

  PImage niceImage = loadImage("SomeImage.png");
  int niW  = niceImage.width;
  int niH = niceImage.height;
  int imgW = niW + 10;
  image(niceImage, 0, 0);

  PFont f = loadFont("Arial-Black-12.vlw");
  textFont(f);
  textAlign(CENTER);
  String textToDisplay = TEXT_TO_DISPLAY.toUpperCase().replaceAll("\\s", "");

  int pos = 0;
  niceImage.loadPixels();
  for (int j = 0; j < niH - GRID_SIZE_V; j += GRID_SIZE_V)
  {
    for (int i = 0; i < niW -  GRID_SIZE_H; i += GRID_SIZE_H)
    {
      long avgR = 0, avgG = 0, avgB = 0;
      for (int x = 0; x < GRID_SIZE_H; x++)
      {
        for (int y = 0; y < GRID_SIZE_V; y++)
        {
          int c = niceImage.pixels[i + x + (j + y) * niW];
          avgR += (c >> 16) & 0xFF;
          avgG += (c >>  8) & 0xFF;
          avgB +=  c        & 0xFF;
        }
      }
      color clr = color(avgR / GRID_SIZE, avgG / GRID_SIZE, avgB / GRID_SIZE);
      fill(clr);
      char chr = textToDisplay.charAt(pos++);
      pos = pos % textToDisplay.length();
      text(chr, i + imgW, j + 12);
    }
  }
}
Back to top
« Last Edit: Jan 17th, 2009, 6:57pm by PhiLho  »  
WWW  
leafcutter
Re: Image to text
Reply #1 - Jan 16th, 2009, 10:41pm  
This looks interesting to me but I get out of bounds errors when i try and run it with an image - I have not done anything in processing with images yet so maybe I just don't understand it.

Anyone care to enlighten me?

thanks,

John.
Back to top
 
 
PhiLho 
Re: Image to text
Reply #2 - Jan 16th, 2009, 10:51pm  
Out of bounds? Strange. Is the image in the data folder?
Back to top
 
WWW  
leafcutter
Re: Image to text
Reply #3 - Jan 16th, 2009, 11:15pm  
Yes the image is in the data folder. I tried it with a jpg and a png file. Does it matter what the dimensions of the image are?

I'm getting "ArrayindexOutOfDoundsException: 36000

I'm guessing that an image size issue. I put in a image the same size as your 'GRID_SIZE' which did not throw an error. Is this expected behavior?

Im on processing 1.0.1 on a mac
Back to top
 
 
PhiLho 
Re: Image to text
Reply #4 - Jan 17th, 2009, 12:49am  
Mmm, 36000 = 600x600 which is the size of the sketch. Is your image bigger? Probably not a problem anyway. I tried with a smaller canvas size without problem.
On which line do you have the problem?
Back to top
 
WWW  
leafcutter
Re: Image to text
Reply #5 - Jan 17th, 2009, 4:48am  
I've tried bigger and smaller images i still get the error. The editor is highlighting:

int c = niceImage.pixels[i + x + (j + y) * niW];

as the error.
Back to top
 
 
PhiLho 
Re: Image to text
Reply #6 - Jan 17th, 2009, 11:32am  
Yes, the out of bounds error can happen only here in my code... But it is strange, because the pixels[] array of niceImage should not be bound by the size of the sketch.
Is your code exactly what I show (minus the image name, of course!)?
Back to top
 
WWW  
leafcutter
Re: Image to text
Reply #7 - Jan 17th, 2009, 2:47pm  
Yes apart from the source file it's exactly as you posted.
Back to top
 
 
PhiLho 
Re: Image to text
Reply #8 - Jan 17th, 2009, 7:00pm  
OK, after staring at my code, I finally found a bug! (thanks for pointing it out...)
I fixed the code above.
The error was because I stopped on (actually, near) the bound of the image, but then added the size of a grid cell (x or y). On some image sizes (the one I used!), it is OK, on others, the error shows up.
Back to top
« Last Edit: Jan 17th, 2009, 8:42pm by PhiLho  »  
WWW  
leafcutter
Re: Image to text
Reply #9 - Jan 17th, 2009, 7:13pm  
Excellent, thanks for persevering with it. I'll have a dig in the code to try and understand it better.
Back to top
 
 
andrewowaun
Re: Image to text
Reply #10 - Mar 14th, 2009, 1:50pm  
This is great.

I immediately tried to get it work with a quicktime movie in realtime. It works great.

However when the movie size gets bigger than 400 by 400 I get array index out of bound errors. Trying to use JMC Video to get around that. Where I can size the video to whatever I want.  

Also if you use "//\\" as the text you get a really nice OXOXO effect.

The next thing is the change the string in realtime.

Since Processing goes in a continuous loop, this should not be a problem.

Great Work!
Back to top
 
 
Page Index Toggle Pages: 1
‹ Previous Topic | Next Topic ›