Blend Text with Visuals?

Programming Questions

bourdonpr..

in Programming Questions • 23 days ago

I have a text that I want to blend with some animations I run on screen (shapes, lines, etc). I want the text to be visible ONLY when shapes pass on top of the text (text remains in a specific position). Is this possible, or do I have to convert it to .png and then try to blend() with multiply?

Or is there another method?

Thanks

Here is an example of what I am trying to achieve:

Replies(3)

dimkir

Re: Blend Text with Visuals?

23 days ago

There was just one forum post recently which showed something very similar. But I can't find it :( (maybe 2 weeks ago)

The idea was to use 2 different PGraphics. You draw text to one. And mask into another one.

Then you display one masked with the other.

I can't find the latest post, but still will give you a link to post on similar topic (on masking)

https://forum.processing.org/topic/shapes-as-a-mask

bourdonpr..

Re: Blend Text with Visuals?

19 days ago

Pfff....

I have tried this method with mask() and blend() as well, but I can't make it to work! Here is an example I am working on.

Thanks!

PVector location; // Location of shape
PVector velocity; // Velocity of shape
PVector gravity; // Gravity acts at the shape's acceleration
PGraphics ball, pg;
void setup() {
size(400,400);
smooth();
location = new PVector(100,100);
velocity = new PVector(1.5,2.1);
gravity = new PVector(0,0.2);
}
void draw() {
background(0);
pg = createGraphics(400, 400);
pg.beginDraw();
pg.smooth();
pg.textFont(createFont("ArialMT-48.vlw", 80));
pg.fill(255);
pg.text("TESTING", 30, 150, pg.width, pg.height);
pg.endDraw();
location.add(velocity);
velocity.add(gravity);
if ((location.x > width) || (location.x < 0)) {
velocity.x = velocity.x * -1;
}
if (location.y > height) {
velocity.y = velocity.y * -0.95;
location.y = height;
}
ball = createGraphics(400, 400);
ball.beginDraw();
ball.noStroke();
ball.fill(255,0,255);
ball.ellipse(location.x,location.y,100,100);
ball.endDraw();
ball.blend(pg, 0, 0, pg.width, pg.height, 0, 0, pg.width, pg.height, EXCLUSION);
image(ball, 0, 0);
}

PhiLho

Re: Blend Text with Visuals?

18 days ago

pg.textFont(createFont("ArialMT-48.vlw", 80));

1. Don't load a file on each frame! It is good if you want to slow down your sketch!
2. createFont() is to be used with native fonts, not with VLW fonts. So:
3. Use loadFont(), in setup() (or createFont() with the name "ArialMT", ie. using the font installed on your system). Assign its result to a global PFont variable.