Mike T. Henderson

Expanding on my previous experiment, using the BitmapData.getPixel and PerlinNoise to scale a Sprite based on the color info of a defined pixel, I noticed that it seemed to be creating this halftone pattern with the different scaling. Where in the previous I applied to an PerlinNoise pattern, here I thought I'd apply to an image.

The formula I used in the previous example is as follows:

var pixelColor:int = myBitmapData.getPixel( mySprite.x, mySprite.y);
mySprite.scaleX = pixelColor * .0000001;
mySprite.scaleY = pixelColor * .0000001;

The only issue, is that the darker the pixel, the smaller the scale percentage, while the lighter the pixel, the larger the percentage. When using that percentage to scale a black dot, the lights became darks, and the darks became lights. Resulting in a negative. The easy fix then, was to take the pixel percentage from the formula above, and rather than use that, use what was left. Resulting in:

var pixelColor:int = myBitmapData.getPixel( mySprite.x, mySprite.y);
mySprite.scaleX = 1 - ( pixelColor * .0000001 );
mySprite.scaleY = 1 - ( pixelColor * .0000001 );

The result isn't perfect by any means, but I really like the possibilities this getPixel method provides and want to keep experimenting with it. I do realize that this effect can be done easier and quicker in Photoshop, but I'm more interested in playing with the data from the pixels to determine the properties of other sprites more than anything.

The complete code is as follows:

 
// set up Properties
var imgW:int = 295;
var imgH:int = 250;
var dotSize:int = 4;
var gridW:Number = Math.ceil( imgW / dotSize );
var gridH:Number = Math.ceil( imgH / dotSize );
var contain:Sprite = new Sprite();
var myBD:BitmapData = new BitmapData(imgW, imgH);
 
function init():void {
 
	myBD.draw( Photo ); // Photo being an MC instance on the stage
 
	addChild( contain );
	contain.x = 295;
 
	addNodes();
 
}
 
function addNodes() {
 
	var colCNT:int = 0;
	var rowCNT:int = 0;
 
	// build grid
	for (var i:int = 0; i < gridW * gridH; i++) {
 
		// build dots
		var myDot:Sprite = new Sprite();
		myDot.graphics.lineStyle( dotSize, 0, 1);
		myDot.graphics.moveTo(0, 0);
		myDot.graphics.lineTo(1, 1);
 
		// place in grid
		myDot.x = colCNT * dotSize;
		myDot.y = rowCNT * dotSize;
 
		// scale
		var pixelColor:int = myBD.getPixel( myDot.x, myDot.y);
		myDot.scaleX = 1 - ( pixelColor * .0000001 );
		myDot.scaleY = 1 - ( pixelColor * .0000001 );
 
		// add
		contain.addChild( myDot );
 
		// update
		if ( colCNT < gridW - 1 ) {
			colCNT ++;
		} else {
			rowCNT ++;
			colCNT = 0;
		}
	}
}
 
init();
 

0 Comments | Posted under BitmapData