Roommate gave me his old Pandigital eReader, which he never cared for, which gave me the perfect opportunity to take it apart and harvest its innards (and also have a cocktail!).

A WiFi radio, two cute little speakers, a rechargeable battery, the LCD, and the digitizer — There’s good stuff in there. Once I figure out how to break out the ribbon cables WATCH OUT, WORLD.

Something in that the available range of pixel values in PB is [0,1], and the conversions are just not working out.

But! Anyway, in the meantime, while I bang my head against this wall, I’m a-learnin’ my way through Make: Electronics as well. This thing makes a noise, and I love it so.

Building on my Histogram viewer, the next task is to select a sub-range of the input intensity histogram and remap it to a full dynamic range in an output histogram, referred to by the text as “Histogram Expansion (H_E)”.

The helpful linear mapping function to stretch the interval [x_min, x_max] to cover the full [0,255] range is provided as:

Now, for this to work for color images, that function will have to be performed for each of the red, green, and blue intensity values for each pixel. Solving this through .getPixel() and .setPixel() proved to be much too slow and processor-heavy, so I made a quick PixelBender kernel to get the job done. Click through for a demo and explanation.

So the thing is, you’re not really performing a calculation on the input histogram, getting an output histogram, and then building an output image out of it (since that doesn’t really make sense), you’re just observing the input histogram to pick the [x_min, x_max] range, and then using those values to perform the calculation on the input image, clipping the available intensity levels for each pixel so that they’re either [0, x_min:x_max, 255] which gets you to the output image, which then you create a NEW histogram from so that you can observe that the calculation, in fact, had the effect of stretching out that portion of the histogram. Just go with it.

Starting out, I made a function that takes the input value (between 0 and 255) and remaps it onto the range [xmin,xmax]:

protected function StretchAlgorithm(input:int, xmin:int, xmax:int):int {
	var output:Number
	if (input < xmin) {
		output = 0;
	} else if (input > xmax ) {
		output = 255;
	} else {
		output = ((input - xmin)/(xmax-xmin))*255;
	}
	return int(output);
}

Then I wrote the larger function that scans through the image’s BitmapData() in raster order and performs this function three times for each pixel, combines the result, and sets that pixel value in an output BitmapData():

protected function HistogramStretch(input:BitmapData, xmin:int, xmax:int):BitmapData {
	var w:int = input.width;
	var h:int = input.height;
	var output:BitmapData = new BitmapData(w,h);
	input.lock();
	output.lock();

	for (var i:int = 0; i < w; ++i) {
		for (var j:int = 0; j < h; ++j) {
			var color:uint = input.getPixel(i,j);
			var red:int = StretchAlgorithm(color >> 16, xmin,xmax);
			var green:int = StretchAlgorithm(color >> 8 & 0xFF, xmin,xmax);
			var blue:int = StretchAlgorithm(color & 0xFF, xmin,xmax);
			var newColor:uint = red << 16 | green << 8 | blue;
			output.setPixel(i,j,newColor);
		}
	}
	input.unlock();
	output.unlock();

	return output;
}

For my example, I populate the xmin and xmax values by checking the position of the two sliders. Trouble is, all those .getPixel() and .setPixel() calls start bogging down my wee little MacBook Air and make everything run at maybe 2 fps. So knowing that this is precisely the kind of thing PixelBender is meant for, I came up with a Shader kernel that does it instead:

<languageVersion : 1.0;>

kernel HistogramExpansion

<   namespace : "digitologist.com";
    vendor : "Jon Thompson";
    version : 1;
    description : "A simple histogram expansion filter";
>
{
    input image4 src;
    output pixel4 dst;
    parameter int Min <
        minValue: 0;
        maxValue: 255;
        defaultValue: 0;
    >;
    parameter int Max <
        minValue: 0;
        maxValue: 255;
        defaultValue:255;
    >;

    void
    evaluatePixel()
    {
        float xmin = float(Min / 255);
        float xmax = float(Max / 255);
        float4 inputColor = sampleNearest(src,outCoord());
        dst.a = inputColor.a;
        dst.rgb = (inputColor.rgb - float3(xmin)) / (xmax-xmin);
    }
}

(I’m still only learning the ins and outs of Pixel Bender, so it took annoyingly long to get the floats vs. ints and such right, and a loooong time before I finally remembered that PB color values range from [0, 1] instead of [0,255])

This way I can just load that into Flash, store it as ExpansionShaderFilter and use .applyFilter() on the input BitmapData() thusly:

ExpansionShaderFilter.data.Min.value = [xmin];
ExpansionShaderFilter.data.Max.value = [xmax];

OutputBitmapData.applyFilter(stretchedData,new Rectangle(0,0,320,240),new Point(),new ShaderFilter(ExpansionShaderFilter));

So that’s that, an evenly-spaced stretching of a sub-range of intensity values to fill the full range of an output image. Next will be un-evenly spaced methods, like ramps or curves.

I thought it might be a fun challenge to work through the book in Flash and Actionscript, not by just porting over the existing code examples, but by analyzing the text and coming up with my own implementation from scratch. Think I’ll learn more from rolling my own than if I’m just replacing calls for calls.

I’m especially excited for everyone to constantly remind me that Flash has helpfully taken care of the whole “rotating an image” thing. I’m definitely not going to be the first, and I most assuredly won’t be the best, but doggone it, it’ll be fun to try.

First example starts easy enough: Histograms! Specifically just, like, looking at them.

So I made my own histogram visualizer, based loosely on the graphs I use for the Pulse project. Click through and I’ll walk you through it.

Chapter 2.1: Intensity Histogram: Global Features

The first lessons are about how to look at the histogram of an image and make some decision about it based just on that.  Things like, if there are two strong peaks in the histogram, they’re probably the foreground and the background.  Or if there’s there’s only one bin filled, then the image is going to be just an entirely featureless gray.

protected function CreateHistogram(input:Bitmap,scale:Number=1):Bitmap {
	var HistogramData:Vector.<Vector.<Number>> = input.bitmapData.histogram();
	var maxHeight:int = 100;
	var channelCounter:int = 1;
	var Histogram:Bitmap = new Bitmap(new BitmapData(256,maxHeight, false,0x00000000));
	Histogram.bitmapData.lock()
	for (var i:int = 0; i < 4; ++i) {
		var oneChannel:BitmapData = new BitmapData(256,maxHeight,false,0x00000000);
		for (var j:int = 0; j < 256; ++j) {
			var height:int = Math.min(maxHeight,(HistogramData[i][j])/scale);
			oneChannel.fillRect(new Rectangle(j,maxHeight-height,1,height),0xFFFFFFFF);
		}
		Histogram.bitmapData.copyChannel(oneChannel,new Rectangle(0,0,256,maxHeight),new Point(),channelCounter,channelCounter);
		channelCounter *= 2;
	}
	oneChannel.dispose();
	Histogram.bitmapData.unlock();
	return Histogram;
}

First I take a shortcut and use the built-in BitmapData.histogram() function to actually get the data. It gives you back a 4-row Vector, one each for red/green/blue/alpha, each with 256 bins that count up the sum total of the pixels of each of the 256 possible brightness levels for that channel. Then I create the output Bitmap and leave it blacked out.

Then I loop through the histogram data by channel (skipping the alpha because, whatever) and for each of the brightness levels, I draw a single-pixel column for its height onto a temporary BitmapData object, using 0xFFFFFFFF. Then once I’ve gone through all 256 bins, I use BitmapData.copyChannel() to copy only a single color channel over to the final Histogram object. I’ve seen examples that use all sorts of tricky color blending, but whatevs. Pretty sure my way’s easier.

So there you have it. Further steps are going to expand on this, or at least help you make decisions based on how the histogram is shaped. More to follow.

I’m not going to spend a lot of time explaining what fastICA is, or what Independent Component Analysis is in general, but if you need it in Actionscript and you’ve been looking for it, here it is. I only vaguely understand how it works (for now!), but math is math and code is code, and once I had my Matrix Math package set up, it was just a matter of effort and optimization.

It’s ported it over from the MDP package in Python. It’s not the full implementation, just as much as I needed to make the Pulse project work, so at some point I’m going to finish porting over the rest of the internal methods. It’s mad slow, yo! My next goal is to offload the heavier calculations to PixelBender, like I did with the Lomb-Scargle code the Pulse project used, but until then, you’ll need to only run it against reasonably-small data sets if you want it to run with anything approaching “speed”.

While I work on getting a code repository set up, use the contact form or leave a message in the comments if you want me to send it to you, I want to share! Click through, or on the image above, to launch a demo.

It’s ported it over from the MDP package in Python. It’s not the full implementation, just as much as I needed to make the Pulse project work, so at some point I’m going to finish porting over the rest of the internal methods. It’s mad slow, yo! My next goal is to offload the heavier calculations to PixelBender, like I did with the Lomb-Scargle code the Pulse project used, but until then, you’ll need to only run it against reasonably-small data sets if you want it to run with anything approaching “speed”.

While I work on getting a code repository set up, use the contact form or leave a message in the comments if you want me to send it to you, I want to share!  Click through, or on the image above, to launch a demo.

The concept we settled on, coming from our initial brainstorms, was to set up some sort of live telepresence game between mcgarrybowen’s New York and Chicago offices. We figured a snowball fight would be a fun diversion, but we had to decide on two things: How does a player throw a snowball, and how does a player get hit by a snowball?

We wanted a mobile device interface for players, but didn’t want anyone to have to download anything to play, so we chose to create a mobile site to serve as the “controller”, and gave it directional buttons to aim an on-screen target and a big “Throw” button to fire.

The challenge then became how to treat the experience of being “hit” with the snowball. If it’s a video-based experience, we could put big “splat” animations on the incoming side’s screen, but that didn’t seem like enough. We needed a more engaging experience, maybe something that the other side could try to dodge. We had the great idea to hook up a projector, in addition to the video screen, shining down onto the users. That way, the throw-er could move a projected target around the opposite city’s office and onto the throw-ee, and incoming snowballs could be projected down onto the floor and travel from the screen to the target.

The final setup included an rolling stand for the TV, but with a high shelf mounted above the TV with a mirror aiming the short-throw projector’s output back down onto the ground and the users. We also included a joystick controller for non-smartphone users, and a bass shaker attached to the back that would rattle the screen whenever it was hit with a snowball. Everything was hooked into a Mac Mini mounted to the back of the TV.

All told, we had over a 37,000 individual interactions with the mobile site including a total of 7,230 snowballs thrown, 5,314 coming from Chicago and 1,916 coming from NYC, enough to cover the office in a 12-foot mound of snow!

Some people get really cranky when they see me working on it, demanding to know what it’s good for and pointing out that it’s not super-great resolution and all the blaugh-blaugh-I-DO-declare. BALLS, I say. I’m not going to be making ART with it, I’m going to be making tools and parts. And as long as you can take a file and some sandpaper to it, the finish quality is kind of up to the operator, thank you very much.

I managed to get one solid print out of it before the whole thing died in my arms yesterday. Hopefully I can figure out what went wrong, I think it’s something with the power supply, and get it up and running permanently before I leave for good. And mine’s in the mail!

On any given day in NYC, something like half of all trending locations are going to be some sort of player in the marketing or media fields. I’m reminded that New York really only has five industries: Publishing, Advertising, Fashion, Finance, and TV. Guess which of those industries has a lot of free time on its hands to diddle around on their iPhones.