Skip to content

September 4, 2008

7

Compiz-like wobbling windows in AS3

This code was intended to be released back in October last year, but i never managed to do it since it needed some refactoring, some changes and had to be quite decent to present: then in November i got the chance to work with some very talented guys over at Jooce, in Paris, so i never got back to write something about it.
Btw, if you never tried Jooce then give it a try, it really deserves it!

While there, i used portions of this code to derive something from it and while working on that for some time i realized some key points for optimizations but i’m not going to share more details with you about that, since the NDA i agreed to sign doesn’t allow me to do that: i’ve to say this version is therefore unoptimized and proof-of-concept, especially for the real window drawings: in fact, i just did some cleanup before packaging it, but since i don’t plan to put some time on it sooner, better i publish it as-is, or it will lie on my disk for the next few months for sure.

The idea was to build the foundation for a fancy, compositing-based windowing system: beside the actual implementation that’s basically just wobbling the current target, i’m sure you’ll be able to come up with other effects as well, but that’s not the real point.
Setting aside the concrete animator implementation that would be better to be used as a base to derive some more abstract definitions from it, the architecture is quite open to new approaches and ideas, especially for the ultra-simple opengl-like interface i chosen for the rasterizer that let’s you prototype things quite fast:

package rasterizer
{
	import flash.display.Sprite;
	import flash.display.BitmapData;
	import rasterizer.data.*;

	/**
	 * OpenGL-like interface for a generic rasterizer.
	 * The triangle is the only supported polygon right now
	 *
	 * More desc for me..
	 */
	public interface IRasterizer
	{
		function glTexture( tex: BitmapData, forceRecreate: Boolean = false, smooth: Boolean = false ): void;
		function glSetTarget( aTarget: Sprite ): void;

		function glBegin( rasterMode: int ): void;
		function glEnd(): void;

		function glPresent( aTarget: Sprite = null ): void;
	}

	/**
	 * OpenGL-like interface for a generic 2D rasterizer.
	 * The triangle is the only supported polygon right now
	 *
	 * More desc for me..
	 */
	public interface IRasterizer2D extends IRasterizer
	{
		function glVertex( vertex: Vertex2, uv: Vertex2 ): void;
	}

	/**
	 * OpenGL-like interface for a generic 3D rasterizer.
	 * The triangle is the only supported polygon right now
	 *
	 * More desc for me..
	 */
	public interface IRasterizer3D extends IRasterizer
	{
		function glVertex( vertex: Vertex3, uv: Vertex2 ): void;
	}
}

Portions of the actual wobble animator took inspiration from the previous Magic Carpet demo and some stuff i found on the net: if you come up with some other effects let me know, i’ll be happy to link back to them!
Here you can play with a basic demo i setup to try it out or get the source code to do your own experiments:

Read more from as3, c++, dev, hydra
7 Comments Post a comment
  1. Sep 8 2008

    There’s something quite satisfying about these windows… like they suddenly become tangible objects.

    Thanks for releasing the code.

  2. Patrick
    Nov 1 2008

    Thanks man! great code, great work!

  3. Eugene
    Dec 29 2008

    When I copy your project to the server, and trying to move a window with video (when it loaded) — window begins to disappear. (http://win.colorpictures.ru/flash/windows/)
    But locally it works …

    Could you suggest, what’s my mistake?

  4. Manuel
    Dec 29 2008

    Hello Eugene, this is due to the Flash Player security policies, that’s it, the video must resides on the same .swf domain in order to be loaded correctly from any client running it. In fact, the demo on my blog loads a small demo video that resides itself on *this* server.
    You’ll have to upload the video to the colorpictures.ru domain *AND* remember to setup your own crossdomain.xml to describe your cross-domain policies.
    This descriptor will be read from the Flash Player whenever a request to get the video resource from this domain occurs, take a look at what YouTube is using right now (http://youtube.com/crossdomain.xml): since you are using subdomains too as win.colorpictures.ru, i think you’ll be fine in setting a crossdomain.xml with domain=”*.colorpictures.ru”.

  5. Apr 24 2009

    Hey Manuel,
    First, this is a fantastic demo. I hate to sound naive, but how do I use the source code? I am a bit new to AS3 and don’t see a FLA to play around with.

    Thanks so much.

  6. Jun 27 2011

    Hi theanks. When i saw this site (http://www.panoplie.fr/) i searched wobble as3 and got your code. Thanks for the nice code lib.

Share your thoughts, post a comment.

(required)
(required)

Note: HTML is allowed. Your email address will never be published.

Subscribe to comments