7 ms·
Show HN: Bubbly – animated backgrounds in 662 bytes
- lozzo 9y agoFrankly, 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 9y agoThanks, 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 9y agoLooks 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 9y agoThere's a link to a live demo in the readme: https://tipsy.github.io/bubbly-bg/ https://tipsy.github.io/bubbly-bg/
- tmountain 9y agoFWIW, I think it's cool :-).
- jablan 9y agoIt's pretty heavy on CPU.
- blowski 9y agoCredit 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 9y agoNormally 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 9y agoSo 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 9y agoI'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 9y agoNot 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 9y agoAha. The example doesn't have viewport set, so it renders at full resolution. I can update the example later.
- throwaway2016a 9y agoGreat 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 9y agoI could always modularize it if people are interested. It resizes using VH/VW, so that shouldn't be an issue. Retina display?
- throwaway2016a 9y agoYes, retina. It may very well be that resizing is just the only action that makes the performance obvious.
- seangrogg 9y agoThis 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.
- rthomas6 9y agoOne 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 9y agoWow they are great! Anyone know of similar things?
- slipstream- 9y agoDoesn't seem to be working in Edge. Line 33: Object doesn't support property or method 'forEach'
- tipsee 9y agoThat's just the demo code (for cycling through 4 different canvases), the library itself works fine in Edge.
- slipstream- 9y agoAh, OK.
- kup0 9y agoIn 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 9y agoIf this is the example, keep in mind that it has 4 instances of bubbly running.
- dingo_bat 9y agoNo 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 9y ago4k monitor?
- dingo_bat 9y agoNo, puny 1600x900.
- tipsee 9y agoThat'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 9y agoFirefox 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.