Flying text animation jitter

p5.js Coding Questions
1

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:
https://editor.p5js.org/AndreasFurster/sketches/jc1Ozy7VU

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?

Thanks!

2

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

instead the textSize increase try a scale, but still jumpy
https://editor.p5js.org/kll/sketches/rqNyGr8rH

3

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.

4

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.

5

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: https://editor.p5js.org/AndreasFurster/sketches/BUYXJwbz5

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.

6

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


Seems like it has something to do with subpixel rendering…

1 Like
7

one thing should be worth a try, ( very untested )
do the text() thing only one time, into a
PGraphics pg;
https://processing.org/reference/PGraphics.html
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
8

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.

9

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

https://editor.p5js.org/AndreasFurster/sketches/OIDE3Yqy0

You can see the whole red rectangle moving.

Edit:
I created an even simpeler example with WebGL. I don’t get it. It should not be that hard right?
https://editor.p5js.org/AndreasFurster/sketches/8S-6Zr82u

10

? 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.
with
g.background(0, 0, 0, 0);

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