4 ms·

Beautiful, well done. I love that we can now publish short interactive-ish experiments like that on the plain web. Also, I love the little details - the wheels

by Asooka 9y ago

Beautiful, well done. I love that we can now publish short interactive-ish experiments like that on the plain web. Also, I love the little details - the wheels conform to the shape of the track and the pantograph conforms to the shape of the wires above. Mean rant below: However, this suffers from terrible hitching and framerate issues. I tried it both in Firefox and Chrome (latest stable release for both), on Windows, on a i7-6700k cpu and nVidia GTX 1080ti gpu. The framerate just isn't stable and there are random hitches of one or two dropped frames. By itself this wouldn't be that big of a problem, but combined with the very contrasting art style (black on full white), it started giving me a headache and making me seriously sick after a short while. Even when not dropping frames, the motion was quite juddery, e.g. I saw the nearby poles jumping from position to position. I won't ask that the authors resolve the frame-rate issues, because I suspect it's an inherent issue to the browsers. Instead I would suggest that motion blur be implemented to hide the harsh frame-to-frame transitions and less contrast be employed between foreground and background (maybe make the background a bright grey rather than 100% full white).

ju-st 9y ago
i was more annoyed by the fixed 30fps framerate
cyannaro 9y ago
Interestingly it was very smooth on my iPhone SE but stuttered a lot on my desktop.
- mschuster91 9y ago
  MBP2015 here, with Intel GPU, and Chrome with 100+ open tabs - no problems here. I even noticed that you're playing a cat avatar. Just how awesome is this.
chrisb 9y ago
Reducing the browser window size fixed the glitching for me (Chrome, MacBook Pro).
cyberferret 9y ago
I've got a 32GB iMac here, and in Chrome, on full screen on my 27" display, the animation worked smooth as butter. In fact, the smooth scrolling added to the whimsical, arty style of the site for me, leading to a great experience. EDIT: Actually, I just tried it again in entirety, and noticed some juddering from time to time. However, when I am looking at the beautiful background artwork (which is most of the time), that juddering is less obvious. I guess it depends if you are looking at the background art or the foreground animation as to whether it is really apparent for you.
mastazi 9y ago
I had your same experience, it looked choppy to me. I guess people who have a "gaming capable" PC will notice the micro-stuttering more than others, because they are used to fluid animations. It's interesting how no one minds about low FPS when watching a movie (24 FPS is "cinematic"!), but when in a game (or any interactive experience where you provide a nontrivial amount of input) suddenly FPS has a huge impact on the experience.
- scott_karana 9y ago
  Motion blur makes all the difference.
mattdesl 9y ago
> I won't ask that the authors resolve the frame-rate issues, because I suspect it's an inherent issue to the browsers. Stuttering in WebGL is not an inherent issue in browsers. :) To me it seems like something in their code is thrashing the GC. Maybe the `getLUT` function which creates a new 100-length array every frame...
alexanderperrin 9y ago
Thanks so much for the kind words and also the performance analysis! I agree with you 100% that the motion can be jarring and unpleasant. I'm yet unsure as to what exactly is causing the issue, but I believe it's something with regards to GC that is just over my head for the moment. Resolution also plays a huge factor, and as a temporary measure I've added a half-res toggle in the info panel. This helps out especially with high DPI monitors. Whilst it shouldn't be surprising, I'm astounded as to how much of a science and balancing act it is to achieve frames that at least ~feel~ smooth, especially on web browsers. I'll be working away as much as possible to try and make things silky all over. Thanks for your patience until then!
- cyberferret 9y ago
  Just curious - did you draw all this artwork yourself? It is exquisite. If so, did you draw onto paper then scan in, or did you use a tablet etc. to create vector drawing that you then animated?
- Lorin 9y ago
  Just something that might help you debug it, it looked a lot more fluid on my 60hz screen than my 144hz one, where it got pretty jarring at full tram speed. You might also want to add a rate limiter on the bell, but that's personal preference.
- jacobolus 9y ago
  On all my browsers here it animates smoothly enough (good frame rate), but every time it renders changing parts of a frame there’s some flashing effect, and as a result when the car is moving fast looking at the background is pretty unpleasant, especially skinny high-contrast elements like the trees and posts against a white background Maybe that’s just inevitable when using the canvas for painting?

by Asooka 9y ago

ju-st 9y ago

i was more annoyed by the fixed 30fps framerate

cyannaro 9y ago

Interestingly it was very smooth on my iPhone SE but stuttered a lot on my desktop.

mschuster91 9y ago
MBP2015 here, with Intel GPU, and Chrome with 100+ open tabs - no problems here. I even noticed that you're playing a cat avatar. Just how awesome is this.

chrisb 9y ago

Reducing the browser window size fixed the glitching for me (Chrome, MacBook Pro).

cyberferret 9y ago

I've got a 32GB iMac here, and in Chrome, on full screen on my 27" display, the animation worked smooth as butter. In fact, the smooth scrolling added to the whimsical, arty style of the site for me, leading to a great experience. EDIT: Actually, I just tried it again in entirety, and noticed some juddering from time to time. However, when I am looking at the beautiful background artwork (which is most of the time), that juddering is less obvious. I guess it depends if you are looking at the background art or the foreground animation as to whether it is really apparent for you.

mastazi 9y ago

I had your same experience, it looked choppy to me. I guess people who have a "gaming capable" PC will notice the micro-stuttering more than others, because they are used to fluid animations. It's interesting how no one minds about low FPS when watching a movie (24 FPS is "cinematic"!), but when in a game (or any interactive experience where you provide a nontrivial amount of input) suddenly FPS has a huge impact on the experience.

scott_karana 9y ago
Motion blur makes all the difference.

mattdesl 9y ago

> I won't ask that the authors resolve the frame-rate issues, because I suspect it's an inherent issue to the browsers. Stuttering in WebGL is not an inherent issue in browsers. :) To me it seems like something in their code is thrashing the GC. Maybe the `getLUT` function which creates a new 100-length array every frame...

alexanderperrin 9y ago

Thanks so much for the kind words and also the performance analysis! I agree with you 100% that the motion can be jarring and unpleasant. I'm yet unsure as to what exactly is causing the issue, but I believe it's something with regards to GC that is just over my head for the moment. Resolution also plays a huge factor, and as a temporary measure I've added a half-res toggle in the info panel. This helps out especially with high DPI monitors. Whilst it shouldn't be surprising, I'm astounded as to how much of a science and balancing act it is to achieve frames that at least ~feel~ smooth, especially on web browsers. I'll be working away as much as possible to try and make things silky all over. Thanks for your patience until then!

cyberferret 9y ago
Just curious - did you draw all this artwork yourself? It is exquisite. If so, did you draw onto paper then scan in, or did you use a tablet etc. to create vector drawing that you then animated?
Lorin 9y ago
Just something that might help you debug it, it looked a lot more fluid on my 60hz screen than my 144hz one, where it got pretty jarring at full tram speed. You might also want to add a rate limiter on the bell, but that's personal preference.
jacobolus 9y ago
On all my browsers here it animates smoothly enough (good frame rate), but every time it renders changing parts of a frame there’s some flashing effect, and as a result when the car is moving fast looking at the background is pretty unpleasant, especially skinny high-contrast elements like the trees and posts against a white background Maybe that’s just inevitable when using the canvas for painting?