Show HN: Bubbly – animated backgrounds in 662 bytes | Hacker News Reader

Show HN: Bubbly – animated backgrounds in 662 bytes

github.com

75 pointsteledig28 comments

One other small filesize hack for pretty background images is to use primitive (https://github.com/fogleman/primitive) to make stylized SVGs. I use it for https://goodfeels.net for the hero header image.

Wow they are great! Anyone know of similar things?

This is really neat!

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.

Great work.

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.

I could always modularize it if people are interested. It resizes using VH/VW, so that shouldn't be an issue. Retina display?

Yes, retina. It may very well be that resizing is just the only action that makes the performance obvious.

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.

Aha. The example doesn't have viewport set, so it renders at full resolution. I can update the example later.

Frankly, this is probably one of the so many useless projects that are around, yet credits to you for having done it in less than 1KB

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.

Looks like a neat project. Maybe you could host a demo using github pages? Then folks could see it in action.

https://pages.github.com/

There's a link to a live demo in the readme: https://tipsy.github.io/bubbly-bg/

FWIW, I think it's cool :-).

It's pretty heavy on CPU.

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.

If this is the example, keep in mind that it has 4 instances of bubbly running.

No animation in Nightly? I just see a slideshow of different colored bubbles. All beautifully rendered though.

Edit: the bubbles are moving, but veeeeery slowly.

4k monitor?

No, puny 1600x900.

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/

Firefox Nightly 58, Windows 10, CPU usage 50-70%

> How does this run? https://codepen.io/tipsy-/full/yzPaKK/

This is much better but still slower than what shows in the gif on your github readme. CPU usage 50-60%.

Maybe I should just try in Chrome ;)

Edit: vastly better performance in chrome. I guess Firefox isn't there just yet.

Doesn't seem to be working in Edge.

Line 33: Object doesn't support property or method 'forEach'

That's just the demo code (for cycling through 4 different canvases), the library itself works fine in Edge.

Ah, OK.

Reply on news.ycombinator.com