Thought it’d be fun to emulate the polar coordinates filter from Photoshop and use it along the computeSpectrum method in AS3. Here’s a demo of how the filter works and some experiments.
How the polar coordinates filter works
This demo shows how each pixel is displaced. For every pixel, the filter calculates the radius of a circle which equals to the row of pixels on the original image. The circumference of the circle is proportional to the row of pixels. From that row of pixel, you can then get to the exact pixel by comparing the resulting angle. The pixel is copied straight from the original image, there is no color interpolation calculation otherwise the code wouldn’t run fast enough to be able to apply this filter on every frame. Look at the jpeg of the original Photoshop filter so you can see the difference that interpolation does. Rollover the flash filtered image to find the corresponding pixel on the original bitmap. Here’s some experiments with the filter. Click on the arrows to change the direction of the source image (click below).
Displacement map filter
What you see in the 1st image is a scrolling display of the sound spectrum data. The second image is the result of the polar coordinates filter used on the first image and a blur is added to smooth it out. That 2nd image is then used as a map for a displacement filter applied on the 3rd image. The red and blue channels of the map are used to displace the image X and Y.
Click below for a demo.
Bitmapdata threshold
Again in this demo, there’s the sound spectrum data displayed in the 1st image. The 2nd image is the blurred polar coordinates result. In the third image, a threshold is applied on the image and everything below the color 0×808080 is copied as the background color and everything higher as the foreground image. A blur is applied again on the 4th image to create a cloudy effect. Instead of having just 2 colors like this, you could also add one, two or even more color to the threshold and get an even funkier effect. Click Below for a demo.
Raw sound spectrum
This demo below simply displays the sound spectrum data in the 1st image and the Polar coordinates result in the 2nd.
Simple demo
Here’s another simple demo with squares flying around.
Download the source files here.
{ 5 comments… read them below or add one }
I wish to know if you could provide me any table with about 15 data points with angle vs. radius of your project, if that is possible. I myself have a project for my pre-calculus test and I am having a really hard time finding a website which actually gives me a table with values for polar coordinates. I liked your ideas and am interested in your work. If I use any information provided in this website, I will cite it properly as I am supposed to.
Please, tell me if you could help me. I would appreciate an answer as soon as possible for my project is due on Thursday morning!
Thank you in advance!
Dowload the source code at the end of the post and check the class file com.blitzagency.filters.PolarCoordinates.
This is the part of the code that you want to look at :
var xTrue:Number = xPos – xCenter;
var yTrue:Number = yPos – yCenter;
var hypothenuse:Number = Math.sqrt((xTrue*xTrue)+(yTrue*yTrue));
var radians:Number = Math.atan2(yTrue, xTrue);
var degrees:Number = radians*180/Math.PI + 90;
degrees = (degrees360)?degrees-360:degrees;
var invertedDegrees:Number = 360 – degrees;
var circonference:Number = 2*Math.PI*hypothenuse;
var cartesianX:Number = Math.round(invertedDegrees*imageWidth/360);
var cartesianY:Number = Math.round(hypothenuse*imageHeight/radius);
cartesianX = (cartesianX>=imageWidth)?imageWidth-1:cartesianX;
cartesianY = (cartesianY>=imageHeight)?imageHeight-1:cartesianY;
Ooh! Thank you for your quick reply. Truly, those are polar equations derived. However, I was thinking if there is an archieve with an actual data table, with points provided… (like angle vs. length of raidus). My teacher specifically said we are supposed to figure out the equation just by having the points. I also wanted to ask you if all of your work is based on one principle and if so, whether I obtain data info, should I assume it is referring back to any of the demos provided in the web-page? I apologize if I do not completely understand your project and I hope it is possible for you to narrow it down to a simpler version for me to assimilate. Thank you again and I hope to hear from you soon!
hi,
first thanks a lot and congratulations for this excellent piece of script
When giving some variables the ‘int’ type and removing the subsequent useless Math.round() operations I managed to decrease the process time by 30%.
here’s the re-written script :
public static function originalConvertBitmapData(image:BitmapData):BitmapData{
var imageWidth:int = image.width;
var imageHeight:int = image.height;
var radius:int = imageWidth >> 1;//dividing by a multiplpe of 2
var xCenter:int = imageWidth >> 1;
var yCenter:int = imageHeight >> 1;
var polarBitmap:BitmapData = new BitmapData(imageWidth,imageHeight,true,0×00000000);
var yPos:int = imageHeight
while(yPos–)
{
var xPos:int = imageWidth
while(xPos–)
{
var xTrue:int = xPos – xCenter;
var yTrue:int = yPos – yCenter;
var hypothenuse:Number = Math.sqrt((xTrue*xTrue)+(yTrue*yTrue));
//hypothenuse = (hypothenuse>radius)?radius-1:hypothenuse;
var radians:Number = Math.atan2(yTrue, xTrue);
var degrees:Number = radians*180/Math.PI + 90;
degrees = ( degrees360 ) ? degrees – 360 : degrees;
var invertedDegrees:Number = 360 – degrees;
//var circonference:Number = 2*Math.PI*hypothenuse; //useless here
var cartesianX:int = invertedDegrees*imageWidth/360;
var cartesianY:int = hypothenuse*imageHeight/radius;
if( cartesianX > imageWidth-1 ) cartesianX = imageWidth -1;
if( cartesianY > imageHeight-1 )cartesianY = imageHeight -1;
var color:uint = image.getPixel32(cartesianX,cartesianY);
polarBitmap.setPixel32(xPos,yPos,color);
}
}
return polarBitmap;
}
}
all the best and thanks again
I was wondering, could use this class to dinamically transform a Bitmap, into Polar Coordinates but animating the transition? so the user can see how it’s transformed from one system coordinate to another and viceversa.?
Great class by the way!
{ 2 trackbacks }