Why does Background 0 make text dissapear in P5.JS?

Question

I have the following block of code.

I am trying have a dark, black background. I am already able to draw stuff on this black canvas. Now, I am trying to add text on top of this black background.

let canvasx = 400;
let canvasy = 400;

let defaultTextSize = 50;
let defaultFontType = 'Georgia';
let defaultTextContent = "P5DRAWINGTREEDEFAULTTEXT";
let defaultTextX = 0;
let defaultTextY = 0;

function setup() {
  defaultTextX = canvasx / 2;
  defaultTextY = canvasy / 2;
  createCanvas(400, 400);
}

function draw() {
  background(0);

  doTheWords();
}

function doTheWords() {
  setupDefaultTextStyle()
  testSimpleTextOne();
}

function setupDefaultTextStyle() {
  fill(0, 102, 153, 51);
  textFont(defaultFontType);
  textSize(defaultTextSize);
  textAlign(CENTER, CENTER);
}

function testSimpleTextOne() {
  text(defaultTextContent, defaultTextX, defaultTextY);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>

Any value other zero, for background(0); I can see my text. The moment I put zero, the text dissappears but the rest of the drawing (the actual art that I am drawing, not shown in above code) remains as it is.

Why would background(0) paint away the text?

Note : The text color can be anything, like, pure white, but the problem remains.

Update 1

I moved the text code to setupDefaultTextStyle.

function setupDefaultTextStyle() {
    fill(0, 102, 153, 51);    
    textFont(defaultFontType);
    textSize(defaultTextSize);
    textAlign(CENTER, CENTER);
    text(defaultTextContent, defaultTextX, defaultTextY);
}

Now, I am getting the display. So, the issue is resolved, but I am still curious, why would text not work, when it is called as a separate function?

When I execute your code I can see the text on top the black background. Seems like I can't reproduce it — Mitchell van Zuylen, Oct 10 '21 at 07:39
I am running it directly on the P5 Web Editor. Could you give it a try on that? https://editor.p5js.org/ — Jay, Oct 10 '21 at 07:41
I updated your question to use a runnable snippet. Please use that in the future. For more info https://stackoverflow.com/questions/67410651/how-do-i-include-a-runnable-p5-js-sketch-in-a-stackoverflow-question — Paul Wheeler, Oct 10 '21 at 09:56
I was not aware that P5 can also be put as runnable. I will ensure future questions have the runnable code. — Jay, Oct 11 '21 at 02:34

score 2 · Accepted Answer · answered Oct 10 '21 at 11:08

The alpha value you assigned was way too low to be visible. (The alpha is the last parameter in the fill function). Also, I cleaned up a bit since you made a couple of variables that could be avoided. You can define the canvas first then use the default variables of width and height (width and height of the canvas) to set defaultTextX and Y

let defaultTextSize = 50;
let defaultFontType = 'Georgia';
let defaultTextContent = "P5DRAWINGTREEDEFAULTTEXT";
let defaultTextX = 0;
let defaultTextY = 0;

function setup() {
  createCanvas(400, 400);
  defaultTextX = width / 2;
  defaultTextY = height / 2;
}

function draw() {
  background(0);

  doTheWords();
}

function doTheWords() {
  setupDefaultTextStyle()
  testSimpleTextOne();
}

function setupDefaultTextStyle() {
  fill(0, 102, 153, 255);
  textFont(defaultFontType);
  textSize(defaultTextSize);
  textAlign(CENTER, CENTER);
}

function testSimpleTextOne() {
  text(defaultTextContent, defaultTextX, defaultTextY);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>

score 1 · Answer 2 · answered Oct 10 '21 at 10:00

1

Your issue is clearly not reproducible. You claimed that even when using "pure white" the text was still not visible, but as you can see, it is visible (same results in editor.p5js.org). You're just using a very dark and mostly transparent color.

let canvasx = 400;
let canvasy = 400;

let defaultTextSize = 50;
let defaultFontType = 'Georgia';
let defaultTextContent = "P5DRAWINGTREEDEFAULTTEXT";
let defaultTextX = 0;
let defaultTextY = 0;

function setup() {
  defaultTextX = canvasx / 2;
  defaultTextY = canvasy / 2;
  createCanvas(400, 400);
}

function draw() {
  background(0);

  doTheWords();
}

function doTheWords() {
  setupDefaultTextStyle()
  testSimpleTextOne();
}

function setupDefaultTextStyle() {
  fill(255);
  textFont(defaultFontType);
  textSize(defaultTextSize);
  textAlign(CENTER, CENTER);
}

function testSimpleTextOne() {
  text(defaultTextContent, defaultTextX, defaultTextY);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>

answered Oct 10 '21 at 10:00

Paul Wheeler

18,988
3
28
41

I have only recently started P5. New to P5, new to JS. apologies for any mistaken, wrong claims. It was accidental, the wrong claims. will try to be more careful :) – Jay Oct 11 '21 at 02:35
No worries. Sorry if I worded my answer harshly. I'm glad Olaf zeroed in on your issue regarding the alpha value. – Paul Wheeler Oct 11 '21 at 02:41
1

Actually, now that I read Olaf's answer I can see why you might have associated the problem with the call to `background()`. If you didn't draw a background, or any other element behind your text, on each frame then each successive frame draws the same text over and over again, essentially making the alpha value meaningless (because if you overlay the same color enough times, even if each layer is somewhat transparent the result becomes opaque). – Paul Wheeler Oct 11 '21 at 02:44
no apologize neccessary. I work as a tutor myself, and I am pretty harsh on my students. some harshness is neccesary :) additional notes have helped. – Jay Oct 11 '21 at 09:23

Why does Background 0 make text dissapear in P5.JS?

Update 1

2 Answers2