This task seemed simple at first, but the more I thought about it, the more complicated it seemed. The trick is being able to split your image up into a grid, and then affect the grid pieces in an order that would start from one corner, and work its way to the other corner. I immediately started sketching down grids and trying to figure out patterns. With the help of a fellow employee, we found a pattern that worked for all directions.

The solution revolves around using a grid where the pieces are numbered by row and column. Here’s a simple example:

[0,0][0,1][0,2]

[1,0][1,1][1,2]

[2,0][2,1][2,2]

Lets examine the above example. We know we want to move from one corner to the opposite corner. Examining the grid, there’s a simple pattern using addition and subtraction. Travelling along diagonals, the items in a line all add up or subtract to the same values. 0,0 = 0; 0,1 = 1; 1,0 =1; 0,2 = 2, 1,1 = 2 etc…

Using this as our base, the next trick is how to loop through. The following is how it would work for one corner:

for (sum = 0; sum >= lastRow + lastCol; ++sum)
{
     for (row = 0; row >= lastRow; ++row)
     {
          col = sum - row;
     }
}

After that, all you have to do is affect your bitmaps however you woud like. Below are a few examples I came up with; Just click the image to begin the transition.

The first is a simple alpha fade with a large grid. This allows you to see whats going on from the most basic standpoint:

This example adds rotation and a subtle color transform:

This version scales the x values inward and randomly moves their x position slightly. Again there is a subtle color transform:

This last version is similar to the last only it uses the Y axis as opposed to the X:

With this technique, I’m curious to see what other people can do with it!

NEW YORK, June 22 /PRNewswire/ — Glow Interactive (www.glowinteractive.com), a leading New York-based interactive marketing, advertising and creative agency, today announced – just in time for summer travel and family road trips – the availability of That’s So Query™. That’s So Query is the first mobile game available at Apple’s App Store (http://bit.ly/thatssoquery) that utilizes Google Suggest technology to turn completing the most popular Internet searches into a trivia-meets-Family-Feud-style game. The game is now available for$.99 per download.

“Our core business is developing rich media, advertising and creative experiences for major brands, but we’re branching out and developing our own intellectual property to add to our service offerings,” said Peter Levin, CEO and Co-Founder, Glow Interactive. “We’re an agency that believes in testing our own creative skills and tech-savvy. That’s So Query is a perfect blend of the Glow team’s creative-savvy, fun spirit and passion for playing with technology, not to mention an interesting social study.”

The game is based on Internet users entering text into a Google Search bar and having the Google Suggest technology pre-populate suggested terms or phrases based on Internet popularity in a drop down menu. The searcher can then choose from the most popular searches or complete their own unique typed search. Glow has taken this concept and incorporated it into That’s So Query more than 1,000 times over, providing hours of game play and fun.

The game is played through a simple interface that allows players to choose from multiple query completion options based on lead-in questions (such as “Why do we…” or “Where should I…”) and select which are the most popular phrases to finish those queries. The answers are typically an interesting, funny and odd look into what the majority of people are searching for online.

Players accumulate points for each answer they get that is ranked the most popular and then proceed to the next round. Each session of game play is 10 rounds with two bonus rounds that allow users to sort queries from most popular to least popular.

The game was developed under the GlowPlay brand, a subsidiary of Glow Interactive that focuses on developing casual, mobile and social games for clients.

ABOUT GLOW INTERACTIVE:

Glow Interactive is an award-winning, digital marketing and creative agency based in New York City that is driving an online evolution that puts consumers first, ensuring they’re engaged, entertained, challenged and connected no matter the medium. Over the last decade, Glow has focused on using the latest design practices and technology to develop successful, dynamic interactive marketing and advertising campaigns, branding initiatives, games and viral applications. The company’s success is illustrated by its long list of Fortune 500 and 1000 clients, including USA Network, Toyota, Showtime, Canon, Discovery Channel, Avon, History Channel, A&E, Conde Nast, Wendy’s, Microsoft and others.

For more information about Glow Interactive, please visit www.glowinteractive.com.

The demo shows 100 random (intersecting) triangles textured with a Lena image and is rendering at about 30FPS on my Windows 7/Intel Xeon 5160.

Grab the source code!

A  quick demo showed that I would need a lot of line segments. It turned out that Graphics‘ moveTo and lineTo is too slow for that amount of lines. So I started looking for an Alchemy implementation of a line drawing algorithm, specifically Bresenham’s line algorithm. The search was not successful so I rolled up my sleeves and started coding it myself – with help of existing Alchemy demos and a C implementation of the algorithm. Here’s the result. Click it to switch between Alchemy rendering and Graphics rendering.

Source code here.

Attempt #1 – drawing on top of previous frames – rejected

Very simple but occasionally powerful effect of blending with the previous frame (looks like what’s going on when you get hit in Call of Duty 4). It works for slow motion, but as soon as the globe starts spinning quickly, you can see the individual frames.

Attempt #2 – accumulation buffer using FBO –  rejected

Also simple to implement. Basically it’s simulating the accumulation buffer (which is not available on the iPhone). I wasn’t able to find a sweet spot between a nice-looking motion blur and maintaining high fps (even if the rendering is performed at a much lower resolution).

Attempt #3 – screen space blurring – rejected

Originally sounded like a good idea – thought no one would be able to tell that it’s only a 2d blur. Not true. Rejected.

Attempt #4 – pre-blurred texture maps – used

Main idea: if the globe is spinning along its “main” axis (south pole to north pole), the motion blur can be simulated by just blurring the texture horizontally. How about generating a couple of pre-blurred texture maps corresponding to different rotations axes.

Before I get into details I must say that it works really well. I only use 32 different versions (making the amount of rotation axes 64) and it’s really hard to tell that it’s blurred along an axis that’s slightly off (in the actual iPhone application that this was developed for I am actually snapping to the correct axis which is impossible to notice).

The next disadvantage is also obvious: I only have a limited amount of blur values. In the application I work around that by accelerating and decelerating rapidly.

Step 1

How to find the best distribution of 32 points on a sphere (actually 64, but the other 32 are just opposite versions of the first 32)? I wrote a Flash application that does it for me. It runs a simulation of the following algorithm. Thirty two points are randomly positioned in space, each has a positive charge and is restricted to the unit sphere. The purpose of the positive charge is that the points are repulsed from each other, eventually ending up in an even distribution.

Step 2

Blurring the original texture by a general axis is just a matter of writing down a couple of equations and hoping that you haven’t made a typo.

Step 3

Using the pre-blurred textures is now a piece of cake. Just find the nearest axis and use the corresponding texture.

Attempt #5 – am I missing something obvious here?

Let me know if I am.

Using FLEX to develop banners is not a common technique. For some, it may seem a bit gratuitous versus just using flash. Hopefully by the end of this series, I can convert a few people to make a switch. For a lot of designer/developers, FLEX is a foreign tool that is oft left unused, but when it comes to the creation of multiple banners in multiple sizes, in a short timeline, FLEX allows you to build banners faster that run faster and smoother than using Flash IDE. This is not to say that Flash can’t accomplish these things that FLEX can, but this is to say that once you learn how to appropriately include FLEX in your development process, it will save you time and allow you to focus on the parts of the banner that really matter – the creative.

One of the biggest hurdles for flash developers is how to get their banner designs into FLEX. While this article is not about how to use FLEX, I’ll briefly explain the model we use at Glow. We design all of our banners layouts within flash IDE. We usually put everything inside of one movieclip, typically named MCStage and we set the clip for export with a package that matches our banner (i.e. com.client.project.size.MCStage). By giving all your banners the same export clip, you can begin to easily template how graphics are brought into Flex. Within MCStage, you can setup your banner however you would normally setup a banner on the timeline. Then when you’re done, you simply generate a SWC file and save it to a swc library folder inside your flex project.

To begin, lets look at the problems FLEX helps us tackle:

• Easy banner creation, multiple resizing
• Changing constants between multiple files, such as frame-rate and dimensions
• Handling clickTag’s for multiple vendors
• Focus more time on the creative, not the structure

To address a quick criticism for those flash IDE die-hards, I do understand that its super simple to change the dimensions of a banner, frame-rate, or clickTags within flash IDE. The reason that I started using FLEX to develop banners is not because It’s hard to change these items within flash, but because it becomes time consuming to change these things when you’re producing 50+ banners a week across multiple sizes, and need to make changes to hundreds of banners at the same time. While your projects may not always be this large, these principles apply equally to small projects as they do to large projects.

The foundation of any template is an abstract class and/or an interface. This foundation class will provide you with enough functionality to cover any banner creative as well as be customizable enough to grow into any media project imaginable. For my example, I’ve created both an interface (IBanner) and an abstract (AbstractBanner) from which all online media projects I build extend. This file should facilitate all foundation principles of a banner that you would find useful in any online media situation. By examining the interface file, IBanner, you get an idea of what this foundation looks like:

public interface IBanner
{
	function init(event:Event=null):void;
	function onReady():void;
	function start():void;
	function stop():void;
	function reset():void;
	function bannerLoop(event:TimerEvent):void
	}

Any IBanner will accurately handle its own loading, starting, stopping, resetting and looping. Lets take a brief walk through how I implement these functions. To begin, lets look at our constructor:

public function AbstractBanner()
	{
		//initialize any foundation objects here;

		this.bannerState = BannerConstants.STATE_LOADING;
		this.loaderInfo.addEventListener(Event.INIT, this.init);
	}

This function is very simple. The first thing we do is set our bannerState to a loading state, add an event listener to listen for when the file itself is completely loaded. This ensures the banner doesn’t begin before everything is loaded. bannerState is simply a variable you can check against to ensure that nothing is happening when it shouldn’t be. In its most basic form, there are three banner states: Loading, Ready, and Complete.

public function init(event:Event=null):void
	{
		this.stage.frameRate = BannerConstants.FRAME_RATE;
		this.stage.scaleMode = StageScaleMode.NO_SCALE;

		this.loaderInfo.removeEventListener(Event.INIT, this.init);

		this.bannerState = BannerConstants.STATE_READY;
	}

Then, in the init function, we can begin to set up constants that can be shared between projects. These basics listed here are frameRate and scaleMode but can include anything you’d need to be the same across multiple files, such as tune-in text, load locations, security permissions, etc. The last thing we do is set the banner state to Ready which tells our main loop that you can start running. From here, programming your banner is pretty simple. I use onReady to set up any graphics, and then call any number of custom functions to animate the graphics of the banner. At this point, start and stop are not as necessary for standard banners, but they become much more useful when extending this class for rich media.

By having all your banners extend from this template, it allows you to easily set up similar behavior for all your banners. Nothing exemplifies this more than clickTag’s. Our navigateToUrl function looks as follows:

public function navigateToUrl(url:String, description:String=""):void
	{
		var sURL:String;
		if ((sURL = root.loaderInfo.parameters.clickTag))
		{
			navigateToURL(new URLRequest(sURL), "_blank");
		}
		else
		{
			throw new Error("clickTag not found in loaderInfo.parameters, but user did click banner, Actionscript 3.0 Flash Player 9, " + new Date());
		}
	}

This function represents a standard Dart clickTag (because the majority of our banners are served through Dart). When we need to make a clientX version of the banner, all we have to do is make a new abstract that extends this class, customize the navigateToUrl function, and then extend your banner from that.

The last function of importance is bannerLoop. This is the tree from which all the banners’ branches stem. The last point problem I listed above is focusing on creative rather than building banner structures and that is where this function becomes essential. At its essence, our bannerLoop provides a model for building any number of effects, particle generators, syncing banners and much more. The foundation of all of this comes from our updateObjects model. UpdateObjects will be explained in more detail in a future article, but if you look at the function below, you can see how they are implemented:

public function bannerLoop(event:TimerEvent):void
	{
		switch(this.bannerState)
		{
			case BannerConstants.STATE_LOADING:
				//nothing
				break;
			case BannerConstants.STATE_READY:
				if (this.updateObjects.totalUpdateObjects > 0)
				{
					var now:Number = getTimer();
					var dt:Number = now - this.oldTime;
					this.oldTime = now;
					dt = dt < 0 ? 0 : dt;

					this.currentAnimationTime += dt;
				}

				this.updateObjects.update(this.currentAnimationTime);

				if (this.currentAnimationTime > BannerConstants.BANNER_LENGTH)
				{
					this.bannerState = BannerConstants.STATE_END;
				}

				break;
			case BannerConstants.STATE_END:
				//nothing
				break;
		}
	}

Lastly, an ancillary bonus of building a template is to provide functionality that you use during the development of banners for all your banners. One example of this is a function we use in virtually every banner project, hideDisplayObject(… args). This function sets the visibility of any clip you pass to it. I use this all the time to hide stage items after their alpha is tweened to 0.

protected function hideDisplayObject(... args):void
	{
		for each (var target:DisplayObject in args)
		{
			if (target)
			{
				target.visible = false;
			}
		}

	}

You can begin to see how important building a solid foundation for your banners becomes. In future articles we’ll discover how this abstract can be used to build any online media project from simple video players to full page take overs. However, with the ideas outlined here, you have a foundation from which you can quickly build, duplicate, and resize any standard media project. If you have any questions about the ideas outlined here, feel free to leave a comment below.

Get the source code (contains the walking creatures, too).

PS: Again, if you happen to evolve an interesting locomotion, send me your code/swf and I’ll post it here.

Preparation

Here is the first demo.

The task is to teach an ant to get to the end of the L-shaped corridor as fast as possible. All an ant is allowed to do (every frame) is rotate freely and turn on its forward thrust (acceleration). Ant’s behavior is encoded in its DNA consisting of several genes. Every gene prescribes what an ant does in the frame that corresponds to the index of the gene in the DNA. Specifically, each gene is a 3-bit number encoding the ant’s possible behavior:

var gene:int = dna[simulationStep];
var acceleration:Boolean = gene & 1;
var turnPositive:Boolean = gene & 2;
var turnNegative:Boolean = gene & 4;

The genetic operators used are not tuned for this particular application. What you see on the screen is one population of 100 individuals. It takes time but if you let them learn you’ll see that in the end they achieve the goal in the most optimal way.

Evolution

Encouraged by the result (also, it only took about 2 hours to code) I wanted more. Without further ado I present the walking creatures (after 300 generations).

The task here is to give physics-based (thank you, Box2D!) ragdoll figures brains to be able to move a certain distance. Following Ngo and Marks’ paper Spacetime Constrains Revisited I set out to make my own creatures in Flash. In short, I am using a genetic algorithm to train a neural network that controls motors in the creature’s joints. The fitness function is plainly how far a creature can get within a certain amount of time. The neural network used is very simple – it’s a single layer feed-forward neural network with the inputs being the angles at every joint, vertical velocity and horizontal distance traveled and the outputs the speed of the motor and the target angle of every joint.

Results

I was really happy to see results only after about 300 generations (it took a night though): a frog. Excited, I ran it again and again and interestingly, I only got frogs. I tried to change the fitness function a bit so that the creatures that touch the ground are penalized but didn’t get anything interesting. Also tried to make the torso a bit heavier and an inchworm-like creature evolved. If you like, you can try to evolve your own creatures, here’s the link to first generation (with a little bit of creativistic randomization to start with). At the end of every generation, the best DNA is traced so if you happen to get some interesting locomotion, please send it to me and I’ll post it here. (Source code to follow after a brief clean-up.)

Edit: Get the source code in the next GA post.

What’s Next

My plan is to try what behaviors will emerge with different shapes, physics set up, fitness functions or selection algorithms.

Download the script here, and add it to your Adobe Extensions manager. Reopen Photoshop and voila! It will be under Window > Extensions. Fire it up, give it a few minutes and boom! No more annoying “copy 1,2,3…” and the resulting hair pulling.  It works for MAC and Windows.  No more of this…

Now, in retrospect, Photoshop has really made our lives so much easier,  so to bash Adobe’s poor decision making in adding “copy” to duplicated layers seems trivial. Just like the most current generation will never know what it was like to blow into a Nintendo Cartridge to get it to work, my generation will never know what it was like to design without the aid of the computer. Phototypesetting, paste-ups, rub-on lettering— are these panels in Illustrator or something?

Anyway, thank you to Mike Hale for making all of our lives a bit easier, maybe you can make an extension to better Photoshop’s Pen tool? *Hint* *Hint*