Ways to mask text with shapes?

Programming Questions

helloauan

Ways to mask text with shapes?

in Programming Questions • 2 years ago

Hello all,

I have this little animation here that animates in a looped seamless pattern. I have text, colored white, in the middle of the canvas that the looped shapes pass over. What I am trying to work out is when the white bars pass over the text it masks it to reveal the same text but black.

I have looked into PGraphics, PShape, and PImage, and it seems apparent that masking it only possible with a combination of PGraphics and PImage. Any ideas on how I could do this?

Here is a graphic example of what I'm trying to achieve.

drawLine wob1;
drawLine wob2;
drawLine wob3;
drawLine wob4;
drawLine wob5;
PFont helv;
drawText title;

void setup() {

//frame.setResizable(true);
size(320, 480);
smooth();
frameRate(50);

wob1 = new drawLine(0);
wob2 = new drawLine(200);
wob3 = new drawLine(400);
wob4 = new drawLine(600);
wob5 = new drawLine(800);

title = new drawText();

}

void draw() {

   background(#000000);

   wob1.increment();
   wob1.display(#ffffff);
   wob1.pos();
   wob1.boundary();

   wob2.increment();
   wob2.display(#ffffff);
   wob2.boundary();

   wob3.increment();
   wob3.display(#ffffff);
   wob3.boundary();

   wob4.increment();
   wob4.display(#ffffff);
   wob4.boundary();

   wob5.increment();
   wob5.display(#ffffff);
   wob5.boundary();

   title.rendertitle(#ffffff;

}

class drawLine {

int x = -480;
int y = 0;
int count;

drawLine(int offset) {

   this.x = this.x + offset;

}

void increment() {

   this.x += 3;
   this.y += 4;

}

void display(int col) {

//noStroke();
fill(col);
//translate(0,0);
rectMode(CENTER);
rotate(-PI/3.0);
rect(x,y,100,3000);
rotate(PI/3.0);

}

void pos() {

   println(this.x);

   //if(this.x >= -218 && this.x <= 207){ colr = #000000; } else { colr = #ffffff; }

}

void boundary() {

   if(this.x > 520) {

     this.x = -480; this.y = 0;
   }

}

}

class drawText {

drawText() {

helv = loadFont("Helvetica-Bold.vlw");

}

void rendertitle(int colr) {
   fill(colr);
   textFont(helv, 30);
   text("Text goes here", width/2, height/2, 240, 50);
   }

}

Replies(6)

amnon.owed

Re: Ways to mask text with shapes?

2 years ago

Here is an alternative drawText class which uses PGraphics and pixels arrays to achieve the effect you're after. It inverts the color of the original image if there is something (text or shapes) on the PGraphics. Since it inverts the original color, it works on any color background. Just one example of how it could be done. Another method would be through the mask() function.

class drawText {
PFont helv;
PGraphics pg;
drawText() {
helv = createFont("Helvetica-Bold",50);
pg = createGraphics(width,height,JAVA2D);
pg.beginDraw();
pg.smooth();
pg.textFont(helv, 35);
pg.textAlign(CENTER);
pg.text("Text goes here", pg.width/2, pg.height/2+10);
pg.endDraw();
}
void rendertitle() {
loadPixels();
pg.loadPixels();
for (int y = 0; y < height; y++) {
for (int x = 0; x < width; x++) {
int loc = x + y*width;
float pga = alpha(pg.pixels[loc]);
if (pga > 125) {
float r = red(pixels[loc]);
float g = green(pixels[loc]);
float b = blue(pixels[loc]);
pixels[loc] = color(255-r,255-g,255-b);
}
}
}
updatePixels();
}
}

helloauan

Re: Re: Ways to mask text with shapes?

2 years ago

Thanks heaps for that! It was intuitive to implement, and the function was easy to understand.

One problem that I see though is that pg.smooth(); seems to not work. Is that because you are altering the pixels and then re-rendering them in the titlerender function?

Cheers

amnon.owed

Re: Ways to mask text with shapes?

2 years ago

True. Here's an alternative which uses PGraphics, textMode(SCREEN) and masking resulting in clearer text.

It's also a little more interactive.

String saved = "Type something \n then press enter";
String typing = "";
textLines ohYeah;
void setup() {
size(320, 480);
ohYeah = new textLines();
}
void draw() {
ohYeah.hallelujah(saved);
}
class textLines {
PGraphics textWhite;
PGraphics textBlack;
PGraphics lines;
textLines() {
textWhite = createGraphics(width,height,P2D);
textBlack = createGraphics(width,height,P2D);
lines = createGraphics(width,height,P2D);
}
void hallelujah(String mytext) {
drawText(textWhite,0,255,mytext); // black background, white text
drawText(textBlack,255,0,mytext); // white background, black text
drawLines();
image(textWhite,0,0);
textBlack.mask(lines);
image(textBlack,0,0);
}
void drawText(PGraphics pg, int c1, int c2, String mytext) {
PFont helv = createFont("Helvetica-Bold",35);
pg.beginDraw();
pg.background(c1);
pg.textMode(SCREEN);
pg.textFont(helv, 35);
pg.textAlign(CENTER);
pg.fill(c2);
pg.text(mytext, width/2, height/2);
pg.endDraw();
}
void drawLines() {
lines.beginDraw();
lines.background(0);
lines.rectMode(CENTER);
lines.smooth();
lines.noStroke();
lines.fill(255);
for (int i=0; i<4; i++) {
lines.pushMatrix();
lines.translate(0,235*i-frameCount * 3 % 235);
lines.rotate(-PI/3.0);
lines.rect(0,0,100,width*3);
lines.popMatrix();
}
lines.endDraw();
}
}
void keyPressed() {
if (key == '\n') {
saved = typing;
typing = "";
} else {
typing = typing + key;
}
}

helloauan

Re: Re: Ways to mask text with shapes?

2 years ago

Oh wow, this is awesome. Thank you so much. This has given me a better understanding of PGraphics.

One question though, as I have now edited the code a bit as I am trying to generate each shape on its own, with an OO approach, as this way I will be able to control each shape individually in a later stage of development.

I have taken the drawLine function and put it in a draw class that extends the textLines class. I have created two objects "one", "two" from the drawLine class, and am calling the drawLines method on them. The arguments for that function point to which PGraphics object to draw on "line1" or "line2" and also give the shapes an offset, so they are spaced apart.

Now what seems to be the problem is only one object is showing up, even if I call render methods on both.

Is this because I am trying to mask textBlack with two different objects? If that is the case, is it possible to draw multiple shape objects on to one PGraphics object, so all I'd need to do is simply mask the PGraphics object, and not every single shape.

textLines ohYeah;
drawLine one;
drawLine two;

void setup() {
size(320, 480);
frameRate(60);
ohYeah = new textLines();
one = new drawLine();
two = new drawLine();
}

void draw() {
ohYeah.hallelujah();
}

class textLines {
PGraphics textWhite;
PGraphics textBlack;
PGraphics line1;
PGraphics line2;

textLines() {
    textWhite = createGraphics(width,height,P2D);
    textBlack = createGraphics(width,height,P2D);
    line1 = createGraphics(width,height,P2D);
    line2 = createGraphics(width,height,P2D);

}

void hallelujah() {
    drawText(textWhite,0,255,"YouAreNotAlone"); // black background, white text
    drawText(textBlack,255,0,"YouAreNotAlone"); // white background, black text
    one.drawLines(line1,0);
    two.drawLines(line2, 200);
    image(textWhite,0,0);
    textBlack.mask(line1);
    textBlack.mask(line2);
    image(textBlack,0,0);
}

void drawText(PGraphics pg, int c1, int c2, String mytext) {
    PFont helv = createFont("Helvetica-Bold",35);
    pg.beginDraw();
    pg.background(c1);
    pg.textMode(SCREEN);
    pg.textFont(helv, 35);
    pg.textAlign(CENTER);
    pg.fill(c2);
    pg.text(mytext, width/2, height/2);
    pg.endDraw();
}

}

class drawLine extends textLines {

    int x;

    drawLine() {

    x = -420;

    }

void drawLines(PGraphics pg, int offset) {
    pg.beginDraw();
    pg.background(0);
    pg.rectMode(CENTER);
    pg.smooth();
    pg.noStroke();
    pg.fill(255);
    pg.pushMatrix();
    increment();
    pg.rotate(-PI/3.5);
    pg.rect(x+offset,0,100,width*5);
    pg.popMatrix();
    boundary();
    pg.endDraw();
}

void increment() {

   this.x += 3;

}

void boundary() {

    if(this.x > 270) {

     this.x = -420;
   }

}
}

amnon.owed

Re: Ways to mask text with shapes?

2 years ago

Just draw both lines (or 10 shapes or 100 letters or whatever) on the same mask. On every draw cycle do something like:

lines.background(0); // where lines is the mask PGraphics so within beginDraw-endDraw
Draw everything you need on the mask PGraphics (in this case two independent lines)
Use the mask

helloauan

Re: Re: Ways to mask text with shapes?

2 years ago

Awesome. Works like a dream. :)

Top Reply