変更矩形がオーバーレイされたテキストの塗りつぶしの色 - 処理

Question

は、私は繰り返し、シームレスなパターンでアニメーション化し、ここで、この小さなアニメーションを持っています。

私は、テキスト、ループ形状が上を通過することをキャンバスの中央に、白い色を持っています。私が解決しようとしているのは、白いバーが黒くなるテキストの上を通り過ぎるときです。白いバーの半分が「テキスト」のTを越えると、Tの半分は黒くなり、覆われていない半分はまだ対角線上の白になります。

することは、これは文字を分割して行うことでしょうか？マスキングやベクトル画像を使用することで？

は、ここで私が達成しようとしているもののグラフィックの例です。

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

} 

Answer 1

私は2枚の生成された画像を使用してソリューションを働きました。最初の1つはimgTextに黒の背景の前にテキスト（白）だけが含まれています。 2つめのimgMaskはマスクとして機能し、したがってスクリーンラインパターンを含みます。 setup()の部分の中で1回だけ最初の（テキストイメージ）を生成しても問題ありません。あなたのタイプは変更/移動または変形しないためです。 「スキャン」の効果を得るには、フレームごとにマスクイメージを更新する必要があります。これは、すべてのdraw()のループを介してoffsetパラメータのシフトを発生します。

残りの部分はかなり基本的なものです。実際のマスクされたイメージを表示する前に、フレームごとにバックグラウンドをクリアし、逆バージョンimgTextを描画します。

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