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!
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
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: 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.
I think it has to do with the following similar issues:
Seems like it has something to do with subpixel rendering…
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
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.
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
? 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?