How to outline text?

damned

I read reference and the forum but couldn't manage to outline a text in Processing 3.1.1.

For example take:

void setup(){ size(800,800); } void draw(){ stroke(360); strokeWeight(1); fill(0); textSize(30); text("test",200,200); }

won't return an outlined text. How can I achieve that? Thanks in advance for hints or answers.

Chrisir

I think you need a library

http://www.generative-gestaltung.de/P_3_2_1_01

but it's not easy at all....

quark

Processing does not use the stroke to outline fonts so you have to use the generative library suggested by Chrisir

TfGuy44

size(200,200);
background(0);
fill(255,0,0);
for(int x = -1; x < 2; x++){
//  for(int y = -1; y < 2; y++){
//    text("LIKE THIS!", 20+x,20+y);
//  }
    text("LIKE THIS!", 20+x,20);
    text("LIKE THIS!", 20,20+x);
}
fill(255);
text("LIKE THIS!", 20,20);

Quoque

Great wee bit of code TFGuy!

jeremydouglass

Yes, very neat effect.

Here's a 10 second loop, zooming in on / scaling up @TfGuy 's outlined text trick so that you can see it render at multiple sizes:

int tsize, tstart, tstop;
void setup() {
  size(200, 200);
  frameRate(30);
  tstart = 10;
  tstop = 200;
  tsize = tstart;
  textAlign(CENTER,CENTER);
}
void draw() {
  background(0);
  fill(255, 0, 0);
  translate(width/2,height/2);
  tsize++;
  textSize(tsize);
  for (int x = -1; x < 2; x++) {
    text("SCALE THIS!", x, 0);
    text("SCALE THIS!", 0, x);
  }
  fill(255);
  text("SCALE THIS!", 0, 0);
  if (tsize>tstop){
    tsize = tstart;
  }
}
void keyPressed(){
  looping=!looping;
}

This demo is a bit jittery, but you can see that the outlining works really well even at high font sizes. If you wanted to scale these borders up as well and make them thicker you would need to also parameterize the for loop -- and the number of text() draws would increase accordingly.

jeremydouglass