I had the Idea of Using Javascript Instead

The Genetic Wallpapers project is supposed to be able to help any artist create a wallpaper capable of shifting and moving over time to produce interesting and unique results over time.

The Idea

The problem is that artists have all sorts of crazy ideas about what and how the wallpaper should progress and currently the logic for how the wallpaper will mutate is contained within the python code of the main project.

So I had this crazy idea, what if I could move that logic to javascript, a language which far more people know and each logic mechanism would be self contained within the svg wallpaper it’s supposed to effect.

I thought this was such a cool idea I rushed to google to do a search to find out how I could execute self contained javascript from python without a browser (because it’s svg, not html) and it only needs to be able to modify the Document Object Model to move and resize the objects in the image.

The Problem

All of the projects I encountered searching for a solution couldn’t really do the job. Either they were hacks, tied to web browsers, didn’t really work or were mostly converters to make javascript out of python. Which isn’t what we need for this to work. I looked at python-jswebkit, python-spidermonkey and pyv8, none of which could really do the job of running javascript to act on a DOM.

Possible Solution

Instead of trying to use python, I could farm it out to perl. I hear perl has better javascript execution support and best of all, documentation to show you how to do it.

The alternative is to ask the community. But this is quite a highly specialised bit of functionality, very rarely do we need to run one bit of JIT code on another. But any ideas would be very welcome.

Comments and thoughts on the idea and the direction, please to post below.

FakeSmile to per Frame XML

I want to be able to take one of my animated svgs and convert it to a set of png files in order to make video overlays.

I could use some of the existing raster based video effects, but I’d rather use some of the more interesting and familiar animations available to svg SMIL effects, I can then also write everything in xml.

The only problem is that there isn’t currently a way to generate frame by frame from svg SMIL animations. Unless anyone else knows of such a tool.

There is a tool called svgani which has it’s own animation specification but I’d rather use SMIL since I know it and there may probably be tools to create animations in the future.

So there is a tool called fakeSmile which I use to enabled svg animations in Firefox via javascript. It does this by editing the xml on the fly for each interation. I figure if I can use the same logic to generate an xml/svg output per frame, I’d be able to then use inkscape to (very slowly) generate each png frame.

But I figured I’d ask the community first.

SVG Animations kinda just like Flash

This is a second part to my Who needs Flash post, I’ve continue with prodding to work on some ideas for simple svg maps. A map that is able to find your country or state, but not directions or anything like as complex.

Map of the World

This map shows the world, it’s interesting because it loads maps from a simple apache webserver using XMLHttpRequest and allows you to drill down each section of the map until you find what you want. For the purpos of this demonstration I have only populated a number of maps, I expect that it’d be very complete and useful with an open streetmap backend cleverly processed into the required output and so forth, maybe combined with wikipedia links and other fun stuff. See here for each of the map files and how it was constructed.

I also used FakeSmile in this project, this allows Firefox to display svg animations, even though Firefox 3.5 doesn’t yet support animations in svg files (coming soon), fake smile is a great project, a credit to the authors, I only have one problem with it so far and that’s the infinate loops and uncaught flipping of properties once animations should have finished, this can cause your cpu to spike, so don’t be worried if your computer grinds to a halt.

You’ll also notice that it makes heavy use of cascading style sheets, very useful for hovering and selecting elements based upon multiple inherited classes.

There isn’t any server side code in this demonstration, it’s all done by matching up the element ids to file names stored on the server. The server did need a .htaccess to report all svg files as xml and not svg+xml which firefox balks at.

Also worth noting is the horrible, horrible speed of everything. Hopefully if more demonstrations in svg can be put together, stretching the framework, we’ll see improvements in Firefox and other browsers when it comes to rendering speeds and svg processing speeds.

I think SVG is the better standard and the better framework when compared to Flash, not because of speed or technology, but just because of how integrated it is with everything. I was able to develop this demo using Firebug, I was able to use standard javascript and standard css to style and run everything. If it wasn’t for the terrible neglect that svg has suffered at the hands of Adobe, we’d have replaced Flash already for a large number of things.