# Flying text animation jitter

**URL:** <https://discourse.processing.org/t/flying-text-animation-jitter/10296>\
**Category:** Coding Questions\
**Created:** [April 15, 2019, 3:11pm UTC](https://discourse.processing.org/t/flying-text-animation-jitter/10296 "2019-04-15T15:11:10Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![AndreasF](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/andreasf/32/4632_2.png) [@AndreasF](https://discourse.processing.org/u/AndreasF)\
**Post date:** [April 15, 2019, 3:11pm UTC](https://discourse.processing.org/t/flying-text-animation-jitter/10296/1 "2019-04-15T15:11:10Z")

</div>

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](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!

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [April 15, 2019, 3:56pm UTC](https://discourse.processing.org/t/flying-text-animation-jitter/10296/2 "2019-04-15T15:56:54Z")

</div>

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](https://editor.p5js.org/kll/sketches/rqNyGr8rH)

---

<div class="post-metadata">

**Author:** ![AndreasF](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/andreasf/32/4632_2.png) [@AndreasF](https://discourse.processing.org/u/AndreasF)\
**Post date:** [April 16, 2019, 8:40am UTC](https://discourse.processing.org/t/flying-text-animation-jitter/10296/3 "2019-04-16T08:40:42Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![hotfooted](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hotfooted/32/3670_2.png) [@hotfooted](https://discourse.processing.org/u/hotfooted)\
**Post date:** [April 16, 2019, 9:49am UTC](https://discourse.processing.org/t/flying-text-animation-jitter/10296/4 "2019-04-16T09:49:44Z")

</div>

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](https://editor.p5js.org/hotfooted/sketches/IWj0ovADY). tbh though your version runs well for me so i’m not 100% sure what the issue is.

---

<div class="post-metadata">

**Author:** ![AndreasF](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/andreasf/32/4632_2.png) [@AndreasF](https://discourse.processing.org/u/AndreasF)\
**Post date:** [April 16, 2019, 12:00pm UTC](https://discourse.processing.org/t/flying-text-animation-jitter/10296/5 "2019-04-16T12:00:04Z")

</div>

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](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.

---

<div class="post-metadata">

**Author:** ![AndreasF](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/andreasf/32/4632_2.png) [@AndreasF](https://discourse.processing.org/u/AndreasF)\
**Post date:** [April 16, 2019, 12:06pm UTC](https://discourse.processing.org/t/flying-text-animation-jitter/10296/6 "2019-04-16T12:06:56Z")

</div>

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

> <https://stackoverflow.com/questions/43545815/html5-canvas-smooth-text-movement-animation-impossible>

  

> <https://stackoverflow.com/questions/34717492/css-transition-font-size-avoid-jittering-wiggling>

Seems like it has something to do with subpixel rendering…

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [April 16, 2019, 12:52pm UTC](https://discourse.processing.org/t/flying-text-animation-jitter/10296/7 "2019-04-16T12:52:16Z")

</div>

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](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

---

<div class="post-metadata">

**Author:** ![hotfooted](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hotfooted/32/3670_2.png) [@hotfooted](https://discourse.processing.org/u/hotfooted)\
**Post date:** [April 16, 2019, 12:56pm UTC](https://discourse.processing.org/t/flying-text-animation-jitter/10296/8 "2019-04-16T12:56:43Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![AndreasF](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/andreasf/32/4632_2.png) [@AndreasF](https://discourse.processing.org/u/AndreasF)\
**Post date:** [April 16, 2019, 3:21pm UTC](https://discourse.processing.org/t/flying-text-animation-jitter/10296/9 "2019-04-16T15:21:10Z")

</div>

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](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](https://editor.p5js.org/AndreasFurster/sketches/8S-6Zr82u)

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [April 16, 2019, 3:57pm UTC](https://discourse.processing.org/t/flying-text-animation-jitter/10296/10 "2019-04-16T15:57:00Z")

</div>

? 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?