Many of you may of seen Pixars recent movie UP. In the movie the main character manages to take flight in his house by attaching dozens of inflatable balloons to the roof. Seems a bit far fetched don’t you think? Obviously the guys at Pixar aren’t too concerned with the laws of physics.
Well here at fatlinesofcode we don’t mind if cartoons break the laws of physcis either. But we do love to test them.
I have built a fun prototype game in Box2D to test this house ballooning theory. The house is a box with multiple balls attached via distance joints. Each of the balls has an anti-gravitational force applied to it which provides lift to the house. To pilot this balloon the UP arrow key is used to simulate adding more hot air to the balloons. Each time you press it an upward force is applied to each balloon thus providing more lift to the house. Additionally the LEFT and RIGHT arrow keys can be used to apply left and right forces to the house. Combining these controls you can achieve steady flight. Check out the demo and try manoeuvring your balloon through the various obstacles.

I few weeks ago I posted a pixelation effect. I have since optimised the code and also added in support for webcam input.

Checkout the demo and source code below.

Here is an explanation of the technique.

First get the bitmapData source from the video input. Then divide the data into a grid of new bitmaps using a double for-loop. Store each one these in a two dimensional array.

private function createBitmapGrid():void {

			var source:BitmapData = getVideoSource();

			var _w:Number=source.width;
			var _h:Number=source.height;
			var rows:Number=source.height/_divideGridBy; // cols
			var cols:Number=source.width/_divideGridBy; // rows
			var cellWidth:Number = _w/cols-_cellpadding;
			var cellHeight:Number = _h/rows-_cellpadding

			for (var i:uint=0; i<cols; i++) {
				for (var j:uint=0; j<rows; j++) {
					var tempBitmapData:BitmapData=new BitmapData(cellWidth,cellHeight, true, 0x000000);
					var tempBitmap:Bitmap =new Bitmap(tempBitmapData);
					tempBitmap.x=i*_w/cols;
					tempBitmap.y=j*_h/rows;
					if(! _particleArray[i])
					_particleArray[i] = {};
					_particleArray[i][j] = tempBitmap;
					_holder.addChild(tempBitmap);
				}
			} 			

		}

Then add an enterframe listener to update the all the bitmap cells in the grid. Add a double for-loop to go through each cell. Use the copyPixel function to copy a rectangular portion of the source image to each cell. After you copy the source data, find the average brightness of the cell and use it as a variable to adjust the z value of the bitmap cell.

this.addEventListener(Event.ENTER_FRAME, updateBitmapGrid);
private function updateBitmapGrid(e:Event):void {

			var source:BitmapData = getVideoSource();

			var _w:Number=source.width;
			var _h:Number=source.height;
			var rows:Number=source.height/_divideGridBy; // cols
			var cols:Number=source.width/_divideGridBy; // rows
			var cellWidth:Number = _w/cols-_cellpadding;
			var cellHeight:Number = _h/rows-_cellpadding

			for (var i:uint=0; i<cols; i++) {
				for (var j:uint=0; j<rows; j++) {
					var tempBitmap:Bitmap = null;
					if (_particleArray[i]) {
						if(_particleArray[i][j]){
							tempBitmap=_particleArray[i][j];
						}
					}
					if(tempBitmap != null){
						var p:Point = new Point(0, 0);
						var rect:Rectangle = new Rectangle(tempBitmap.x+_cellpadding, tempBitmap.y+_cellpadding, cellWidth, cellHeight);
						tempBitmap.bitmapData.copyPixels(source, rect, p);
						var color:Number=getAverageColour(tempBitmap.bitmapData);
						var brightness:Number=getBrightness(getAverageColour(tempBitmap.bitmapData));
						if(_moveZ)
						tempBitmap.z = 255 - (brightness * 1);

					}
				}
			}
		}

private function getAverageColour( source:BitmapData ):Number {
			var red:Number=0;
			var green:Number=0;
			var blue:Number=0;

			var count:Number=0;
			var pixel:Number;

			for (var x:Number = 0; x < source.width; x++) {
				for (var y:Number = 0; y < source.height; y++) {
					pixel=source.getPixel(x,y);

					red+=pixel>>16&0xFF;
					green+=pixel>>8&0xFF;
					blue+=pixel&0xFF;

					count++;
				}
			}

			red/=count;
			green/=count;
			blue/=count;

			return red << 16 | green << 8 | blue;
		}

		private function getBrightness(colour:Number):Number {
			var R:Number=0;
			var G:Number=0;
			var B:Number=0;

			R+=colour>>16&0xFF;
			G+=colour>>8&0xFF;
			B+=colour&0xFF;

			var br:Number=Math.sqrt(R*R*.241+G*G*.691+B*B*.068);
			return br;
		}

Download package

Here is how it works. There is an onEnterFrame function which first creates a new Bitmap object from the video source data. A grid of smaller bitmaps is then created from this large bitmap. Each one of the smaller bitmaps is analysied for it’s average color and brightness. The z property (flash 10) is then set to the inverse of brightness. The resulting effect is that for each one of the grid blocks the block moves in and out as the brightness changes. Lighter blocks come forward and darker blocks move back.

Flash is magic. Now watch it and freak out.

Apologies to anyone with a slower machine, this swf is fairly cpu intensive. I would also recommend that you install the very latest flash player(10,0,22,87 ) to ensure you get the best framerate possible.

roundChildren(this)
function roundChildren(base:DisplayObjectContainer):void {
	for (var i:int=0; i<base.numChildren-1; i++) {
		var m:DisplayObject=base.getChildAt(i) as DisplayObject;
		var p:DisplayObjectContainer=base.getChildAt(i) as DisplayObjectContainer;
		if (m) {
			m.x=Math.round(m.x);
			m.y=Math.round(m.y);
			if(p){
				if (p.numChildren>0) {
					roundChildren(p);
				}
			}
		}

	}
}

Checkout the example below to see the script in action. The pixel snapping does not effect dynamic text because of the way flash anti-aliases it. But you can see a big improvement for the static text and vector lines placed inside a movieclip.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript" src="swfaddress.js"></script>
<script type="text/javascript" src="swffit.js"></script>
<script type="text/javascript">
var flashvars = {};
var params = {};
var attributes = {id:'mainswf'};
swfobject.embedSWF("main.swf", "container", "100%", "100%", "9.0.115","expressInstall.swf", flashvars, params, attributes);
swffit.fit("mainswf", 960, 580);
</script>
</head>
<body>
<div id="container">
</div>
</body>
</html>

First you’ll need to download and install flash debugger flash player 10 debugger.

Create a file named “mm.cfg” ( if it does not exist) in one of the following locations:

• Windows; C:Documents and Settingsusernamemm.cfg
• OSX; /Library/Application Support/Macromedia/mm.cfg
• Linux; home/username/mm.cfg

Open the newly created mm.cfg file in a text editor and add the following text:
ErrorReportingEnable=1
TraceOutputFileEnable=1

Reboot your machine.

Browser debugging should be now enabled. All trace statements from any swf will be outputted to the file /Users/[username]/Library/Preferences/Macromedia/Flash Player/Logs/flashlog.txt

Open a flash site, then look at the file and you’ll see all the traces coming from the swf.

Personally I find opening this file each time annoying so I use the tail -f command from the terminal so I can follow the file and see live trace outputs.

tail -f /Users/phil/Library/Preferences/Macromedia/Flash Player/Logs/flashlog.txt

Vancouver Downtown, originally uploaded by philipandrews.

Its offical, up is the new down. Apologies to whoever took this photo, it arrived via a chain email and I had to share it.
I hear that Lando Calrissian is going to be the new mayor.

This is an example of how to use the actionscript displacement filter and bitmapData to create a sliding water droplet effect.

example here

actionscript 3 source here

I’ve been playing around with latest version of Papervision. I found this great tutorial on how to load Collada mesh models. Here is a little swf I mashed up. It uses 2 collada models but groups them together as one object with actionscript. Tweener is used to control the animation and mouse events. You view the AS source and DAE model files here.

This is a simple tax calculator that I whipped together for calculating your income after tax in BC, Canada. It should be useful for anyone that works on a contract or hourly rate. Please note this does not include CCP or employer insurance. Show me the money!

(flash + skateboarding) * 3D = awesomeness

Checkout this awesome little flash game built on papervision 3D. Its a very simple idea but pretty effective, lets hope he keeps the development going and takes it to the next stage. If I was this dude, I’d try and market the idea to Tech Deck.

The current dev version has a fullscreen and link to youtube page feature. I still haven’t been able to get the syncing feature to work. The widget crashes everytime I try and send the audio time to flash using SetVariable

If anyone is interesting in contributing to this project, let me know and I’ll add you as a member on googlecode.

It amazing what you can accomplish when you don’t work. My new portfolio of selected flash and front-end development sites I have worked on over the past few years is now online. For all the geeks: there is a link to the actionscript 3 source. The link is in a not so obvious but logical place, have fun finding it.

• Car Rear indicator lights are red as opposed to amber in the all the countries I’ve been to
• The front brake lever on a bike is on the left and the rear break is on the right.
• Some traffic lights flash when green, I still don’t know why this is.
• There are no drivers on the skytrains. They must be operated by computer or remotely.
• You have to pay for incoming calls on mobile phones.
• Canadians dont know how to use round-abouts, most people stop in the middle of them.
• Light switches go down for off and up for on.
• The big liquor stores don’t sell cold beer.

Apparently gears on bike just ain’t cool any more. Not wanting to be left out the funky bike gang, I picked up an old Raleigh 7-speed last weekend. I took it down to Our community bikes in East Vancouver, the bike mechanics down there are awesome. For about $10 a hour they showed me how to strip out the old components and convert the hub to a single speed. The bike flys now. Here is a summary of the work done.

• Overhauled and trued wheels.
• New chain ring.
• New single speed cog and spacer on hub.
• Broke and shortened the chain.
• New tires.
• Removed rear brake.
• Removed stand.
• New red grip.
• New seat.

Check out the before and after shots on flickr.

EA Skate rocks! Its by far the best skateboarding game since Tony Hawk 2. The feeling of control you get from the flick it system and the satisfaction of landing a hard trick mimic the feeling you get when landing your best trick whilst your really skating. I suck at real skating, so rather than put all my efforts into that I’m redirecting my skills towards making Skate 2 better.

• more skate styles eg Daewon song style and Stefan Jokanski 360 flips.
• would be cool if each trick had 3 different variances which you could purchase for your character. eg Daewon 360flips, Reynolds frontside sides, Kenny Reid 5-0s, Kosten backside noseblunts.
• tweaking out flip tricks, maybe the higher you ollie or tweak button.
• better co-ordinations between ollie and rotation, you should’nt be able to rotate once airborne. Would make frontside flip animations more effective, you’d have to time the rotation and ollie flip together. Not sure how this could work with steering. Ideally there should be different speeds of rotation so 360s have a different animation from 180s.
• switch style, a slider variable in your character profile, the higher the variable the more the tricks and stance should look reversed.
• more camera angles on replays and editing, fisheye and long lens views.
• Real animations for jumping off the board to walk. Running and jumping onto the board animation.
• Make your own skate video part. Collect footage and edit it.
• Fisheye view.
• Bails and kick out of tricks.

Here is an idea I had for a portfolio. It’s a 3D cube built in papervision to view the websites screenshots. The result was a bit naff so I never developed it further. It was a fun use of Papervision3D and as3 though. Papervision is surprisingly easy. Source is here for anyone that wants it.