Flying text animation jitter

Hi everyone,

I just started with my first sketch in p5. I want to create a flying text effect.
I created a simple prototype in the online editor:

The only problem is that the text is very jittery and not so smooth. How can I fix this?
Or should I use 3D features of p5 to achieve the effect?


i had a idea but not lucky, still should show you.

instead the textSize increase try a scale, but still jumpy

Nice try. I did not know of scale, push and pop. So I learned something from it.
But it does not provide an solution unfortunately.

you might be better off with a pool of items which can be reused and avoiding filter and a few other things you do. a real rough version here. tbh though your version runs well for me so i’m not 100% sure what the issue is.

Hi @hotfooted. Thanks for your feedback! The items are going to by delivered by a webservice and can change in amount over time. I’m not sure if your approach is going to work.

But the jittering is the main problem. I slowed down your version so it’s a lot more visible:

I am very curious which browser you are using if you don’t see the issue. I tested it in Chrome and Firefox on Windows.

I think it has to do with the following similar issues:

Seems like it has something to do with subpixel rendering…

1 Like

one thing should be worth a try, ( very untested )
do the text() thing only one time, into a
PGraphics pg;
and show that using my
push / scale / image(pg,x,y) / pop

but well the minimal fine resolution will still have 1 pix. jitter

1 Like

i see it now. i’m using opera not that it matters much seeing as the jitter does appear. i’d do what kll has recommended.

Well, I changed everything to use graphics. The same problem is happening but on the whole graphics object.

You can see the whole red rectangle moving.

I created an even simpeler example with WebGL. I don’t get it. It should not be that hard right?

? no, it is much better what i see here
win7 / 64bit // firefox browser

the rectangles look good, but when very small the text is badly rendered
but with size about 30 it looks ok.
g.background(0, 0, 0, 0);

i see the letters width jump 1 pix,
but not the position. nothing can be done?