
Show HN: Bubbly – animated backgrounds in 662 bytes - teledig
https://github.com/tipsy/bubbly-bg
======
rthomas6
One other small filesize hack for pretty background images is to use primitive
([https://github.com/fogleman/primitive](https://github.com/fogleman/primitive))
to make stylized SVGs. I use it for
[https://goodfeels.net](https://goodfeels.net) for the hero header image.

~~~
anitil
Wow they are great! Anyone know of similar things?

------
seangrogg
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.

------
throwaway2016a
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.

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

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

------
blowski
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.

~~~
tipsee
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.

~~~
blowski
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?

~~~
tipsee
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?

~~~
blowski
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.

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

------
lozzo
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

~~~
teledig
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.

~~~
netghost
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/](https://pages.github.com/)

~~~
tipsee
There's a link to a live demo in the readme: [https://tipsy.github.io/bubbly-
bg/](https://tipsy.github.io/bubbly-bg/)

------
jablan
It's pretty heavy on CPU.

------
kup0
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.

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

------
dingo_bat
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.

~~~
tipsee
4k monitor?

~~~
dingo_bat
No, puny 1600x900.

~~~
tipsee
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/](https://codepen.io/tipsy-/full/yzPaKK/)

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

> How does this run?
> [https://codepen.io/tipsy-/full/yzPaKK/](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.

------
slipstream-
Doesn't seem to be working in Edge.

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

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

~~~
slipstream-
Ah, OK.

