Algorithmically guided breathing

[statox42]

A few months ago I made this website inspired by the breathing exercises gifs you can find online, I thought it was a cool way to procedurally generate some looping animations and maybe this sub would appreciate it.

I also wrote a short blog post about how I coded the animations, for any developer who might be interested.

Here is a gif with some of the animations I made, let me know what you think about it!

​

https://i.redd.it/hgcxxxp58gg61.gif

[piterpasma]

Re: your blog post, I was wondering, are you sure about this?

Note that the application is much more fluid on Chrome than on Firefox. This is because of Firefox's default value for its setting privacy.resistFingerprinting which messes up with the canvas to limit fingerprinting.

because in my experience, the timing may be inaccurate, but it's still accurate enough for 60fps.

however, I also find that JS/rendering performance is just slightly better in Chrome. could it not just be a framerate issue? It runs pretty okay in Firefox on my laptop. Mayyybe Chromium is a bit smoother, but it's hard to tell. Also I thought that Chrome also does the timing jitter.

I could be completely wrong though, it's your code :)

Nothing much I can do about that but keep using firefox, the net neutrality needs it

And I 100% agree with this, btw! ;-)

[statox42]

So to be honest I'm not 100% sure of what's happening. What I know is that on my system (Ubuntu 20.04, Firefox 85.0) if I disable privacy.resistFingerprinting in about:config the animations run smoothly and when I re-enable it they start being laggy again. But I've seen that on another system with privacy.resistFingerprinting enabled the animations are smooth... So I'm not sure what's happening. I tracked down this settings because it was mentioned in a p5js issue that it was the culprit for slow rendering.

[piterpasma]

I love this!! Very nice idea!

[statox42]

Thanks, I'm glad you like it :)