A lot has been written about this topic. Following advice from the last link, I eventually managed to build the library. To save you troubles going through all the steps, here it is for armeabi and armeabi-v7a.

You can check out my self-contained ActionScript 3 version put together using the links above. A couple of images it generated before the full source code.

package
{
	import flash.display.Bitmap;
	import flash.display.BitmapData;
	import flash.display.Sprite;
	import flash.events.Event;

	[SWF(backgroundColor="#000000", frameRate="60", width="800", height="600")]
	public class PathTracing extends Sprite
	{
		public static const AA:int = 1; // antialiasing
		public static const WIDTH:int = 320 * AA;
		public static const HEIGHT:int = 240 * AA;

		public static const CAM_NEAR:Number = 2;
		public static const CAM_FOV:Number = Math.PI * 0.3;		

		public static const MAX_DEPTH:int = 5;

		private var scene_:Array;

		private var bmd_:BitmapData;
		private var buffer_:Vector.<Vec3>;
		private var counts_:Vector.<int>;

		/**
		 *
		 *
		 */
		public function PathTracing()
		{
			var i:int;

			const camera:Vec3 = new Vec3(0, 0, 2);
			scene_ = Scenes.scene00;

			// add random spheres
			for (i = 0; i < 2; ++i)
			{
				scene_.push(new Sphere(0.1 + 0.5 * Math.random(), new Vec3(Math.random() * 2 - 1, Math.random() * 2 - 1, Math.random() * 2 - 1), new Vec3(Math.random(), Math.random(), Math.random()), new Vec3()));
			}

			// transform scene to camera space
			for (i = 0; i < scene_.length; ++i)
			{
				var sphere:Sphere = scene_[i];
				sphere.center.x -= camera.x;
				sphere.center.y -= camera.y;
				sphere.center.z -= camera.z;
			}

			// display
			bmd_ = new BitmapData(WIDTH, HEIGHT, false, 0);
			// holds accumulated color
			buffer_ = new Vector.<Vec3>(WIDTH * HEIGHT);
			// holds number of samples of that pixel
			counts_ = new Vector.<int>(WIDTH * HEIGHT);

			for (i = 0; i < WIDTH * HEIGHT; ++i)
			{
				buffer_[i] = new Vec3();
				counts_[i] = 0;
			}

			// upside down (we're using OpenGl style coordinate system)
			var b:Bitmap = new Bitmap(bmd_);
			b.smoothing = true;
			b.scaleY = -1;
			b.y = b.height;
			b.scaleX *= 1 / AA;
			b.scaleY *= 1 / AA;
			addChild(b);

			addEventListener(Event.ENTER_FRAME, onEnterFrame);
		}

		/**
		 *
		 * @param event
		 *
		 */
		private function onEnterFrame(event:Event):void
		{
			var x:int, y:int;
			var c:int = 2000;

			while (c--)
			{
				shootRay(Math.random() * WIDTH, Math.random() * HEIGHT);
			}

			bmd_.lock();

			for (y = 0; y < HEIGHT; ++y)
			{
				for (x = 0; x < WIDTH; ++x)
				{
					const i:int = y * WIDTH + x;

					if (counts_[i])
					{
						var color:Vec3 = buffer_[i];

						const r:int = Utils.clampi(color.x * 255 / counts_[i], 0, 0xff);
						const g:int = Utils.clampi(color.y * 255 / counts_[i], 0, 0xff);
						const b:int = Utils.clampi(color.z * 255 / counts_[i], 0, 0xff);

						bmd_.setPixel(x, y, (r << 16) | (g << 8) | b);
					}
				}
			}

			bmd_.unlock();
		}

		/**
		 *
		 * @param x
		 * @param y
		 *
		 */
		private function shootRay(x:Number, y:Number):void
		{
			var ray:Ray = new Ray();

			ray.o.x = 0;
			ray.o.y = 0;
			ray.o.z = 0;

			const nx:Number = (2 * (x / WIDTH) - 1) * WIDTH / HEIGHT;
			const ny:Number = 2 * (y / HEIGHT) - 1;

			ray.d.x = CAM_NEAR * Math.tan(CAM_FOV * 0.5) * nx;
			ray.d.y = CAM_NEAR * Math.tan(CAM_FOV * 0.5) * ny;
			ray.d.z = -CAM_NEAR; 

			ray.d = Utils.norm(ray.d);

			const i:int = int(y) * WIDTH + int(x);

			var c:Vec3 = radiance(ray, 0);

			buffer_[i].x += c.x;
			buffer_[i].y += c.y;
			buffer_[i].z += c.z;

			counts_[i]++;
		}

		/**
		 *
		 * @param ray
		 * @param depth
		 * @return
		 *
		 */
		private function radiance(ray:Ray, depth:int):Vec3
		{
			var i:int;
			var sphere:Sphere;
			var t:Number;

			if (depth > MAX_DEPTH)
				return new Vec3();

			var nearest:Number = Infinity;
			var collider:Sphere = null;

			for (i = 0; i < scene_.length; ++i)
			{
				sphere = scene_[i];

				t = sphere.intersect(ray);

				if (t > 0 && t < nearest)
				{
					nearest = t;
					collider = sphere;
				}
			}

			if (collider == null)
				return new Vec3();

			// compute new ray
			var out:Ray = new Ray();

			out.o.x = ray.o.x + nearest * ray.d.x;
			out.o.y = ray.o.y + nearest * ray.d.y;
			out.o.z = ray.o.z + nearest * ray.d.z;

			var normal:Vec3 = new Vec3();
			normal.x = out.o.x - collider.center.x;
			normal.y = out.o.y - collider.center.y;
			normal.z = out.o.z - collider.center.z;
			normal = Utils.norm(normal);

			var tangent:Vec3 = new Vec3();

			if (Math.abs(normal.x) < Utils.EPSILON)
			{
				tangent.x = 0;
				tangent.y = -normal.z;
				tangent.z = normal.y;
			}
			else
			{
				tangent.x = normal.y;
				tangent.y = -normal.x;
				tangent.z = 0;
			}

			tangent = Utils.norm(tangent);

			const bitangent:Vec3 = normal.cross(tangent);

			// random ray shooting from the normal hemisphere
			const angle:Number = Math.random() * Math.PI * 2;
			const radius2:Number = Math.random();
			const radius:Number = Math.sqrt(radius2);

			const cos:Number = Math.cos(angle) * radius;
			const sin:Number = Math.sin(angle) * radius;
			const sqrt:Number = Math.sqrt(1 - radius2);

			out.d.x = tangent.x * cos + bitangent.x * sin + normal.x * sqrt;
			out.d.y = tangent.y * cos + bitangent.y * sin + normal.y * sqrt;
			out.d.z = tangent.z * cos + bitangent.z * sin + normal.z * sqrt;

			out.d = Utils.norm(out.d);

			// compute new color
			var color:Vec3 = radiance(out, depth + 1);

			color.x *= collider.color.x;
			color.y *= collider.color.y;
			color.z *= collider.color.z;

			color.x += collider.emission.x;
			color.y += collider.emission.y;
			color.z += collider.emission.z;

			return color;
		}
	}
}

class Vec3
{
	public var x:Number;
	public var y:Number;
	public var z:Number;

	public function Vec3(x:Number = 0, y:Number = 0, z:Number = 0)
	{
		this.x = x;
		this.y = y;
		this.z = z;
	}

	public function cross(v:Vec3):Vec3
	{
		var o:Vec3 = new Vec3();

		o.x = y * v.z - z * v.y;
		o.y = z * v.x - x * v.z;
		o.z = x * v.y - y * v.x;

		return o;
	}
}

class Ray
{
	public var o:Vec3 = new Vec3();
	public var d:Vec3 = new Vec3();
}

class Sphere
{
	public var radius:Number;
	public var center:Vec3;
	public var color:Vec3;
	public var emission:Vec3;

	public function Sphere(radius:Number, center:Vec3, color:Vec3, emission:Vec3)
	{
		this.radius = radius;
		this.center = center;
		this.color = color;
		this.emission = emission;
	}

	/**
	 *
	 * @param ray
	 * @return
	 *
	 */
	public function intersect(ray:Ray):Number
	{
		const px:Number = ray.o.x - center.x;
		const py:Number = ray.o.y - center.y;
		const pz:Number = ray.o.z - center.z;

		const pp:Number = px * px + py * py + pz * pz;
		const pd:Number = px * ray.d.x + py * ray.d.y + pz * ray.d.z;

		const A:Number = 1;
		const B:Number = 2 * pd;
		const C:Number = pp - radius * radius;

		const det:Number = B * B - 4 * A * C;

		if (det < 0)
			return -1;

		const det2:Number = Math.sqrt(det);

		const sol:Number = (-B - det2) / (2 * A);

		if (sol < 0)
			return -1;

		return sol;
	}
}

class Utils
{
	public static const EPSILON:Number = 0.0001;

	public static function clamp(v:Number, min:Number, max:Number):Number
	{
		return Math.max(Math.min(v, max), min);
	}

	public static function clampi(v:int, min:int, max:int):int
	{
		return Math.max(Math.min(v, max), min);
	}

	public static function norm(v:Vec3):Vec3
	{
		var o:Vec3 = new Vec3(v.x, v.y, v.z);

		const dd:Number = v.x * v.x + v.y * v.y + v.z * v.z;
		if (dd == 0) return o;

		const invd:Number = 1 / Math.sqrt(dd);
		o.x *= invd;
		o.y *= invd;
		o.z *= invd;		

		return o;
	}
}

class Scenes
{
	public static const R:Number = 1e5;
	public static const G:Number = 0.5;

	public static const scene00:Array =
		[
			new Sphere(R, new Vec3(-R-1, 0, 0), new Vec3(G, G, G), new Vec3()),//left
			new Sphere(R, new Vec3(R+1, 0, 0), new Vec3(G, G, G), new Vec3()),//right
			new Sphere(R, new Vec3(0, 0, R+1), new Vec3(G, G, G), new Vec3()),//front
			new Sphere(R, new Vec3(0, 0, -R-1), new Vec3(G, G, G), new Vec3()),//back
			new Sphere(R, new Vec3(0, R+1, 0), new Vec3(G, G, G), new Vec3()),//top
			new Sphere(R, new Vec3(0, -R-1, 0), new Vec3(G, G, G), new Vec3()),//bottom
			new Sphere(0.5, new Vec3(0, 1+0.25, 0), new Vec3(), new Vec3(12,12,12))//light
		];
}

I know I don’t speak alone when I say I would love to see Indesign’s link panel implemented into Photoshop. The ability to import external linked images into Indesign has been one of the most useful features I’ve come across and is poorly lacking in Photoshop’s smart objects. Although powerful, we would still have to open 20+ files just to change the color of a header from red to blue.

BUT WAIT! No need to zap your little Frankenshop to life yet. Check out these following tutorials on Photoshop Variables: the poorly named equivalent to Indesign Links! Although Variables are a bit more complicated, it sure beats suffering the consequences when your mutant program becomes self-aware. Eeek!

ADOBE VARIABLE BASICS:
All you need to know about linking out to an external .psd.

• Importing an external header .psd that will update over many mockups: http://bit.ly/9vvg1R

• Similar tutorial: http://bit.ly/fUbmNo

ADOBE VARIABLES & EXCEL:
Check out these tutorials about using excel spreadsheets in conjunction with variables.

• Create Mailing Labels: http://bit.ly/bo1N4L

• YouTube Video: http://youtu.be/bJV6ug1npyQ

Without looking at the shoulders of giants, I implemented a simple scratching demo. Basically, whenever the scratching is initiated, I pause the source stream and start playing a stream which has a “fill-audio-buffer” callback attached to it. That is, the audio is generated dynamically by filling a small playback buffer in the callback function. In the callback, a simple linear interpolation between the previous position in the scratch buffer and the current position is performed.

for (int i = 0; i < buffer_length; ++i) output[i] = input[F(i)];

where F is a piecewise linear function interpolating between [prev_sample_index, C * prev_pos_screen] and [curr_sample_index, C * curr_pos_screen]. The C multiplier corresponds to a relationship between a finger position (whether it’s a translational or a rotational motion) and the position in the source buffer. It turns out that the sound this method produces is too “digital”. It is far from a smooth vinyl scratching emulation. Consulting with our audio (and graphics) designer revealed that it is caused by abrupt changes in the playback frequency (= dF/dt). Thus started a few days of figuring out/tweaking parameters of various interpolation methods that would ensure smooth frequency slides during scratching.

At that point I started looking for other people trying to do the same. It turns out that although a lot of people claim/show they know how to achieve the effect, only a few share some code. Since my result seems to be satisfactory to our team, let me describe my approach and share the full source code.

There are two basic problems to deal with. The first one is how to interpolate the source wave to find intermediate values when F is a general function. The other one is to have smooth frequency changes.

1. Sound wave interpolation

This was the easier problem. A quick search revealed a Stack Overflow discussion and a useful article by Olli Niemitalo. Using the “6-point, 5th-order optimal 32x z-form implementation” interpolator seemed to have done the trick (maybe even a simpler interpolator would suffice).

2. Frequency interpolation

I was mainly looking at two features of the interpolation function (see curve fitting, smoothing) which seem to be on the opposite sides of a balance scale. One is smoothness of the function, the other one is fitness, that is, how close the function is to the recorded (interpolated) values.

Our approach is to get a nice smooth function without trying to achieve precision first and then apply tricks to push it closer to the recorded values. We discovered that a simple moving average of the scratching velocity (averaged over 3000 audio samples) and integrating the result works well. As expected, it quickly drifts away from the target position C * curr_pos_screen. To remedy this problem we chose to adjust the velocity to point in the direction towards the target position. And the further the target is (that is, the bigger the error), the larger the adjustment is. (Note: another approach would be to base the adjustment magnitude on the current scratching speed or acceleration rather than error.)

Feel free to look at the source code, use your own music, play around with the interpolation functions or change the input method.

[UPDATE]

Now using mmap to allow for scratching the whole length of the track. Download the source code.

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!

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.