While I'm not personally big on backgrounds I think this would be perfect as a substitute for those large hero images/videos that tend to require FAR more than .6kb to load. I'm pretty sure I'll wind up playing with this at some point and seeing how I can leverage it for random things.
I'd love to see some more configuration (different shapes, lines connecting shaped, etc) but I'm sure those would add to the size.
One thing I noticed is on Chrome on my Macbook Pro resizing the window gets slow when this is running. Usually when I see that it is because the onResize handler is too heavy. But I noticed you don't have an onResize.
Credit to you for being able to do this, and it’s neat as a code golf kinda project. But I don’t understand the general obsession with small code size. What I really care about is how well it performs - what kind of hardware does it work on? What’s the effect on the processors?
Code size is a signal, but the difference between loading a 1K and 10K file is invisible from an end user’s perspective, so I want to know about all these other factors, which are more visible.
Normally I have most my users in Asia (Myanmar/Malaysia) with just a few pageloads per session, so bytecount actually matters. I could inline this in an HTML page without feeling guilty.
So you’re concerned about their ridiculously slow (or capped) internet connections, but not about the impact on their CPUs or batteries, or visually how it performs?
I'm concerned with both, but the devices aren't nearly as bad as the internet speeds are. I tried to make a very simple draw cycle, did you find something that was very inefficient in the code?
Not in the code, but it took a couple of seconds to render on an iPhone 6S and knocked quite a bit of the battery. If there were a 5K library that didn’t do that, I’d prefer the trade off of better performance for a larger file. Optimisations all have diminishing returns.
Thanks, I think. I know animated backgrounds are not essential, but sometimes you want some movement for a landing page/cv page/etc. My goal was a to create a very simple library that was easy to plug in, and wouldn't use too much data.
In Chrome on macOS 10.13 it uses quite a bit of CPU (almost 2 out of 4 cores maxed). Still cool, but while it's low in file-size cost, it is quite high in CPU cost, even on a modern i5 machine.
That's not supposed to happen then. Browser/OS ? CPU usage?
If you're using the live demo, it might be lag due to running 4 instances of bubbly. How does this run? https://codepen.io/tipsy-/full/yzPaKK/