I have some black boxes behind my text. What causes this and how do I elminate it? I can past my code, but my code is really long…
I’m not sure how long this, and I think the issue could be coming from the complexity of the code itself.
//TWEAKS:
//-eliminate the backletters
//text variables:
String text;
String[] texts;
int[] curSplit;
String[] split;
int frameCounter;
int pauseCounter;
int wordCounter = 0;
PFont font;
PFont fontB;
PFont fontC;
PFont fontD;
int clicker = 255;
float dCounter = 0;
int dclick = 0;
//arc variables:
float a, b, t;
float B=0;
boolean doInitVal=true;
int col[];
//radar variables:
boolean radar=false;
String section = "";
String theme = "";
String method = "";
//writing variables:
int count = 0;
String text_one;
String text_two;
String text_three;
String[] split_one;
String[] split_two;
String[] split_three;
String currentLanguage;
boolean wordCount = true;
int textFill = 255;
//projection variables
import deadpixel.keystone.*;
Keystone ks;
CornerPinSurface surface;
PGraphics offscreen;
void setup() {
fullScreen(P3D);
//size(1600, 1200, P3D);
ks = new Keystone(this);
surface = ks.createCornerPinSurface(1800, 1000, 20);
offscreen = createGraphics(1800, 1000, P3D);
col=new int[] {
color(255, 255, 255), color(255, 255, 255)
};
font = loadFont("b.vlw");
fontB = loadFont("a.vlw");
fontC = loadFont("c.vlw");
fontD = loadFont("d.vlw");
textFont(font);
//text_one = "I’m in this sea. - - - - I’m swimming in this sea and I haven’t quite gotten the life raft. - - - - I always think of the Heart of Darkness book. - - It’s like a tiny little book and then it became a part of so many movies, and you know, that’s how I feel - - - - lost in the cause! - - - - If I talk to Patricia, I talk to Benito, I talk to people who have been evicted before who are there to fight - they know. - - They know what it feels like. - - They know what it’s... about. - - It’s called root shock - - [the term] is taken from the study of plants - - - - when you uproot a plant, and you plant it in a new bed of dirt, it takes a while for it to grow. - - Some times it doesn’t grow at all. - - Some times the roots can’t hold onto anything. And some times it dies. - - - - I think that everyone is in this kind of haze. - - - - They’re in love with the tech world. They’re just into all that it can do. - - - - I don’t know how to explain it without using a girl. It’s like the hot girl that every one’s like: she can’t do anything wrong, she’s awesome! You know what I mean? - - - - - - - - ";
text_one = "I'm the test";
split_one = splitTokens(text_one);
text_two = "You're the elephant dude man";
split_two = splitTokens(text_two);
text_three = "Poppies and lilacs.";
split_three = splitTokens(text_three);
currentLanguage = split_one[wordCounter];
stroke(255); //not transparent
fill(0); //not transparent
lights();
float fov = PI/3;
float cameraZ = (height/2.0) / tan(fov/2.0);
perspective(fov, float(width)/float(height), cameraZ/4.0, cameraZ*4.0);
}
void draw() {
PVector surfaceMouse = surface.getTransformedMouse();
//advancing the words:
//frameCounter++;
//if (frameCounter%20==0) { //8, 16
// wordCounter++;
//}
//if (wordCounter==split_one.length-1) {
// wordCounter=0;
//}
//SWITCHBOARD
//pause counter;
//ITERATOR:
frameCounter++;
pauseCounter++;
if (wordCount == true) {
if (frameCounter%20==0) { //8, 16
wordCounter++;
}
}
//SWITCHBOARD: 3 Stanzas, including Radar
if (wordCounter<split_one.length && count == 0 && wordCount == true) {
currentLanguage = split_one[wordCounter];
textFill = 255;
}
if (wordCounter==split_one.length && count == 0) {
count = 1;
wordCounter = 0;
wordCount = false;
pauseCounter = 0;
textFill = 0;
radar = true;
section = "section: 1 of 54";
theme = "theme: eviction";
method = "method: interview";
}
if (pauseCounter > 720 && count == 1) {
wordCount = true;
textFill = 255;
radar = false;
}
if (wordCounter<split_two.length && count == 1 && wordCount == true) {
currentLanguage = split_two[wordCounter];
}
if (wordCounter==split_two.length && count == 1) {
count = 2;
wordCounter = 0;
wordCount = false;
pauseCounter = 0;
textFill = 0;
radar = true;
section = "section: 2 of 54";
theme = "theme: displacement";
method = "method: twitter poems";
}
if (pauseCounter > 720 && count == 2) {
wordCount = true;
textFill = 255;
radar = false;
}
if (wordCounter<split_three.length && count == 2 && wordCount == true) {
currentLanguage = split_three[wordCounter];
}
//REPEATER:
if (wordCounter==split_three.length && count == 2) {
count = 0;
wordCounter = 0;
wordCount = false;
pauseCounter = 0;
textFill = 0;
radar = true;
section = "section: 3 of 54";
theme = "theme: emotions";
method = "method: computer text";
}
if (pauseCounter > 720 && count == 0) {
wordCount = true;
radar = false;
}
background(0);
//SPEED OF ROTATION:
int totalFrames = 24 * 15;
float t = (float)frameCount / totalFrames;
randomSeed(200);
offscreen.beginDraw();
offscreen.background(0);
offscreen.smooth();
offscreen.textFont(fontC);
offscreen.textSize(40); //55
offscreen.fill(255, 100);
//offscreen.text("eviction testimony selections by @delta_glyph for the anti eviction mapping project", 915, 995); //60
//offscreen.fill(clicker);
offscreen.fill(textFill);
offscreen.textFont(fontD);
offscreen.textSize(450);
offscreen.textAlign(CENTER);
offscreen.translate(0, 175);
offscreen.textSize(450);
//offscreen.text("I'm in this sea. I'm swimming in this sea.", 0, 500, 1600, 1000); //height/2
//height/2 + 70
offscreen.text(currentLanguage, 900, 0, -500);
//offscreen.text(split_one[wordCounter], 900, 961, -500); //height/2
//radar switch
if (radar==true){
offscreen.scale(.1);
offscreen.translate(8150-92, 2650+75, 7790);
offscreen.fill(255);
offscreen.textAlign(LEFT);
offscreen.textSize(30);
//"Section: 1 of 54"
offscreen.text(section, 530+285+159, 280);
offscreen.textSize(25);
//"Themes: displacement, eviction, housing, direct action"
offscreen.text(theme, 530+285+159, 290, 300, 200);
//"Themes: displacement, eviction, housing, direct action"
offscreen.text(method, 530+285+159, 492, 300, 200);
offscreen.textSize(30);
offscreen.textLeading(30);
offscreen.text("Light Atlas: Anti Eviction Epic by Delta.Ark", 235+285+159, 665+50, 300, 200);
offscreen.textSize(10);
//this turns the radar
b=radianAbs(b+radians(1));
//this draws the radar
offscreen.pushMatrix();
offscreen.translate(width/2, height/2);
drawArc();
drawAngles();
offscreen.popMatrix();
offscreen.translate(-8150+92, -2650-75, -7790);
offscreen.scale(10);
}
offscreen.translate(0, -175);
offscreen.translate(0, 10);
offscreen.stroke(clicker);
//offscreen.stroke(2);
offscreen.stroke(200, 20);
offscreen.fill(200, 20);
offscreen.strokeWeight(2);
offscreen.noStroke();
//dCounter++;
dCounter = dCounter + .25;
if (dCounter%300==0) {
dCounter=0;
}
//POSITIONING:
offscreen.translate(553, 540, dCounter); //for non rotating city
//CITY SIZE:
int columns = 8;
//this draws multiple apartment blocks:
for (int ix = 0; ix < columns; ix++)
{
for (int iy = 0; iy < columns; iy++)
{
offscreen.pushMatrix();
offscreen.translate(110*ix, 0, 110*iy);
float mult = sin(PI * t/(iy/4 + 2))*cos(PI * t/(ix/3 + 2));
float ang = random(-0.1, 0.1);
float w = random(0.8, 1.1);
float h = random(0.1, 0.4);
drawUnit(w * (1.9 - mult), h*(0.8 + 0.6 * mult), 1, (int)random(4, 6), ang*3*mult);
offscreen.popMatrix();
}
}
offscreen.endDraw();
background(0);
surface.render(offscreen);
}
//this draws the apartment block:
void drawUnit(float w, float h, int lv, int maxLv, float ang)
{
if (lv >= maxLv) return;
//offscreen.rotateY(ang);
offscreen.translate(0, -50 * h, 0);
offscreen.box(w*100, h*100, w*100);
offscreen.translate(0, -45 * h, 0);
for (int i = 0; i < 3; i++)
{
float w2 = w * 0.3 * random(1.4, 1.7);
float h2 = h * random(0.3, 1.3);
float dx = w * 0.5 * ((i / 2) - 0.5);
float dy = w * 0.5 * ((i & 1) - 0.5);
int maxLv2 = maxLv + (int)random(-0.8, 1.1);
offscreen.pushMatrix();
offscreen.translate(dx*50, 0, dy*50);
float ang2 = random(-0.1, 0.1);
drawUnit(w2, h2, lv + 1, maxLv2, ang2);
offscreen.popMatrix();
}
}
void mouseClicked() {
if (clicker == 255) {
clicker = 0;
} else {
clicker = 255;
}
}
void keyPressed() {
switch(key) {
case 'c':
// enter/leave calibration mode, where surfaces can be warped
// and moved
ks.toggleCalibration();
break;
case 'l':
// loads the saved layout
ks.load();
break;
case 's':
// saves the layout
ks.save();
break;
}
}
float radianAbs(float a) {
while (a<0) {
a+=TWO_PI;
}
while (a>TWO_PI) {
a-=TWO_PI;
}
return a;
}
float radianLerp(float a, float b, float t) {
float D=radianShortest(a, b);
return a+D*t;//a+D*t;
}
float radianShortest(float a, float b) {
float D, D2;
D=radianAbs(b-a);
D2=-radianAbs((a-b));
if (abs(D)>abs(D2)) D=D2;
return D;
}
// DRAWING METHODS
void drawAngles() {
float r;
PVector va=new PVector(200, 0, 0);
//controls the length of the line
PVector vb=new PVector(400, 0, 0);
rotate(va, a);
rotate(vb, b);
offscreen.fill(255);
offscreen.textAlign(CENTER);
offscreen.text("#", va.x+va.x/20, va.y+va.y/20+6);
offscreen.text("https://delta.center", vb.x+vb.x/30, vb.y+vb.y/30+6);
// draw unit circle for reference
offscreen.noFill();
offscreen.stroke(255);//0,100,200);
offscreen.strokeWeight(50);
//this is where the circle and the lines are drawn
r=400;
offscreen.ellipse(0, 0, r*2, r*2);
r=420;
//line(-r, 0, r, 0);
//line(0, -r, 0, r);
// draw angles a and b
offscreen.strokeWeight(10);
offscreen.stroke(col[0]);
r=300;
// arc(0,0,r*0.5,r*0.5, 0,a);
offscreen.arc(0, 0, r*2, r*2, 0, a);
offscreen.line(0, 0, va.x, va.y);
//interior line (!)
offscreen.stroke(col[1]);
r=150;
// arc(0,0,r*0.5,r*0.5, 0,b);
offscreen.arc(0, 0, r*2, r*2, 0, b);
offscreen.line(0, 0, vb.x, vb.y);
}
void drawArc() {
PVector vv=new PVector();
//changes the interior lines
float r=150;
float c=radianLerp(a, b, 1);
float D=radianShortest(a, b);
float inc=3.0/degrees(abs(radianShortest(a, b)));
offscreen.strokeWeight(15);
offscreen.strokeCap(SQUARE);
if (D<0) offscreen.stroke(255);
else offscreen.stroke(255);
offscreen.fill(255);
if (D<0) offscreen.fill(255);
vv.set(r, 0, 0);
c=radianLerp(a, b, 0.5);
rotate(vv, c);
offscreen.textAlign(CENTER);
vv.add(vv.x/10, vv.y/10);
offscreen.line(0, 0, vv.x, vv.y);
vv.add(vv.x/10, vv.y/10);
offscreen.text(strDeg(D), vv.x, vv.y+6);
for (float tt=0; tt<=1; tt+=inc) {
vv.set(r, 0, 0);
c=radianLerp(a, b, tt);
rotate(vv, c);
offscreen.line(vv.x*0.5, vv.y*0.5, vv.x, vv.y);
}
float aa=radianAbs(a);
float bb=(a+D);
// arc(x,y,w,h,start,end) needs "start" < "end"
// so we use min() and max to get the order right
// arc(0, 0, r/2, r/2, min(aa, bb), max(aa, bb));
offscreen.noFill();
offscreen.arc(0, 0, r, r, min(aa, bb), max(aa, bb));
offscreen.arc(0, 0, r*2, r*2, min(aa, bb), max(aa, bb));
}
//void initVal() {
// a=HALF_PI;
// B+=HALF_PI*0.33f;
// b=a+B;
// a=random(TWO_PI);
// b=a+random(0.1f, 1.2f)*rndSign()*PI;
// doInitVal=false;
//}
// MISCELLANEOUS - Utility methods
String strDeg(float a) {
return ""+(int)(a*RAD_TO_DEG);
}
float rndSign() {
return random(100)<50 ? -1 : 1;
}
PVector rotate(PVector v, float deg) {
double sindeg, cosdeg;
double newy, newx;
double x=v.x, y=v.y;
sindeg=Math.sin(deg);
cosdeg=Math.cos(deg);
newx=x*cosdeg-y*sindeg;
newy=x*sindeg+y*cosdeg;
v.set((float)newx, (float)newy);
return v;
}
I wonder if it’s also somehow the font that I’m using: “code-bold”
This is definitely not an MCVE ^^. Plus we can’t copy paste you code to try it out because you did not linked the fonts you are using.
If you think it can come from you font then simply make a short piece of code that load the font and display the word test on a grey background and check the result.
I have other text in the sketch that does not have this problem; it displays completely normally.
Which I think means it is not coming from the font.
This looks like a 3D problem. Look at the word “Atlas” – lines are blending through, but fill isn’t. You might be able to fix this in several wayss:
- using HUD approach, by rendering your text into a transparent PGraphics(P2D), then displaying that as an image on top of your 3D scene. https://forum.processing.org/two/discussion/comment/97765/#Comment_97765
- by changing blendMode() before drawing your text – https://processing.org/reference/blendMode_.html
- by adding depth hints with hint() – http://processing.github.io/processing-javadocs/core/processing/core/PGraphics.html#hint-int-
I agree with @jb4x that you should cut your problem down to a much, much smaller sketch before trying to solve it.
Something this size or smaller, if possible:
void setup(){
size(200, 200, P3D);
noLoop();
}
void draw(){
background(128);
fill(255, 64);
pushMatrix();
translate(100, 100, -50);
box(100);
popMatrix();
rect(100, 100, 80, 80);
textSize(32);
fill(255);
text("ATLAS", 80, 110);
}