rect가 오버레이 될 때 텍스트 채우기 색 변경 - 처리

Question

반복 된 연속 패턴으로 움직이는이 작은 애니메이션이 있습니다.

캔버스의 중간에 반복되는 모양의 텍스트가 흰색으로 표시됩니다. 내가 해결하려고하는 것은 흰색 막대가 검정으로 변하는 텍스트를 지나칠 때입니다. 그래서 흰 막대의 절반이 "텍스트"의 T를 넘기 때문에 T의 절반은 검은 색이고 덮지 않은 절반은 여전히 ​​대각선의 흰색입니다.

글자를 분할하면됩니까? 마스킹을하거나 벡터 이미지를 사용하면됩니까?

다음은 내가 달성하고자하는 그래픽 예입니다.

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

http://imm.io/2Qsb

나는 두 생성 된 이미지를 사용하여 솔루션을했다. 첫 번째 것은 imgText 검은 색 배경 앞에 텍스트 (흰색) 만 포함되어 있습니다. 두번째 것 imgMask는 가면으로 작용하고 그러므로 스크린 선 본을 포함한다. setup() 부분 내에서 첫 번째 (텍스트 이미지)를 한 번만 생성하면됩니다. 유형이 변경/이동 또는 변형되지 않기 때문입니다. 마스크 이미지는 "스캐닝"라인의 효과를 얻으려면 매 프레임마다 업데이트해야합니다. 이것은 모든 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(); 
    }