Flash, arts and happiness

Yesterday, Oli woke my sleeping awareness of my weblog by commenting on this one and a half year old post about getting a high resultion picture out of a webcam in Flash. His comment (in short): “it doesn’t work!”.

Unfortunately, he’s correct. I’ve run into this myself, once CS3 came out. It did work in the Flash 9 Bèta, but it is broken in the release version. The problem lies in these lines:

my_video._width = my_cam.width;
my_video._height = my_cam.height;

Where this also adjusted the what is now Video.videoWith and Video.videoHeight properties, it is now impossible to change those after the creation of your instance of the Video object. No need to worry, though, because if you’d just supply the size you want when creating the instance, everything works fine. Here’s the whole working thing:

var my_cam:Camera = Camera.getCamera();
my_cam.setMode(640,480,10);

var my_video:Video = new Video(my_cam.width, my_cam.height);
my_video.attachCamera(my_cam);
addChild(my_video);

var bmd_video:BitmapData = new BitmapData(my_cam.width,my_cam.height);
var bm:Bitmap = new Bitmap(bmd_video);
bm.x = my_cam.width;
bm.y = 0;
addChild(bm);

var updateInterval:uint = setInterval(update,100);

function update() {
	bmd_video.draw(my_video);
}

Of course, putting everything in nice class files would be better, but I find timeline code easier for these simple demonstrations. This doesn’t require you to create and save all the files, it’s just paste and run. But if you prefer that, you can use this:

package
{
	import flash.display.Bitmap;
	import flash.display.BitmapData;
	import flash.display.MovieClip;
	import flash.display.StageAlign;
	import flash.display.StageScaleMode;
	import flash.events.Event;
	import flash.events.TimerEvent;
	import flash.media.Camera;
	import flash.media.Video;
	import flash.utils.Timer;

	[SWF(width="1280", height="480", frameRate="10", backgroundColor="#FFFFFF")]
	public class WebcamHiRes extends MovieClip
	{
		private var _camera:Camera;
		private var _video:Video;
		private var _bmd:BitmapData;
		private var _bm:Bitmap;

		private var _updateTimer:Timer;

		public function WebcamHiRes():void
		{
			stage.scaleMode = StageScaleMode.NO_SCALE;
			stage.align = StageAlign.TOP_LEFT;

			_camera = Camera.getCamera();
			_camera.setMode(640, 480, 10);

			_video = new Video(_camera.width, _camera.height);
			_video.attachCamera(_camera);
			addChild(_video);

			_bmd = new BitmapData(_camera.width, _camera.height);
			_bm = new Bitmap(_bmd);
			_bm.x = _camera.width;
			addChild(_bm);

			_updateTimer = new Timer(100);
			_updateTimer.addEventListener(TimerEvent.TIMER, update);
			_updateTimer.start();
		}

		private function update(e:Event = null):void
		{
			_bmd.draw(_video);
		}
	}
}

Remeber my post about getting a highter resolution image out of the webcam in the Flash9 Alpha? In CS3, it can even get you 640×480 pixels. Since my webcam is limited to 640×480 pixels, I haven’t been able to try for higher resolutions, yet, so I don’t know about those. Hopefully I can come up with a nice idea to demo this (I bet you don’t want another fish-eye, would you?). Well, actually I’ve got plenty of ideas, but time’s always short between school, work and social life.

For a project, we want to be able to play with ball in a webcam-game. It took me a while to figure out a good algorithm but I managed. It’s not perfect, but good enough for prototyping. It looks like this:

Of course, you can play too.

The little fisheye experiment from earlier has been updated. It wasn’t optimized in any way, nor quite organized. I now only calculate the displacements only once instead of every frame, which of course is a major improvement. Furthermore, I build a nice class around it, making it easier to implement (or share). Here goes…

At first, here’s the fishEye class:

package {

  import flash.display.BitmapData;
  import flash.geom.Point;
  import flash.Math;
  import flash.Array;

  public class fishEye extends BitmapData {

    private var size:uint;
    private var source:BitmapData;

    private var displacement:Array;

    public function fishEye(source:BitmapData, bgColor:uint = 0x00000000) {
      this.source = source;
      size = Math.min(source.width, source.height);

      var radius:Number = size / 2;
      displacement = new Array(size);

      var hw:uint = source.width / 2;
      var hh:uint = source.height / 2;

      for (var i:uint = 0; i < size; i++) {
        displacement[i] = new Array(size);
        for (var j:uint = 0; j < size; j++) {
          var dx:int = i - radius;
          var dy:int = j - radius;
          var dist:Number = Math.sqrt(dx * dx + dy * dy);

          if (dist > radius) continue;

          var ndist:Number = dist / radius;
          ndist *= (Math.PI/2);
          ndist = Math.cos(ndist);
          ndist *= radius;
          ndist = radius - ndist;

          var angle:Number = Math.atan2(dx,dy) + Math.PI / 2;

          var ox:int = Math.cos(angle) * ndist;
          var oy:int = Math.sin(angle) * ndist;

          ox = hw - ox;
          oy = hh + oy;

          displacement[i][j] = { x: ox, y: oy };

        }
      }
      super(size, size, false, bgColor);
    }

    public function update() {
      for (var i:uint = 0; i < size; i++) {
        for (var j:uint = 0; j < size; j++) {
          if (displacement[i][j]) setPixel32(i,j,source.getPixel32(displacement[i][j].x,displacement[i][j].y));
        }
      }
    }
  }
}

A quick example of an implementation:

import fishEye;

var my_cam:Camera = Camera.getCamera();
my_cam.setMode(320,240,30);

var my_video:Video = new Video();
my_video.width = my_cam.width;
my_video.height = my_cam.height;
my_video.attachCamera(my_cam);

var bmd_video:BitmapData = new BitmapData(my_cam.width,my_cam.height);
var bm_video:Bitmap = new Bitmap(bmd_video);
bm_video.x = 0;
bm_video.y = 0;
addChild(bm_video);

var bmd_fisheye:fishEye = new fishEye(bmd_video);
var bm_fisheye:Bitmap = new Bitmap(bmd_fisheye);
bm_fisheye.x = my_cam.width;
bm_fisheye.y = 0;
addChild(bm_fisheye);

var updateInterval:uint = setInterval(update,1000 / my_cam.fps);

function update() {
  bmd_video.draw(my_video);
  bmd_fisheye.update();
}

It looks the same as before:

..but it’s a lot faster, go check it out. Flash has also something like a displacementMap filter, which I still have to try out, but as I’m trying to familiarize myself with AS3 (coming along nicely) I decided to take this path instead of the easy way.

So… here’s another update. A rather large one, for I’ve been silent for a time. Been busy, I bet you know the drill. I’ll post them separately though, just to keep things organized.

As you’ve been able to see, the quality of my webcam is not that great. Actually, to be honest, it sucks. I thus decided to get a new one. I bought a used PS2 EyeCam, since those are rather cheap (€17.50 for this one), compared to high-quality PC-webcams, which often cost over €40.00. The quality however is very good, although, since it has to squeeze all data over a slow USB 1.1 connection, compression is certainly visible. However, I can live with that, so it’s a big value for money, I’d say.

Compare that to the picture of my garden you can see in my previous post!