search

processing / p5.js

p5.js is a client-side JS platform that empowers artists, designers, students, and anyone to learn to code and express themselves creatively on the web. It is based on the core principles of Processing. http://twitter.com/p5xjs —
http://p5js.org/
GNU Lesser General Public License v2.1
21.72k stars 3.34k forks source link

Rotating text should not jitter #6457

Open quinton-ashley opened 1 year ago

quinton-ashley commented 1 year ago

Increasing Access

Eliminating jitter could provide a better experience for users.

Most appropriate sub-area of p5.js?

Feature enhancement details

I noticed another issue with rotating text in p5.js, it jitters, in way that looks random, from the center of rotation:

https://editor.p5js.org/quinton-ashley/sketches/52S5IHlGo

The text caching system I've implemented in p5play and q5.js fixes this issue. Look at the difference with textCache(false) vs textCache(true), it's especially obvious if you look at the emoji.

The problem is not as visible with lower text sizes or slower rotation speeds but I still thought I'd report the issue in case anyone is experiencing this issue they can use p5play.

evoxf1 commented 1 year ago

May i proceed with attempting this?

quinton-ashley commented 1 year ago

@davepagurek what do you think about this new issue I found?

davepagurek commented 1 year ago

@evoxf1 can you maybe help narrow down the cause as the first step? replacing text with images might fix it but we likely want to see if there's a lower cost solution first. It would be good to know if this is reproducible with fonts loaded via loadFont (those are drawn as normal paths) and with fonts added via CSS and referenced by their font family, or if this just applies to browser default fonts.

evoxf1 commented 1 year ago

i will revert back soon after I have examined it.

update: it doesn't look like it is rotating in the center of its axis, feels a bit odd, also It looks like the browser fonts are doing this thing, but if we use emojis it doesnt feels like, also textcache false or true doesnt make any difference as of now

quinton-ashley commented 1 year ago

I think @evoxf1 is right, it seems like there's only a problem with text that has emojis.

I made a better example. If you set textCache(true) do you see the robot emoji rotate smoothly? I've only tested this on macOS.

https://editor.p5js.org/quinton-ashley/sketches/t57I-yFpw

davepagurek commented 1 year ago

I think if we wanted to do an image cache just for emoji, that could be a feasible well-scoped change. There's also a size limit on the emoji font images at least on Macs rn so there are less tradeoffs to storing them as fixed-size images (last I checked I think 128x128 was the size I found it made sense to cache them at? https://editor.p5js.org/davepagurek/sketches/Ff0uCrQr6 This is from last summer though)

evoxf1 commented 1 year ago

I think @evoxf1 is right, it seems like there's only a problem with text that has emojis.

I made a better example. If you set textCache(true) do you see the robot emoji rotate smoothly? I've only tested this on macOS.

https://editor.p5js.org/quinton-ashley/sketches/t57I-yFpw

there is a slight and I mean very slight jitter but it goes after a full rotation and doesn't happen too often. Also the axis problem seems to be only in text that maybe due to font sizes or idk why. I am on windows..

quinton-ashley commented 1 year ago

I see tons of jitter the whole time the emoji rotates with textCache(false) and no jitter at all with textCache(true) on macOS.

evoxf1 commented 1 year ago

I see tons of jitter with textCache(false) and no jitter at all with textCache(true) on macOS.

Ummmm, i am om windows and both look completely equivalent. You see jitter in both text and emojis? there might be problem in caching..

quinton-ashley commented 1 year ago

Maybe the problem only exists on macOS when using emojis then.

Here's a video comparison. Do you see the jitter in the video of p5.js vs how smooth it looks with p5play's text cache feature? Text caching fixes the problem.

p5.js: https://github.com/processing/p5.js/assets/20031683/7f4c38cd-0632-4bb6-8524-60f41c16d26f

p5play (text caching turned on): https://github.com/processing/p5.js/assets/20031683/900f4ab6-992e-413e-999d-7955da032c12

davepagurek commented 1 year ago

This seems to be a known active bug in Chrome: https://bugs.chromium.org/p/chromium/issues/detail?id=983155

It looks like it's been open for a while though with no progress as it seems to be an issue with some underlying Mac rendering libraries (this bug's test case html file also shows the same behaviour in Firefox for me.)

Regardless of the bug, it could be worth rendering emoji as images anyway so that WebGL text (which currently does not support emoji) can get access to them.