Inkscape and 2D Vector animation via Python.
Hi, Apropos to nothing much, here is some info about a Python 2D animation API I recently released:
It's called "Things" and uses Inkscape as an "extended IDE" for drawing the frames and graphics that you then animate with the API. It uses python-cairo and rsvg and a bit of xml (urgh) under the hood, but you only have to deal with simple things like tweens and frames and properties to do the animations.
The animations can be played in a window or exported frame by frame out to png or svg files. This lets you create Ajax throbbers and animated images by taking those files into some other process like imagemagick. You could also import the files into other software; like Blender or video apps.
With Things you can: 1. Contain Things in other Things. Example: a bird flying -- the wings moving on a tween would be inside the Bird Thing which would in-turn be tweening along a path across the screen. 2. Follow paths. 3. Clip Things to any path. 4. Animate size, position, alpha, rotation and tint. 5. Detect the mouse -- buttons, drag/drop etc. 6. Display frames from 'loops' which you draw (each frame of) in Inkscape. 7. Draw any graphics that python-cairo is capable of. Including pango text, gradients, paths, images, etc.
So, the idea is to use Inkscape for the visual design and Things for the animation thereof. Once this is done, you could distribute your "thingum" script, or use the export feature to take the animation to other places.
If you visit the links in my sig, you will find the code, help for the API and a PDF tutorial.
It's been written on *buntu GNU/Linux and it's probably best to try it on same. There are a few dependencies, but nothing you can't apt-get. The script will (I hope) help you locate what you need -- just run one of the demo "thingums".
It's early days, and there will be bugs, but it's quite nice to see it actually working.
Enjoy! And forgive all bugs, I am not much of a coder ;) \d
Hi, Donn.
This looks like a nifty concept. Nice to see you mention things like multiple timelines. I have a couple of daft questions, though, if you forgive me.
1. Could you use this to create actual SVG animations? Animated SVGs? Or is it just meant to output static SVG sequences? 2. What are "Ajax throbbers"?
Kind regs, Jimmy Volatile
On Thu, Jul 9, 2009 at 4:47 PM, Donn <donn.ingle@...155...> wrote:
This lets you create Ajax throbbers and animated images by taking those files into some other process like imagemagick.
On Thursday, 09 July 2009 21:06:07 JimmyVolatile wrote:
I have a couple of daft questions, though, if you forgive me.
I will give it some serious thought :)
- Could you use this to create actual SVG animations? Animated SVGs? Or is
it just meant to output static SVG sequences?
It's one vector "image" after another -- so, static as you say. Animating SVG is a dark art that I never get the time to try -- it's too DOM/javascripty for my tastes.
My influence was keyframing and tweening -- and my API tries to make this simple and direct. I hope...
- What are "Ajax throbbers"?
They are those little animations you see all over the web for 'loading' or 'busy' etc. You also see them in video players as they stream the video. They are simple animations in a loop. To make one you could use Things to do the animation and then output to a series of images and then make an animated gif out of them.
\d
Donn, this sounds amazing. Will investigate it when I'm back from job!
On 7/9/09 9:40 PM, "Donn" <donn.ingle@...155...> wrote:
On Thursday, 09 July 2009 21:06:07 JimmyVolatile wrote:
I have a couple of daft questions, though, if you forgive me.
I will give it some serious thought :)
- Could you use this to create actual SVG animations? Animated SVGs? Or is
it just meant to output static SVG sequences?
It's one vector "image" after another -- so, static as you say. Animating SVG is a dark art that I never get the time to try -- it's too DOM/javascripty for my tastes.
My influence was keyframing and tweening -- and my API tries to make this simple and direct. I hope...
- What are "Ajax throbbers"?
They are those little animations you see all over the web for 'loading' or 'busy' etc. You also see them in video players as they stream the video. They are simple animations in a loop. To make one you could use Things to do the animation and then output to a series of images and then make an animated gif out of them.
\d
________________________________________________________________ Maarten van der Velde graphic designer
Powel ASA Klæbuveien 194, NO-7037 Trondheim, NORWAY Phone: +47 73 80 45 00 - Fax: +47 73 80 45 01 Direct line: +47 73 80 46 21 - Mobile: +47 48 16 46 21 / +31 (0) 6 30 80 95 91 Email: Maarten.van-der-Velde@...2171... http://www.powel.com/
********************************************************************** This email and any files transmitted with it are confidential and intended solely for the use of the individual or entity to whom they are addressed. If you have received this email in error please notify the system manager.
This footnote also confirms that this email message has been swept by MIMEsweeper for the presence of computer viruses.
www.powel.no **********************************************************************
Donn wrote:
On Thursday, 09 July 2009 21:06:07 JimmyVolatile wrote:
- Could you use this to create actual SVG animations? Animated SVGs? Or is
it just meant to output static SVG sequences?
It's one vector "image" after another -- so, static as you say. Animating SVG is a dark art that I never get the time to try -- it's too DOM/javascripty for my tastes.
Don't forget that animation is part of SVG.
http://www.w3.org/TR/SVG11/animate.html
Many attributes are animatable:
http://www.w3.org/TR/SVG11/animate.html#Animatable
Aaron Spike
FYI, just because it's cool:
http://tavmjong.free.fr/INKSCAPE/DRAWINGS/clock_plain.svg
Indeed. -Joe Ward
FYI, just because it's cool:
On Friday, 10 July 2009 16:26:06 Aaron Spike wrote:
Don't forget that animation is part of SVG.
Sure, I confess I never got into it but my thinking was running on another track. I wanted to use Inkscape as an intimate tool in an animation process and at the same time I was mucking with Cairo. RSVG came into the mix and I managed to do something with those three.
Oh, and Python :) Javascript is the ph-tew!
In an odd kind of way, my API is doing what the browser would have to do once the SVG XML has been altered by javascript -- it's still a small property change (like an angle) and then re-render, repeat.
Animation using fropen tools is taking too long to "arrive". I wish I could open Inkscape and complete an entire multimedia experience with menu screens and sub-sections and animations going on, but that just seems as far away as the moon. Hey, I hope I'm wrong.
\d
participants (6)
-
Aaron Spike -
Donn -
JimmyVolatile -
Joe Ward -
Maarten van der Velde -
Shawn H. Corey