Comments on: SVG Bubble Menus http://starkravingfinkle.org/blog/2007/09/svg-bubble-menus/ Wed, 20 Aug 2008 09:50:10 +0000 http://wordpress.org/?v=2.5 By: Matthew Cruickshank http://starkravingfinkle.org/blog/2007/09/svg-bubble-menus/#comment-3552 Matthew Cruickshank Sat, 15 Sep 2007 12:22:28 +0000 http://starkravingfinkle.org/blog/2007/09/svg-bubble-menus/#comment-3552 Heh... I'd do it as bitmaps. Although graphics generation client-side via SVG is good, it seems like this could be done as regular images. Cool stuff to try out though :) Heh… I’d do it as bitmaps. Although graphics generation client-side via SVG is good, it seems like this could be done as regular images. Cool stuff to try out though :)

]]> By: monk.e.boy http://starkravingfinkle.org/blog/2007/09/svg-bubble-menus/#comment-3537 monk.e.boy Thu, 13 Sep 2007 11:33:13 +0000 http://starkravingfinkle.org/blog/2007/09/svg-bubble-menus/#comment-3537 Wow, cool. You need to reduce the amount of movement, but move more often. Flash will do up to 60 frames a second which is really smooooth. Nice though. But until SVG + animation is faster Flash will win. Shame really. But there you go. Why doesn't firefox get behind the open source flash player and GUI MTASC? That'd be cool. monk.e.boy Wow, cool.

You need to reduce the amount of movement, but move more often. Flash will do up to 60 frames a second which is really smooooth.

Nice though. But until SVG + animation is faster Flash will win. Shame really. But there you go.

Why doesn’t firefox get behind the open source flash player and GUI MTASC? That’d be cool.

monk.e.boy

]]> By: Steve Lee http://starkravingfinkle.org/blog/2007/09/svg-bubble-menus/#comment-3536 Steve Lee Thu, 13 Sep 2007 09:09:03 +0000 http://starkravingfinkle.org/blog/2007/09/svg-bubble-menus/#comment-3536 Nice one Mark. Looking forward to when/if gecko supports SVG animate I'm guessing you could do most of it declaratively in the SVG document with animateMotion (perhaps with a little JS tweaking for random images and mouseover). Then the performance issue would depend on gecko's animate implementation. Nice one Mark. Looking forward to when/if gecko supports SVG animate I’m guessing you could do most of it declaratively in the SVG document with animateMotion (perhaps with a little JS tweaking for random images and mouseover). Then the performance issue would depend on gecko’s animate implementation.

]]> By: Mark Finkle http://starkravingfinkle.org/blog/2007/09/svg-bubble-menus/#comment-3531 Mark Finkle Wed, 12 Sep 2007 20:39:02 +0000 http://starkravingfinkle.org/blog/2007/09/svg-bubble-menus/#comment-3531 Jeff - Thanks for the suggestions and the tweaked bubblemenu.js :) Jeff - Thanks for the suggestions and the tweaked bubblemenu.js :)

]]> By: Cozby http://starkravingfinkle.org/blog/2007/09/svg-bubble-menus/#comment-3530 Cozby Wed, 12 Sep 2007 20:26:29 +0000 http://starkravingfinkle.org/blog/2007/09/svg-bubble-menus/#comment-3530 Yup same thing as Adrian, CPU usage is incredibly high, around 90%. I was testing this in Camino. Yup same thing as Adrian, CPU usage is incredibly high, around 90%. I was testing this in Camino.

]]> By: Jeff Schiller http://starkravingfinkle.org/blog/2007/09/svg-bubble-menus/#comment-3529 Jeff Schiller Wed, 12 Sep 2007 20:09:08 +0000 http://starkravingfinkle.org/blog/2007/09/svg-bubble-menus/#comment-3529 Mark, I emailed you a tweaked version of your script with some improvements. Btw, your version has an improvement over the Flash version: - if you hold your mouse over a bubble in Flash, another bubble might float on top and "release" the bubble you wanted to click on - they seem to use rectangles for the mouse boundaries Regards, Jeff Mark, I emailed you a tweaked version of your script with some improvements.

Btw, your version has an improvement over the Flash version:

- if you hold your mouse over a bubble in Flash, another bubble might float on top and “release” the bubble you wanted to click on
- they seem to use rectangles for the mouse boundaries

Regards,
Jeff

]]> By: Jeff Schiller http://starkravingfinkle.org/blog/2007/09/svg-bubble-menus/#comment-3528 Jeff Schiller Wed, 12 Sep 2007 19:52:41 +0000 http://starkravingfinkle.org/blog/2007/09/svg-bubble-menus/#comment-3528 Mark, Nice demo! Just have to tweak the background colours of the bubbles. As you say, seems to move slower than the Flash version though, maybe just speed up the velocities? Also, looks like you're both modifing the transform as well as the x and y attributes - you shouldn't need to do that, right? I've done similar work with my "snow" example: http://www.codedread.com/blog/wp-content/themes/something-witty-goes-here/images/blog_header-winter.svg In that, I had pure JavaScript objects (snowflakes) which each held a reference to the SVG DOM objects. Not sure if that would make any difference whatsoever, but I don't have to call getElementsByTagNameNS() like you do every "tick"... Oh, and your example crashed Safari 3.0 Beta (Windows). Regards, Jeff Mark,

Nice demo! Just have to tweak the background colours of the bubbles.

As you say, seems to move slower than the Flash version though, maybe just speed up the velocities? Also, looks like you’re both modifing the transform as well as the x and y attributes - you shouldn’t need to do that, right?

I’ve done similar work with my “snow” example: http://www.codedread.com/blog/wp-content/themes/something-witty-goes-here/images/blog_header-winter.svg In that, I had pure JavaScript objects (snowflakes) which each held a reference to the SVG DOM objects. Not sure if that would make any difference whatsoever, but I don’t have to call getElementsByTagNameNS() like you do every “tick”…

Oh, and your example crashed Safari 3.0 Beta (Windows).

Regards,
Jeff

]]> By: Mark Finkle http://starkravingfinkle.org/blog/2007/09/svg-bubble-menus/#comment-3527 Mark Finkle Wed, 12 Sep 2007 17:53:13 +0000 http://starkravingfinkle.org/blog/2007/09/svg-bubble-menus/#comment-3527 Adrian - Thanks for the comparison. Some of the CPU usage is due to my use of setInterval(...) to create the animation loop. Maybe there is a better way of doing that. Also, I am using a transform in the animation loop to 'move' the bubbles and there might be a better way to doing that too. Adrian - Thanks for the comparison. Some of the CPU usage is due to my use of setInterval(…) to create the animation loop. Maybe there is a better way of doing that. Also, I am using a transform in the animation loop to ‘move’ the bubbles and there might be a better way to doing that too.

]]> By: Jose http://starkravingfinkle.org/blog/2007/09/svg-bubble-menus/#comment-3526 Jose Wed, 12 Sep 2007 17:38:06 +0000 http://starkravingfinkle.org/blog/2007/09/svg-bubble-menus/#comment-3526 Yes, and only uses 70-80% of CPU power. That's very nice. Amazing! Yes, and only uses 70-80% of CPU power. That’s very nice. Amazing!

]]> By: Adrian Williams http://starkravingfinkle.org/blog/2007/09/svg-bubble-menus/#comment-3525 Adrian Williams Wed, 12 Sep 2007 17:31:54 +0000 http://starkravingfinkle.org/blog/2007/09/svg-bubble-menus/#comment-3525 The main difference between your version and the Flash one on my machine is while the Flash version uses a bareable 5-30% of my processor averaging around 15%, yours uses 90+%. I don't know whether this an issue with your demo or something more fundemental with firefox/SVG. By the I'm using Firefox 2.0.0.6. I've just tried it with the latest nightly for 3.0M8 and I get 40-90% usage, averaging around 55%. So I guess that's progress. The main difference between your version and the Flash one on my machine is while the Flash version uses a bareable 5-30% of my processor averaging around 15%, yours uses 90+%. I don’t know whether this an issue with your demo or something more fundemental with firefox/SVG.

By the I’m using Firefox 2.0.0.6. I’ve just tried it with the latest nightly for 3.0M8 and I get 40-90% usage, averaging around 55%. So I guess that’s progress.

]]>