Hello everyone,
I have been trying to achieve something like boolean operation - difference. So that whenever the text, that is moving horizontally, is covered by the text, that is moving vertically, its pixels in the overlapping area would change into the color of the background. Like so (Imgur: The magic of the Internet)
I have looked into the blend modes, but the only way I could come up with, to achieve that seemed to be with quite complicated use of PGraphics and mask(). (I am open to any other more convenient solution)
The approach would be to make a PGraphic of the vertical text. Then second PGraphic of the horizontal text. And in the third PGraphic (the mask) put PGraphic 1 on top of PGraphic 2. Afterward in a for loop change the pixels that have the color of the horizontal text to blue and the rest to black. To sort of “inverse” the mask. Then apply the mask on the 2nd PGraphic.
and then draw it in this order -----> vertical text ----> background color horizontal text -->horizontal masked text
I sketched it out using static rects, but once I tried to apply the solution to my project, the for loop checking all the pixels on 1920x1080 turned out to be too expensive. Thus I tried to make the “mask PGraphic” only in the area where it is needed.
And now finally to the problem I cannot seem to solve. I have noticed that whenever I first draw PGraphic 1 and 2 in the main display and then tried to create the PGraphic 3 and draw it, the text does not move within the PGraphic 3. If I draw PGraphics 1 and 2 after creating the PGraphic 3 the images move only within the PGraphic 3 but not in the main display.
At the moment I am quite clueless about what is going on and would really appreciate to hear if anyone has any thoughts on this !
Alex
here is the code (I have tried to make it as barebones as possible):
float size;
PGraphics onepc;
PGraphics twopc;
PGraphics thirdpc;
public void verticaltext(String text, float leading, float posy){
String text2 = "";
for (int i = 0; i < text.length(); i++) {
text2 = text2 + text.charAt(i) + "\n";
};
pushMatrix();
fill(0);
translate(width/2.0 + width/400.0,posy + leading/2.0);
textAlign(CENTER,CENTER);
textLeading(leading);
scale(1.42,1);
text(text2, 0,0);
blendMode(NORMAL);
fill(255,0,0);
noFill();
popMatrix();
};
public void verticaltext2(String text, float leading, float posy){
String text2 = "";
for (int i = 0; i < text.length(); i++) {
text2 = text2 + text.charAt(i) + "\n";
};
twopc.pushMatrix();
twopc.textSize(size);
twopc.fill(0);
twopc.translate(width/2.0 + width/400.0,posy + leading/2.0);
twopc.textAlign(CENTER,CENTER);
twopc.textLeading(leading);
twopc.scale(1.42,1);
twopc.text(text2, 0,0);
twopc.fill(255,0,0);
twopc.noFill();
twopc.popMatrix();
};
String string1 = "TEXT1";
String string2 = "TEXT2";
String string5 = "2010";
String string6 = "1990";
float textpos1;
float textpos2;
float space1;
float randoffset1;
float randoffset3;
float vertpos1;
float vertpos2;
float spacevert;
float lerpval = 1;
float leading = 60;
void setup() {
size = 30;
textSize(size);
textpos1 = width/3.0;
textpos2 = width- width/3.0 ;
vertpos1 = height/3.0;
vertpos2 = height-height/3.0;
fullScreen();
onepc = createGraphics(width, height);
twopc = createGraphics(width, height);
thirdpc = createGraphics(width/20,height/15);
};
void draw(){
background(255);
noFill();
stroke(0,0,0);
rectMode(CORNER);
strokeWeight(1.5);
strokeJoin(MITER);
textAlign(CENTER,CENTER);
onepc.beginDraw();
onepc.textSize(size);
onepc.textAlign(CENTER,CENTER);
onepc.stroke(0);
onepc.clear();
onepc.fill(255,0,0);
onepc.noFill();
onepc.pushMatrix();
onepc.translate(textpos1,0);
onepc.scale(1.42,1.0);
onepc.text(string1, 0, height/29.2);
onepc.popMatrix();
onepc.pushMatrix();
onepc.translate(textpos2,0);
onepc.scale(1.42,1.0);
onepc.text(string2, 0, height/29.2);
onepc.popMatrix();
if( (textpos1 )>= 0 && (textpos1 /2.0) < width){
textpos1 = textpos1 + lerpval;
}
else{
textpos1 = textpos1 - width;
};
if((textpos1 ) > width){
onepc.pushMatrix();
onepc.translate(textpos1 - width ,0);
onepc.scale(1.42,1.0);
onepc.text(string1, 0, height/29.2);
onepc.popMatrix();
};
if( (textpos2)>= 0 && (textpos2 < width)){
textpos2 = textpos2 + lerpval;
}
else{
textpos2 = textpos2 - width;
};
if((textpos2 > width)){
onepc.pushMatrix();
onepc.translate(textpos2 - width ,0);
onepc.scale(1.42,1.0);
onepc.text(string2, 0, height/29.2);
onepc.popMatrix();
};
onepc.endDraw();
twopc.beginDraw();
twopc.clear();
twopc.rectMode(CENTER);
verticaltext2(string5,leading,vertpos1);
verticaltext2(string6,leading,vertpos2);
if( (vertpos1 )>= 0 && (vertpos1) < height){
vertpos1 = vertpos1 + lerpval;
}
else{
vertpos1 = vertpos1 - height;
};
if((vertpos1 ) > height){
verticaltext2(string5,leading,vertpos1-height);
};
if( (vertpos2)>= 0 && (vertpos2) < height){
vertpos2 = vertpos2 + lerpval;
}
else{
vertpos2 = vertpos2 - height;
};
if((vertpos2 ) > height){
verticaltext2(string6,leading,vertpos2- height);
};
twopc.endDraw();
//text moving outside of the PCgraphic 3 but not inside of it
imageMode(CORNER);
image(onepc,0,0);
image(twopc,0,0);
imageMode(CENTER);
thirdpc.beginDraw();
thirdpc.clear();
thirdpc.imageMode(CENTER);
thirdpc.image(onepc, thirdpc.width/2.0,thirdpc.height/2.0);
thirdpc.image(twopc, thirdpc.width/2.0,thirdpc.height/2.0);
thirdpc.endDraw();
//text moving inside of the PCgraphic 3 but not outside of it
/*
imageMode(CORNER);
image(onepc,0,0);
image(twopc,0,0);
imageMode(CENTER);
*/
int dimension = thirdpc.width * thirdpc.height;
thirdpc.loadPixels();
for (int i = 0; i < dimension; i += 1) {
if (thirdpc.pixels[i] != color(0)){
thirdpc.pixels[i] = color(0,0,255);
}
else{
thirdpc.pixels[i] = color(0,0,0);
};
}
image(thirdpc,width/2.0,height/15.0/2.0);
};