Some people didn't like the fact that the snow in my scripted SVG blog header was causing the Firefox CPU load to rail. My excuse was that I was trying to push out some content before the Holiday rush hit and I had to go travelling. Given that the season is now over, I spent about 20 minutes optimizing the script. My apologies to all those CPU fans out there for the last couple weeks...
Other than minor JavaScript tweaking (like removing parsing of strings into floats and declaring variables outside of loops, etc), I decided to just have all snowflakes active at once and to slow down the timer interval. From my side, it looks like it did the trick for Firefox 1.5 but not Opera 9 TP1 (Adobe SVG Viewer was never an issue), but I'll wait to hear from my critics ๐
If you wanted to optimize this even more at the cost of perceived randomness it would be quite simple to do in SVG. I'll probably save another entry for that, but basically it involves adding flakes randomly beforehand to a few static "snow panes" (<g> elements) and then simply sliding each pane down the image at differing speeds and positions (you can add a random drift too each pane's descent too). I think it would still look pretty cool and only require updating the position of (let's say) 4 snow "panes" instead of 50 snow flakes every tick.
I don’t know… it seems to fall too fast ๐
Maybe you could do the panes you mention as a sort of off-screen compositing. So you’d build a bunch off screen then slide them on all at once… Okay, I’m going to have to have a look at the source.
It’s just a constant. I had sped it up to watch the snow accumulate, but in my next iteration I’ll slow it down again.
Much better!!! About 5-10% CPU. You should know, that when it comes to resource consumption, I’m very conservative.
Happy New Year! ๐
Well, doesn’t snow at my place: ‘this.elem.cy.baseval’ is null or not an object (line 131)…
Paul can you tell me what browser (and plugin if appropriate) you are using?
Not snowing here, either, and I’d really like to see it!!
I’m in way over my head in this coding, I’m not a developer (yet…), but hope to be there soon.
Using IE 6.0.2800.1106 – no plug in installed.
Thanks for the tutorial, now off to school!!
Ok, for those with IE, please make sure you have downloaded the Adobe SVG Viewer (ASV) located at http://www.adobe.com/svg/main.html
Jeff,
my everyday browser is called ‘RSS Bandit’;-) Seriously , there’s no snow with ie+asv ‘3.03, Build 94’.
It’s dirty work to write svg scripts that smells good to asv and ff at the same time:-(( Eg. in asv createElementNS(SVGNS, “circle”) will create an ‘Element’. You can’t expect a circle cy attribute from an Element. You can not access attributes in asv like ‘this.elem.cy.baseVal.value=..’ (this.elem.setAttributeNS(null, “cy”, ..)), etcpp…
That is really odd, since I thought I tested in asv 3.03 as well as asv 6 tp1… maybe what I thought was asv 3.03 was really asv 6 tp1? Anyway, the above script definitely works in
It’s a shame too, because I had been using getAttributeNS(null, “cy”, …) without a problem but I thought I’d try to optimize by using baseVal. I’ll have to revert that change for asv 3.03…
Ok, I must have forgotten to test the last iteration with ASV 3.03. Sorry about that, it’s been restored now and you should see some snow…
Hooray, it’s snowing;-)
Firefox is back at 94% cpu. Since your svg file is sort of minimalistic, and all the ongoing drawing is done by script, a ‘canvas’ solution probably wouldn’t do worse? Well, I’d probably expect that canvas vector drawing will present some kind of lowest denominator for simple browser based graphing (eg. map directions, stock charts, …)? Still unpleasant, but at least no plugin penalty. Make sure you check http://me.eae.net/stuff/iecanvas/demo.html. In fairness I should mention A. Quint’s (only related) earlier work as well (http://fuchsia-design.com/CanvaSVG/).