Why stroke can effect text's display?

p5.js Coding Questions
1

Here is my example:

function setup() {
	  createCanvas(640, 480);    
}

function draw() {
    background(200)

    textSize(20)
    text("Welcome", 0, 20)

    stroke(255, 0, 0)
}

This is code’s preview:

image

1 Like
2

looks like p5.js use stroke ( and fill )

Change the color of the text with the fill() function. Change the outline of the text with the stroke() and strokeWeight()functions.

and like

for disable use

strokeWeight(0);

function setup() {
	createCanvas(640, 480);
	textSize(100);
	stroke(255, 0, 0);
	strokeWeight(5);
	fill(0, 255, 255);
}

function draw() {
	background(200);
	text("Welcome", 0, 100);
}

but if your question is:
WHY stroke at the end of draw does (change) anything?
yes, it defines the stroke from the second draw loop on.

1 Like
3

Yes, my question is WHY stroke at the end of draw does (change) anything? And I know that it take effect on the second loop.

Is it reasonable? Processing doesn’t do it like this.

4

yes, with processing IDE ( JAVA mode )
text();
is not effected by stroke()…

even p5.js was started to do something similar like processing
( but in the web browser )
and both groups joined in the processing foundation,
that are 2 groups, what try each their best to make their product better…
what can lead to different solutions.

5

Thanks for you explain, it’s very helpful for me.

6

It doesn’t at first. On the firsts frame it draws black text. On the second frame, draw is called again, and the setting is still there, so it draws a red outline on the text. Then draw keeps being called, over and over, with the new setting.

To only see the first frame, add noLoop() to draw.

function setup() {
    createCanvas(640, 480);    
}

function draw() {
    background(200)

    textSize(20)
    text("Welcome", 0, 20)

    stroke(255, 0, 0)
    noLoop()
}

Here stroke does nothing, and the text stays black, because draw is never called a second time.

Note that, outside immediate mode (with no setup and draw), Processing (Java) draw order works the same way, but with fill rather than stroke.

So, this draws text, then changes text fill to red – text is black, red does nothing:

void draw(){
  background(200);
  textSize(20);
  text("Welcome", 10, 20);
  fill(255, 0, 0);
  noLoop();
}

…but, if you disable the noLoop line, on the second frame text will be drawn red.

7

Thank you, but I need loop to do something. So I will choose processing.js to achieve my goal that browser can perform processing the same to IDE.

8

this looks to me that you got something wrong
@jeremydouglass wanted to help you understand basic draw loop thinking here

the idea was NOT to tell you to use noLoop();

the thinking about draw() loop what you seem not to understand, see

is anyhow same in all 3 processing “versions”

if your question was

how to disable stroke for text() in p5.js

my answer was

strokeWeight(0);