Scalable Vector Graphics (SVG) is a family of specifications of an XML-based file format for describing two-dimensional vector graphics, both static and dynamic (i.e. interactive or animated).
The SVG specification is an open standard that has been under development by the World Wide Web Consortium (W3C) since 1999.
SVG images and their behaviors are defined in XML text files. This means that they can be searched, indexed, scripted and, if required, compressed. Since they are XML files, SVG images can be created and edited with any text editor, but specialized SVG-based drawing programs are also available.

Writing SVG stuff can be very painful, but using Raphael it almost becomes fun. The official site gives you various examples (eg check out the slick polar clock, or the diagram elements), and code that shows how easy it is to get started:

Looking forward to spend more time on this. For now, I’ve just collected a few good learning resources about it, which I thought I’d share:

Below, some screenshots of a fancy clock, a tiger, and a graph, all built entirely via Raphael.

..

Tale of Tales is a games development studio, founded by Auriea Harvey and Michaël Samyn in Belgium in 2002 (*).

The purpose of Tale of Tales is to create elegant and emotionally rich interactive entertainment. We explicitly want to cater to people who are not enchanted by most contemporary computer games, or who wouldn’t mind more variety in their gameplay experiences. For this purpose, all of our products feature innovative forms of interaction, engaging poetic narratives and simple controls.

I run into these guys pretty much accidentally but I’ve been conquered straightaway by their work. Probably it’s because I share with them some sort of passion for gloomy, mysterious, melancholic and almost depressed atmospheres, or because adventure-like (a la zac-mccraken) 3d games have always had an effect on me. All of this served with a clear intention to make a work of art, not just a game.
But anyways – definitely worth checking them out imho. Especially cause they give you various demos of their work for free (for both mac and pc)! Including:

(for iPhone)

Pyglet provides an object-oriented programming interface for developing games and other visually-rich applications for Windows, Mac OS X and Linux. I’ve been playing with it for an hour or so, and was surprised of how quickly it can let you create a python-based multimedia application.

Some of the features of pyglet are:

No external dependencies or installation requirements. For most application and game requirements, pyglet needs nothing else besides Python, simplifying distribution and installation.
Take advantage of multiple windows and multi-monitor desktops. pyglet allows you to use as many windows as you need, and is fully aware of multi-monitor setups for use with fullscreen games.
Load images, sound, music and video in almost any format. pyglet can optionally use AVbin to play back audio formats such as MP3, OGG/Vorbis and WMA, and video formats such as DivX, MPEG-2, H.264, WMV and Xvid.

Two possibly useful tips when getting started:

– Go get AVBIN without hesitations, as you’ll need it. MP3 and other compressed audio formats require AVbin to be installed (this is the default for the Windows and Mac OS X installers). Uncompressed WAV files can be played without AVbin.

– [tested on OSx leopard only] If you try running the hello-world example from the console, after hitting window = pyglet.window.Window() you’ll see a new window appearing on your screen. That looks like good news obviously, but soon you’ll find out that the Finder doesn’t like that, and apparently the Python launcher results being as ‘not responding’ on the Force Quit Application menu. Well nothing to worry there: it’s because you haven’t issued the pyglet.app.run() command yet (which is where the main event loop gets handled).

The screenshot above is taken from one of the example apps you can download. Balls keeps bouncing around in a window, playing a sound when they hit the border. Check out the code:

import os
import random
import sys

from pyglet.gl import *
import pyglet
from pyglet.window import key

BALL_IMAGE = 'ball.png'
BALL_SOUND = 'ball.wav'

if len(sys.argv) > 1:
    BALL_SOUND = sys.argv[1]

sound = pyglet.resource.media(BALL_SOUND, streaming=False)

class Ball(pyglet.sprite.Sprite):
    ball_image = pyglet.resource.image(BALL_IMAGE)
    width = ball_image.width
    height = ball_image.height

    def __init__(self):
        x = random.random() * (window.width - self.width)
        y = random.random() * (window.height - self.height)

        super(Ball, self).__init__(self.ball_image, x, y, batch=balls_batch)

        self.dx = (random.random() - 0.5) * 1000
        self.dy = (random.random() - 0.5) * 1000

    def update(self, dt):
        if self.x = window.width:
            self.dx *= -1
            sound.play()
        if self.y = window.height:
            self.dy *= -1
            sound.play()
        self.x += self.dx * dt
        self.y += self.dy * dt

        self.x = min(max(self.x, 0), window.width - self.width)
        self.y = min(max(self.y, 0), window.height - self.height)

window = pyglet.window.Window(640, 480)

@window.event
def on_key_press(symbol, modifiers):
    if symbol == key.SPACE:
        balls.append(Ball())
    elif symbol == key.BACKSPACE:
        if balls:
            del balls[-1]
    elif symbol == key.ESCAPE:
        window.has_exit = True

@window.event
def on_draw():
    window.clear()
    balls_batch.draw()
    label.draw()

def update(dt):
    for ball in balls:
        ball.update(dt)
pyglet.clock.schedule_interval(update, 1/30.)

balls_batch = pyglet.graphics.Batch()
balls = []
label = pyglet.text.Label('Press space to add a ball, backspace to remove',
                          font_size=14,
                          x=window.width // 2, y=10,
                          anchor_x='center')

if __name__ == '__main__':
    pyglet.app.run()

Andrew Sorensen posted some code in the Impromptu mailing list showing how to add graphics (and various other things) on top of a code ‘image’. As usual I regret not having a whole free day to play with this, but just by messing around a bit with some parameters it’s easy to achieve some interesting effects…

Here’s the source code from Andrew:

(gfx:start-live-video)

(define canvas (gfx:make-canvas 640 480))

(define gl (gl:make-opengl))
(gl:open-opengl gl '(0 0 640 480))

;; draw code behind a rotating cube
;; if you wanted you could now call gfx:start-movie-capture
;; and pass the gl context where canvas usually goes.

(define loop-gl
    (lambda (beat)
       (let* ((code (gfx:get-code-image))
              (flipped (gfx:flip-image code))
              (width (car (gfx:get-image-size code)))
              (height (cdr (gfx:get-image-size code))))
          (gl:clear gl (+ *gl:color-buffer-bit* *gl:depth-buffer-bit*))
          (gl:window-pos gl 0 0 .99)
          (gl:draw-pixels gl width height *gl:rgba* *gl:unsigned-byte* flipped)
          (gl:load-identity gl)
          (gl:translate gl 0 0 .5)
          (gl:rotate gl (* beat 10) 1 1 1)
          (gl:color gl 1 1 1 1)
          (glut:wire-cube gl 0.5)
          (gl:flush gl)
          (gl:update-backing-image gl)
          (objc:release (+ (now) 5000) code flipped)
          (callback (*metro* (+ beat (* .5 1/6))) 'loop-gl (+ beat 1/6)))))

(loop-gl (*metro* 'get-beat 4))8

;; define an image to use as layer3

(define layer3 (gfx:make-image 640 480))

;; draw paths to layer3
(define draw-on-layer3
    (lambda (beat)
       (gfx:clear-image layer3)
       (dotimes (i 10)
          (gfx:path2image (gfx:make-circle (cosr 320 200 (/ i 100))
                                           (sinr 240 200 (/ i 100))
                                           20)
                          layer3
                          '() (list (/ i 5) 0 1 1)))
       (callback (*metro* (+ beat (* .5 1/6))) 'draw-on-layer3 (+ beat 1/6))))

(draw-on-layer3 (*metro* 'get-beat 4))

;; draw video and layer3 transparently into the opengl bitmap
;; then render the opengl bitmap to the canvas
;;
;; You could easily replace
;; (gl:get-image-from-opengl gl) with (gfx:get-code-image)
;; if you didn't want to use any opengl

(define capture-code
    (lambda (time)
       (let ((video (gfx:get-live-frame))
             (opengl (gl:get-image-from-opengl gl)))
          (gfx:image2image video opengl .3)
          (gfx:image2image layer3 opengl 1)
          (gfx:draw-image time canvas opengl .9)
          (objc:release (+ time 5000) opengl video))
       (callback (+ time 2000) 'capture-code (+ time 5000))))

(capture-code (now))

;; start-movie-capture takes a canvas OR an opengl context
;; so you could call (gfx:start-movie-capture gl ...
;; as long as your gl code calls gl:update-backing-image

(gfx:start-movie-capture canvas "~/tmp/my.mov" #t)
;(gfx:stop-movie-capture canvas)

[I was doing this in order to benefit from some of the django-command-extension functionalities]

1. Get graphviz here and install it (should be straightforward)

2. Download PyGraphViz. Make sure you download the source package. It’s possible to install it through easy_install but it would throw the following error:

bash-3.2$ easy_install pygraphviz
Searching for pygraphviz
Reading http://pypi.python.org/simple/pygraphviz/
Reading http://networkx.lanl.gov/pygraphviz
Reading http://networkx.lanl.gov/wiki/download
Reading http://sourceforge.net/project/showfiles.php?group_id=122233&package_id=161979
Reading http://networkx.lanl.gov/download
Best match: pygraphviz 0.99.1
Downloading http://pypi.python.org/packages/source/p/pygraphviz/pygraphviz-0........
Processing pygraphviz-0.99.1.zip
Running pygraphviz-0.99.1/setup.py -q bdist_egg --dist-dir /var/folders/Cm/C.........
Trying pkg-config
/bin/sh: pkg-config: command not found
/bin/sh: pkg-config: command not found
Trying dotneato-config
Failed to find dotneato-config

Your graphviz installation could not be found.

Either the graphviz package is missing on incomplete
(binary packages graphviz-dev or graphviz-devel missing?).

If you think your installation is correct you will need to manually
change the include_path and library_path variables in setup.py to
point to the correct locations of your graphviz installation.

The current setting of library_path and include_path is:
library_path=None
include_path=None

error: None

3. Change setup.py by specifying where your graphViz installation is [more info here]:

# library_path=None
library_path='/usr/local/lib/graphviz'
# include_path=None
include_path='/usr/local/include/graphviz'

4. Install:

bash-3.2$ python setup.py install
library_path=/usr/local/lib/graphviz
include_path=/usr/local/include/graphviz
running install
running build
running build_py
creating build/lib.macosx-10.4-i386-2.5
creating build/lib.macosx-10.4-i386-2.5/pygraphviz
copying pygraphviz/__init__.py -> build/lib.macosx-10.4-i386-2.5/pygraphviz
copying pygraphviz/agraph.py -> build/lib.macosx-10.4-i386-2.5/pygraphviz
[...... etc. etc.......]

5. Enjoy!:

>>> import pygraphviz as pgv
>>> G=pgv.AGraph()
>>> G.add_node('a')
>>> G.add_edge('b','c')
>>> G
strict graph {
        a;
        b -- c;
}

#To load a dot file use

>>> G=pgv.AGraph("file.dot")

Long story short: I was getting a headache trying to open one of these files on a mac. Here is a nice little app that solved my problems…