Slashdot Mirror
Biochemistry Animations Using SVG
Milo Fungus writes "I've been working on a project for my biochemistry research lab that may be of interest to a few Slashdotters. We study the enzymes in an important biochemical pathway that produces (among other things) terpenes, carotenes, and sterols. I have been making a web-based tutorial to summarize our research, with animations of the proposed reaction mechanisms of the enzymes. I'm finding that SVG is a very good tool for the job because it is easy to learn (because of my experience with HTML) and the file sizes are amazingly small, even for complex animations. The files are typically ~5 KB for a g-zipped animation about 1:00 minute long, compared to 2 MB or more for a lossy-compressed video file of the same length, which is locked into a certain resolution. I have been wanting to do this project ever since I saw Hongyun Wang and George Oster's animations of ATP synthase. I would appreciate any feedback about the tutorial's usablilty, etc."
If you are looking for an SVG viewer (as I was), Adobe has one for download.
I viewed your SVG animations using Mac OSX 10.3, in Safari 1.2.1 (v125.1), using the Adobe SVG viewer 3.0, and there was one noticable problem I thought perhaps you were unaware of. For some reason on my platform, the alpha in alpha-ketol was not rendering properly. In place of the alpha was an empty box (most probably a font problem). Interestingly, the HTML "MEP Synthase (α-ketol rearrangement)" showed the alpha just fine for me.
Just thought you would like to know.
Other than that, the animations were excellent. Did you write the SVG by hand, or use a tool?
Any mac viewers out there?
- Zav - Imagine a Beowulf cluster of insensitive clods...
Ok, I've already mentioned that you need a mac viewer. For those people who use these macs.
Your inspiration's example is terrible - with respect to bandwidth.
It is good because it has Mpeg AND Quicktime. That's a choice that is nice. Almost everything plays mpeg1 and quicktime is a FREE and easy to get download that is xplat.
The bandwidth on the QT is terrible - 852 Kbps. It is using the wrong codec.
The bandwidth on the Mpeg 1 is also rather high - 355 Kbks.
Quality on both is good.
Bandwidth can be improved by exporting the quicktime to Sorenson or 3ivx and running a few comparison tests to compare quality and bandwidth.
What is LOVELY about 3ivx is that is can create pure MPEG 4 output so Quicktime can create a movie that can be played outside of quicktime. Like in WMP.
Using 3ivx I was able to get the videos output as pure MPEG 4 at almost identical quality at 150 K per second with just a few tests. That's taking a 5 meg movie and turning it to 860 K. I'm sure we could do better if we tried.
Now, If you've got a mac plugin, I'd love to see those 5 K movies!!
- Zav - Imagine a Beowulf cluster of insensitive clods...
Thanks to someone else on this thread, I found an SVG viewer (adobe) and installed it. Safari required a restart, I restarted it.
You really need to set up instructions for people who may not have svg viewers.
Also, your animations were lovely but the greek characters were replaced with square blocks. Alpha, lambda, anything else, I can't tell what they are on the mac since they are square blocks.
Looks like you've got a great start there. Just time to wrap up the details to bullet proof it.
- Zav - Imagine a Beowulf cluster of insensitive clods...
SVG seems to me to be a very good user interface tool. Instead of programmatically defining objects, "UI" Artists could define it all with their authoring program, then set the files in an embedded SVG player for 'playback' and 'interaction'.
... what about the possibility that SVG can be used to replace/supplant/suplement existing GUI systems by abstracting the motin/behaviour out to an authoring system, then just having it embedded in the final app ...
Has anyone seen this done yet? I know that Flash animators are quite capable of creating very nice interactive unique interfaces which often put "Windowing systems" and "Standard GUI's" to shame
Know what I mean? I guess the question is, a) has this been done/is it feasible/possible, and b) what is the event model?
; -- the corruption of government starts with its secrets. a truly free people keep no secrets. --
It was great to see really good use being made of SVG, but I let myself get sidetracked by some of the technical comments elsewhere in this thread and managed to blow away my browser, so I'm writing this before attempting a second look.
Having used the smallest possible amount of non-animated SVG on one of my own sites, I some time ago settled on the still current release Mozilla (1.6) with the Adobe plug in, because the SVG build for Mac really isn't there yet. There was a brief period in which I was checking some of my stuff with Safari first, but once I fixed my code there was nothing that Safari did better than Moz, so I switched back to the only standards compliant browser that shows on my and my clients' traffic stats. (5-25% for those who must know, and not near all mine!)
At first Moz seemed not to be keen to actually finish loading the page linked from the submission, most likely because our DSL is having a bad afternoon, so I booted Safari which loaded it completely quite quickly, by which time Moz had finished too. Safari also showed a couple of the animations, which Moz started on and then gave up (spinning cursor) so I quit Safari and still had to kill Moz.
It was the comment about alpha not rendering that particulary intrigued me as one of the really pleasing discovery for me in recent works is that Unicode characters really work in my set up, though I haven't gone so far as to try to use them within SVG yet.
I belatedly posted more of my continuing hopes for SVG in another thread the other day and won't repeat them here.
-- Our systemic servants do not good masters make.
I wish Mozilla (and friends) would ship with --enable-svg compiled by default.
I know the SVG implementation in Mozilla isn't 100% (the builds I've tried do crash more often), but neither has the DOM-JavaScript implementation been 100% in all the major browsers all these years, and we've worked around it (albeit a pain but) with great success.
I say turn SVG on by default and let the SVG websites a cometh. Soon enough you'll have the Mozilla crowd surfing a slew of fantastic SVG sites and their IE friends will be jumping ship in droves.
You can wet your whistle by grabbing the Mozilla-Firefox SVG build for Linux/Solaris and experience the fantastic SVG work at Croczilla. The bezier-paths demo shows some serious potential.
The progression for better SVG implementation in Mozilla (or any browser for that matter) will go hand in hand with the easy availability for the user to be able to browse these websites w/o jumping through hoops.
<last-blurb-of-nonsense>SVG is a native implementation in Mozilla, so the end effect is completely smooth and transparent unlike Macromedia's Flash which feels like a browser afterthought.</last-blurb-of-nonsense>