Erasing text or lines?

p5.js Coding Questions
1

Hi,

I’m new to p5.js (and js in general) and stumbled over this while playing around with the first learning examples. Not sure if Beginners category is only for processing, so I post here:

If I write a text in black over white background and then overwrite this with the same text in white, it does not disappear completely as I had expected.

How can I overwrite text without knowing its exact width and height and without overwriting everything at each draw()?

The same happens with lines. So, how do I “delete” lines?
Is there a setting, that makes drawing more deterministic?

sample code that produces the behaviour:

function setup() {
  createCanvas(100, 100);
  fill(0);
  stroke(0);
  line(10, 10, 90, 90);
  noLoop();
}

function draw() {
  fill(255);
  stroke(255);
  line(10, 10, 90, 90);
}

Greetings,
Joachim

2

No, do that. That is how you should do it. Redraw your entire scene every frame. To erase something, just don’t draw it!

3

Always good to know how things are supposed to work.
I thought - after my notebook became quite loud - it might be overkill to draw a whole scene when all I want to do is update a small text or move a line. Seems thats not the usecase of p5.

Thanks.

4

The alternative is to keep layers in p5.Image or p5.Graphics, and redraw only that layer – then composite the layers each draw frame.

if your sketch is largely inactive and unchanging, you can also noloop to stop rendering, then loop during an active mode (like text editing or mouse interaction).

1 Like
5

possibly
Unwanted beeping sounds with Vertex functions - #2 by kll can help.

now for the use of the 2 modes:

function draw() {
  background(); 
  // redraw all again 60 times per sec
}

or disabled

// background();

one tip, for showing changing text need to clean up background behind first
like p5.js Web Editor here.