How to fill a text with an image ?

Furrane

First let me show you what i'm trying to achieve : something similar to this.

So that's rendering text using an image as "texture".

I don't know if there is some obvious way to do this I'm missing. I though it might be doable by changing the color of every pixel of the text with corresponding pixel of the source image.

Problem is, although I can access the image's pixel array I have no clue how to do it for the text.

Thanks to anyone that can help me =)

GoToLoop

Do you know about PGraphics https://processing.org/reference/PGraphics.html

A red background(#FF0000); + 100% transparent fill(0, 0); is a good start. *-:)

Furrane

Hello GoToLoop and thanks for your answer. I went and looked around about PGraphic and I think I slowly begin to understand but I'm stuck.

So here is my code :

PGraphics img, txt;
String url = "http://" + "psycho-therapie-toulouse.fr/wp-content/uploads/2015/06/7.jpg";
PImage photo;



void setup() {
  size(600, 350);
  photo = loadImage(url);
  txt = createGraphics(width, height);
  PFont font = loadFont("LemonMilk-24.vlw");

  txt.beginDraw();

  // here I'm trying to emulate a background since it seems I can't txt.backgroun
  txt.fill(50);
  txt.rect(width,height,0,0);
  // -------
  txt.textAlign(CENTER, CENTER);
  txt.fill(0,0);
  txt.textFont(font,24);
  txt.text("test text", width/2, height/2);
  txt.endDraw();
  // Here is my issue :
  image(photo,0,0);
  image(txt, 0, 0);
  // From what I understood, it should first draw the photo ( which serves as text texture ) 
  // and then apply the txt PGraphics which should be transparent text + solid bgrd
  // but I just end up with the picture.

}

PS : Ignore the html thing going on in the url statment, I kind of ruined the code formatting on this post ^^ (fixed)

Furrane

Ok now I got it to work like I wanted.

I think of those PGraphics objects as layers you would use in say photoshop.

My problem is I need to have the text layer to be transparent text and the "rest" solid color. I can have transparent text, but when i set txt.background() it set the background for the whole layer, not just the "rest".

Meaning even if I set text to transparent it will just show the "local" background and not go deeper to the "photo" image.

PGraphics img, txt;
String url = "http://"+"psycho-therapie-toulouse.fr/wp-content/uploads/2015/06/7.jpg";
PImage photo;

void setup() {
  size(600, 350);
  photo = loadImage(url);
  txt = createGraphics(width, height);
  PFont font = loadFont("LemonMilk-24.vlw");
}

void draw() {
  txt.beginDraw();
  txt.background(0, 150);
  txt.textAlign(CENTER, CENTER);
  txt.fill(0, 0);
  txt.textFont(loadFont("LemonMilk-24.vlw"), 24);
  txt.text("test text", width/2, height/2);
  txt.endDraw();

  image(photo, 0, 0);
  image(txt, 0, 0);
}

BarbaraAlmeida

PGraphics txt;
String url = "http://"+"psycho-therapie-toulouse.fr/wp-content/uploads/2015/06/7.jpg";
PImage photo;

void setup() {
  size(600, 350);

  PFont font = loadFont("LemonMilk-24.vlw");

  txt = createGraphics(width, height);  
  txt.beginDraw();
  txt.background(0);
  txt.textAlign(CENTER, CENTER);
  txt.fill(255);
  txt.textFont(font, 24);
  txt.text("test text", width/2, height/2);
  txt.endDraw();

  photo = loadImage(url);
  photo.resize(width, height);
  photo.mask(txt);
}

void draw() {
  background(50, 0, 100);
  image(photo, 0, 0);
}

https://processing.org/reference/PImage_mask_.html

Furrane

Wow Barbara that's awesome thanks a lot ! In the mean time I was trying something with the blend function. It did work but was limitating me as far as the background color ( white or black ).

I did manage to get something decent :

String url = "http://"+"cdn.theatlantic.com/assets/media/img/mt/2015/06/rbow-1/lead_960.jpg?1435518405";


void setup() {
  size(600, 300);

  PImage photo = loadImage(url);
  photo.resize(width,height);

  image(photo,0,0);
  fill(255);
  rect(-1,100,width+1,100);

  PFont font = loadFont("LemonMilk-48.vlw");
  fill(0);
  textFont(font,30);
  textAlign(CENTER,CENTER);
  text("#CodingRainbow", width/2, height/2);
  blend(photo,0,100,width,100,0,100,width,100,ADD);
  save("test.png");

}

The rect stuff was just to try and do something more than plain boring full white/black. Anyway Barbara you're awesome thanks again =) EDIT : And ofc you too gotoloop :p

GoToLoop

Oh sorry. I don't have much experience w/ that. Indeed fill(0, 0); is far from enough to get any text() w/ transparency. X_X

@BarbaraAlmeida has already come up w/ a solution. But I was also working on 1 just now. 3:-O

And I've ended up w/ a very similar solution too. Gonna post it as well. Why not? =P~

// forum.Processing.org/two/discussion/15701/
// how-to-fill-a-text-with-an-image

// GoToLoop (2016-Mar-26)

static final String URL = "http:/" +
  "/Psycho-Therapie-Toulouse.fr" +
  "/wp-content/uploads/2015/06/7.jpg";

static final String FONT = "LemonMilk-24.vlw";
static final String TXT  = "TEST TEXT";

static final int TXT_SIZE = 0200;
static final color BG = #FF0000;

PGraphics title;
PImage photo, bg;
PFont font;

void settings() {
  photo = loadImage(URL);
  size(photo.width, photo.height);
  smooth(4);
  noLoop();
}

void setup() {
  bg = createImage(width, height, ARGB);
  java.util.Arrays.fill(bg.pixels, BG);

  title = createGraphics(width, height);
  font  = loadFont(FONT);

  title.smooth(4);
  title.beginDraw();

  title.textAlign(CENTER, CENTER);
  title.textFont(font, TXT_SIZE);
  //title.textSize(TXT_SIZE);

  title.background(-1);
  title.fill(0);
  title.text(TXT, width>>1, height>>1);

  title.endDraw();
  bg.mask(title);
}

void draw() {
  background(photo);
  image(bg, 0, 0);
}

Furrane

Thanks GoToLoop ! There's a lot of stuff I don't get in your code but again I'm quite the beginner at this. I tried and run your code but I had an error with the boolean @ line 38. I erased it and it worked like a charm.

The .mask was the key to my problem and you two delivered and helped me, thanks a lot to you both =)

GoToLoop

... but I had an error with the boolean @ line 38.

Oops! I've messed up textFont() w/ createFont(): 8-}

1. https://Processing.org/reference/textFont_.html
2. https://Processing.org/reference/createFont_.html

Since i don't have the ".vlw" file, I've just used textSize() and commented out textFont().

Anyways, glad it worked for ya in the end. :D