Изменение цвета заливки текста при наложении прямоугольника - Обработка - PullRequest
Новая
       27

Изменение цвета заливки текста при наложении прямоугольника - Обработка

0 голосов
/ 31 декабря 2010

У меня есть небольшая анимация, которая анимируется повторяющимся бесшовным рисунком.

У меня есть текст белого цвета в середине холста, через который проходят петельные фигуры.То, что я пытаюсь выяснить, - это когда белые полосы проходят над текстом и становятся черными.Таким образом, поскольку половина белой полосы проходит над буквой «Текст», половина буквы будет черной, а половина, не покрытая, будет по-прежнему белой по диагонали.

Будет ли это сделано с разбивкой букв?Делая маскировку или используя векторные изображения?

Вот графический пример того, чего я пытаюсь достичь.

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

}

1 Ответ

0 голосов
/ 04 января 2011

Я разработал решение, используя два сгенерированных изображения. Первый 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 ();
    }
...