fun with SVG (scalable vector graphics)
by Orion Elenzil · 11/20/2008 (11:12 am) · 15 comments
i've been thinking about making a puzzle game/toy centered around shallow water physics,
and i want it to be easy to play. since i don't know flash, and i do know javascript, i'm looking into implementing such a thing with SVG. SVG provides essentially the same sort of stuff as flash, but without a plugin and using javascript directly. it's now supported in most browsers (it worked well in Firefox 3, Opera, and Chrome, but i had some trouble with IE), and thanks to continued optimizations by the javascript folks, the performance is getting reasonable for things like physical simulation. in fact in my tests, rendering is still the bottleneck, not simulation.
eventually i hope to implement Kass and Miller's shallow fluid dynamics here.
i'm also thinking of using james cologan's Sylvester library for javascript vector and matrix functions.
anyhow.
here are some very, very early toys.
check out the source code if you're interested.
* (at least) three cheers for sine and cosine - just visual candy.
* fluid2 - a simple but entertaining waves-on-a-string simulation.
and i want it to be easy to play. since i don't know flash, and i do know javascript, i'm looking into implementing such a thing with SVG. SVG provides essentially the same sort of stuff as flash, but without a plugin and using javascript directly. it's now supported in most browsers (it worked well in Firefox 3, Opera, and Chrome, but i had some trouble with IE), and thanks to continued optimizations by the javascript folks, the performance is getting reasonable for things like physical simulation. in fact in my tests, rendering is still the bottleneck, not simulation.
eventually i hope to implement Kass and Miller's shallow fluid dynamics here.
i'm also thinking of using james cologan's Sylvester library for javascript vector and matrix functions.
anyhow.
here are some very, very early toys.
check out the source code if you're interested.
* (at least) three cheers for sine and cosine - just visual candy.
* fluid2 - a simple but entertaining waves-on-a-string simulation.
About the author
#3
11/20/2008 (12:18 pm)
Wow looks good... I dont even knew about these SVGs! 
#4
11/20/2008 (3:18 pm)
Ugh SVG. I've been trying to find a decent library to load SVG (just load, that's all...plenty do rendering as well but that is simply annoying when ALL you need is loading) on Windows for at least a year now. Actually more like two years. 
#5
In fact, I liked it so much that I ported the Sine/Cosine demo to XNA/Torque X:
The hardest part was the colour tint. Although XNA has colour tinting built right into the spritebatch.draw method, I couldn't figure out how to do it with TorqueX.
In the end I had to create a custom build of the TX engine that extended the T2DQuad and T2DStaticSprite classes with a TintColor property. I guess these custom jobs are exactly what the TX Pro edition is for! The change was really easy to make, it took me longer to decide to make the change than to actually implement it.
If anyone wants to see it, I posted the code to my skydrive.
I made a few tweaks to the original algorithm and added a lot of comments but it's 99% Orion's code.
As the project won't compile against the stock TX engine, I added my custom build to the archive I posted for download.
Orion, big thanks for your demo!
And John K, if you read this, thanks for the advice on the engine mod.
11/20/2008 (8:27 pm)
I really liked this.In fact, I liked it so much that I ported the Sine/Cosine demo to XNA/Torque X:
The hardest part was the colour tint. Although XNA has colour tinting built right into the spritebatch.draw method, I couldn't figure out how to do it with TorqueX.
In the end I had to create a custom build of the TX engine that extended the T2DQuad and T2DStaticSprite classes with a TintColor property. I guess these custom jobs are exactly what the TX Pro edition is for! The change was really easy to make, it took me longer to decide to make the change than to actually implement it.
If anyone wants to see it, I posted the code to my skydrive.
I made a few tweaks to the original algorithm and added a lot of comments but it's 99% Orion's code.
As the project won't compile against the stock TX engine, I added my custom build to the archive I posted for download.
Orion, big thanks for your demo!
And John K, if you read this, thanks for the advice on the engine mod.
#6
John K.
11/20/2008 (9:17 pm)
Very cool, Orion! And great job porting this over to Torque X, Josef! This is really impressive. John K.
#7
it's funny, on my somewhat-dated laptop,
the wave demo only kicks on the fan (indicating the CPU is hard at work) when the circles are moving a lot. which is funny because the math is 100% unchanged no matter how much motion is going on, so there must be some overhead in moving SVG elements many pixels each frame. I suspect SVG is doing a lot more work than i'm interested in having it do, like detecting mouse entry/exit for every visual element.
11/20/2008 (10:18 pm)
wow! that's really cool Josef! as someone who knows zero about XNA i'll be interested to take a look at what goes into a small app like this. quite speedy, too. visually it looks absolutely identical. spooky! nice!it's funny, on my somewhat-dated laptop,
the wave demo only kicks on the fan (indicating the CPU is hard at work) when the circles are moving a lot. which is funny because the math is 100% unchanged no matter how much motion is going on, so there must be some overhead in moving SVG elements many pixels each frame. I suspect SVG is doing a lot more work than i'm interested in having it do, like detecting mouse entry/exit for every visual element.
#8
In other words, it has more to do with Cairo being incredibly slow, and thus the number of circles, than with the fact that they're moving.
If you're really serious about doing fast vector graphics for games or the like, I suggest ShivaVG which is orders of magnitude faster than Cairo in terms of rendering. Not to mention it doesn't contain the huge amount of cruft that Cairo does.
11/20/2008 (10:31 pm)
@Orion, well, more likely it's because Cairo is a horrendously slow rendering pipe. From my experience evaluating it, it's probably re-rendering everything every frame, so it's not like it's rasterizing it once then just render that, even if the circles are merely translating and their actual SVG representation isn't changing. And like I said, the Cairo rendering path is *super super* slow. Especially the stroking code. As in, certainly too slow to use for a game if you're intending on being able to change the SVG representation and render that each frame(especially if you're intending on using anything that's comprised of paths instead of just simple primitives). Firefox may be also trying to detect mouse clicks as you said, but I doubt it. Typically you'd have to write some custom JavaScript or something for that (in order to interact with the SVG elements, that is).In other words, it has more to do with Cairo being incredibly slow, and thus the number of circles, than with the fact that they're moving.
If you're really serious about doing fast vector graphics for games or the like, I suggest ShivaVG which is orders of magnitude faster than Cairo in terms of rendering. Not to mention it doesn't contain the huge amount of cruft that Cairo does.
#9
i should say i'm interested in making fun game-like interactive toys, perhaps.
maybe i should just bite the bullet and learn action-script, but the proprietariness of it just bugs me.
i'm surprised that re-rendering the scenegraph every frame would be much overhead.
.. oh, i see what you mean. it's the rasterization which is slow. yeah, hm. what i really want is something like retained-mode openGL accessed through javascript. i used OpenCroquet for a while, which is basically the same thing but ported to SmallTalk, and the bottleneck was definitely simulation and API calls, not the actual rendering.
but shiva looks interesting. if i to make something serious which runs out of the browser i'll give it a look. thanks.
11/20/2008 (10:54 pm)
hm, interesting.i should say i'm interested in making fun game-like interactive toys, perhaps.
maybe i should just bite the bullet and learn action-script, but the proprietariness of it just bugs me.
i'm surprised that re-rendering the scenegraph every frame would be much overhead.
.. oh, i see what you mean. it's the rasterization which is slow. yeah, hm. what i really want is something like retained-mode openGL accessed through javascript. i used OpenCroquet for a while, which is basically the same thing but ported to SmallTalk, and the bottleneck was definitely simulation and API calls, not the actual rendering.
but shiva looks interesting. if i to make something serious which runs out of the browser i'll give it a look. thanks.
#10
Because of course Javascript rocks. I just made this little game with my son (age 7):
www.psychicsoftware.com/tableking
11/21/2008 (5:22 am)
Interesting, thanks Orion. The other thing about Flash is that's a complete abomination to programmers. I have tried and failed on several occasions to get my head around it. SVG might be just what I need for my multimedia programming class in the spring.. :-)Because of course Javascript rocks. I just made this little game with my son (age 7):
www.psychicsoftware.com/tableking
#11
11/21/2008 (9:23 am)
Yeah exactly, the rasterization in Cairo is ridiculously slow. The quality of images it gives is really good, but it sacrifices speed very heavily. It's very disappointing, since doing everything with SVG can give you some awesome benefits over bitmaps.
#12
I have to admit that I haven't used it in a while (since v1) but I recall that it was easy to get into and super fast. I don't know how hard it was on the CPU but I had no issues with it. Version 1 was Javascript only but version 2 also supports C# and VB.Net. You can get more info from Silverlight.net. I also recall finding some interesting Silverlight game projects posted at Codeplex.
11/21/2008 (2:56 pm)
@Orion, have you considered Silverlight?I have to admit that I haven't used it in a while (since v1) but I recall that it was easy to get into and super fast. I don't know how hard it was on the CPU but I had no issues with it. Version 1 was Javascript only but version 2 also supports C# and VB.Net. You can get more info from Silverlight.net. I also recall finding some interesting Silverlight game projects posted at Codeplex.
#13
farseer physics seems the most similar to what i'm interested in doing.
11/21/2008 (4:33 pm)
silverlight - interesting.farseer physics seems the most similar to what i'm interested in doing.
#14
Curiously, I just found this: Alchemy
Edit: Wow! and look at this example: Doom running on flash!
11/22/2008 (5:50 pm)
Silverlight? more M$? get away from there!Curiously, I just found this: Alchemy
Quote:Alchemy is a research project that allows users to compile C and C++ code that is targeted to run on the open source ActionScript Virtual Machine (AVM2). The purpose of this preview is to assess the level of community interest in reusing existing C and C++ libraries in Web applications that run on Adobe Flash Player and Adobe AIR.
With Alchemy, Web application developers can now reuse hundreds of millions of lines of existing open source C and C++ client or server-side code on the Flash Platform. Alchemy brings the power of high performance C and C++ libraries to Web applications with minimal degradation on AVM2. The C/C++ code is compiled to ActionScript 3.0 as a SWF or SWC that runs on Adobe Flash Player 10 or Adobe AIR 1.5.
Edit: Wow! and look at this example: Doom running on flash!
#15
Get used to it. Or do like me, don't even bother.
I second that. Along with XNA and any of their junk.
11/22/2008 (10:09 pm)
Quote:but i had some trouble with IE
Get used to it. Or do like me, don't even bother.
Quote:Silverlight? more M$?
I second that. Along with XNA and any of their junk.
Torque Owner RollerJesus
Dream. Build. Repeat.