There's really no simple way to do this, because Text is displayed as a rectangular bitmap, not individual letters. So the only way you're going to be able to do it, is to use some text library. Did you try NextText with the OpenGL renderer? It should fix your performance problems.

Using NextText with OpenGL seems to make things slower and more choppy.

The Geomerative library seems to be the answer I'm looking for but it doesn't work with the current version of processing. Is there any way to force it to work, short of going through the source and fixing everything?

What I'm trying to do is make a timer/counter. The background is constantly changing, so if it doesn't have a border around the text, it will not be visible.

Example using OpenGL and NextText(not tested, real one is a lot longer):

Code:

int num = 1234

Book book = new Book();
setup(){
   size(100,100,OPENGL);
   fill(255);
   stroke(0);
   strokeWeight(5);
}
draw(){
   book.clear();
   num++;
   book.addText(str(num));
   book.stepAndDraw();
} 

Am I doing something wrong here that is causing it to run slow?

EDIT: geomerative link posted is outdated, the one on the library page is up to date.

That might work, but I would have to export each character to .svg one at a time. Also, I saw somewhere that importing .svg files is quite slow in processing. I think that's what it says on the vertext processing library site.

Geomerative is able to do what I want, and it's fast. So I'll stick to that for now.

I'm not sure where/how to post a .zip. Below is a copy of the code that works and a screenshot.

NextText gives this weird broken stroke on the text.

Also, is it correct to use book.clear() every time I want to add new text?

This is the working code:

Code:

import net.nexttext.behaviour.dform.*;
import net.nexttext.behaviour.*;
import net.nexttext.behaviour.control.*;
import net.nexttext.behaviour.physics.*;
import net.nexttext.renderer.*;
import net.nexttext.*;
import net.nexttext.property.*;
import net.nexttext.behaviour.standard.*;
import net.nexttext.input.*;

int num = 1234;

Book book;
PFont font;
PImage bg;

void setup(){
  size(400,400);
  book = new Book(this);
  font = createFont("GeometricBlack.ttf",48); //replace with something else
  bg = createImage(400,400,RGB);
  textFont(font);
  textAlign(CENTER);
  fill(255);
  stroke(0);
  strokeWeight(5);
}

void draw(){
  bg.loadPixels();
  PImage dashed = get(0,mouseY,400,1);
  for(int i = 0; i<dashed.pixels.length; i++){ //colorful line
      dashed.pixels[i] = color(int(random(255)),int(random(255)),int(random(255)));
  }
  background(255);
  book.clear();
  num++;
  book.addText(str(num),mouseX,mouseY);
  book.stepAndDraw();
  image(dashed,0,mouseY); //colorful line follows mouse
}  

Screenshot:

I've tried doing a shadow like effect, it is somewhat visible when the background is the same colour as the text, but it doesn't look very nice. The text also appears to jump when the background becomes the text colour.

I have found a font that has an outline and non-outline version. but they are not monospaced so I will have to manually line them up letter-by-letter, doing that might slow things down.

But first, any idea why NextText gives a messed up stroke like the above picture? Geomerative also has the same problem. It gets more messed up when the font size is small, ~16.

I thought that was an intended effect. Guess I should switch back to geomerative or something.