Change text fill colour when rect is overlayed - Processing

I have this little animation here that animates in a repeated seamless pattern.

I have text, colored white, in th开发者_Go百科e 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 turns black. So as half the white bar goes over the T of "Text", half the T would be black and the half not covered would be still white on a diagonal.

Would this be done with splitting up the letters? By doing masking, or using vector images?

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

http://imm.io/2Qsb

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);
}

}

I worked out a solution using two generated images. The first one imgText contains only text (white) in front of black background. The second one imgMaskfunctions as mask and therefore contains the screen line pattern. It's fine to generate the first (text image) only once within the setup() part; because your type doesn't change/move or transform. The mask image has to be updated every frame if you want to achieve the effect of "scanning" lines. This happens every draw() loop through the shift of the offset parameter.

The rest is pretty basic; clear the background every frame and draw the inverted version of imgText before you display the actual masked image.

    PImage imgText;
    PImage imgMask;
    PFont font;

    int barHeight = 20;
    float offset = 0;
    float offsetTick = 0.3;

    void setup () {
      size (320, 240);
      noStroke ();
      smooth ();
      font = createFont ("Helvetica-Bold.vlw", 18);

      // Create new image containing only 
      // the white text infront of an empty 
      // black sketch background
      background (0);
      fill (255);
      textFont (font);
      textAlign (CENTER);
      text ("Text goes here", width/2, height/2);
      imgText = createImage (width, height, ARGB);
      copySketchIntoImage (imgText);

      // Create empty mask image
      imgMask = createImage (width, height, ARGB);
    }

    void draw () {

      // Move the scan lines further down 
      // by increasing offset
      offset += offsetTick;
      if (offset > barHeight * 2) {
        offset = 0;
      }

      // Update the text mask image
      updateMask (offset);
      imgText.mask (imgMask);

      // Draw the inverted background+text
      background (255);
      fill (0);
      text ("Text goes here", width/2, height/2);
      // Display the masked version of the
      // text image above the inverted background
      image (imgText, 0, 0);
    }

    void updateMask (float theOffset) {
      background (0);
      fill (255);
      for (float i=theOffset - barHeight; i < height; i += barHeight * 2) {
        rect (0, i, width, barHeight);
      }
      copySketchIntoImage (imgMask);
    }

    // Method to copy all sketch pixels 
    // into an existing PImage.
    void copySketchIntoImage (PImage theDestImage) {
      loadPixels ();
      theDestImage.loadPixels ();
      for (int i=0; i < pixels.length; i++) {
        theDestImage.pixels[i] = pixels[i];
      }
      theDestImage.updatePixels ();
    }