Vector GUI Concept for Vector Applications

I came up with a concept for how I might make an application made for creating vector art and animations, but where the GUI itself is also vectoral. This idea was derived from FlowStone.

I'll post more later on my ideas, I'm a little rushed at the moment. Ciao.

Vector Smears (Take 3 - Huzzah!)

I realized I'd been looking at this problem kind of wrong, so after a bit of rework, I finally got a sweet, anime smear (or motion blur) effect.

Anime Smear (Still)

Anime Smear (Moving)

As always, I'll post more updates as things happen.

Vector Smears (Take 2)

So after a little bit more work, I've managed to get the smear effect to look a bit better. It still needs a little work, but I'm getting really close now.

Smear (30fps)

Smear (4fps)

I need to figure out how to make the artifacts that occur when the shape flips inside-out stop happening. My best bet is to figure out which points in time the velocity of the object changes dramatically enough to cause such a problem. I'll need to do more testing.

Vector Smears (Take 1)

As a side project, I decided to look into doing algorithmic smear effects. Smears are done in older cartoons, mostly because transparency is difficult when using paint. There's an imgur album full of stuff regarding this topic, you should go check it out first.

As a concept, smears are made by making parts of a body appear to be at different points in time, and that point in time is generally based on what's closest to the "front" of the motion and what's closest to the "rear" of the motion. Using this concept, I've built a simple prototype:

Path:

Smear (1x):

Smear (2x):

Smear (3x):

Smear (5x):

Smear (10x):

Smear (25x):

It would seem that my algorithm needs a little work, although it's not too far off. I just need to take into account volumetric smearing next.

First PyCairo Test

So I did a little more research on PyCairo this morning. It turns out that the requirements for using it with pygame are really simple - you only really need PyCairo, numpy (or numeric, whatever), and pygame installed. There was even a section in the pygame.org site dedicated to this exact thing.

EDIT: Oh yeah, I also discovered that InkScape uses Cairo! Neat!

EDIT: Oh, yeah, also Cairo has built-in masking stuff, so I won't need to use my slow-ass algorithm anymore :D

As a quick test, I took the old outline program and created a duplicate version for testing out PyCairo.

So here's what the outline looks like WITHOUT PyCairo:

...and here's what it looks like WITH PyCairo:

You can see that the antialiasing is absolutely superb! However, it seems that rendering a scene using an immediate mode algorithm creates some small problems... you might have noticed that there's some artifacts that appeared between the curves and their miter joint; that is the result of the separate shapes being rendered independently, one at a time. When doing this, the library doesn't have any way of knowing that there's two shapes connecting where the gap forms, so it just does antialiasing of the individual shapes, which in the end creates those gaps.

The proper way to deal with this is to create a scene using a retained mode algorithm and then use multisampling to render the entire scene. I don't know yet it Cairo can do retained mode rendering, but in the event that it can't I'll have to find a work-around so these gaps don't become a problem.

PyCairo

So I discovered a pretty nice graphics library called Cairo just today, and apparently not only does it have support for Python (PyCairo), but it also works with Pygame! Hell yeah!

What's nice about this library is that it has really nice gradients, everything is beautifully antialiased, and best of all... it's fast. Check it out, I found an image online of what the library is capable of doing:

 

I'm really looking forward to using this library.