New ImageProcessing Library Version


There is a new release of the ImageProcessing Library out for you people. I do not have that much time to spend but I hope that this is a helpful library and will even grow a lot.

Here is a small changelog:

  • Publish class util to send images in an easy way to sockets or websites
  • Format exporter (PNG, JPEG)
  • New core class for multiple layers
  • ToneMapping filter
  • Noise filters (GaussianNoise, UniformNoise, PerlinNoise)
  • Drawing util

I guess that there are a lot of small changes here and there but nothing special. I also want to implement some more filters later maybe. Right now the next thing I really would like to have is an online playground where you can load pictures from flickr or take snapshots from your webcam, mix them together and save them. The only problem is that this needs some sort of GUI and this is where the problems begin and my timescale shrinks. So you will have to wait for that. I am also looking for contributors. If somebody wants to share his filters or effects just send me an e-mail (address is on je2050.de).

Here is also a code sample. I will come up with more stuff and update the zip-archive aswell. This little piece of code generates the image you see on top of the post.
[as]var backGround: Image = new Image( 700, 200, ImageFormat.RGB );
var text: Image = new Image( 700, 200, ImageFormat.RGB );
var textGlow: Image;

Drawing.drawText( text, 0xffee3399, 120, 20, ‘ImageProcessing Library’, ‘verdana’, 32, true );

textGlow = text.clone();

new PerlinNoise( 700, 200, 8, 0xABC, false, false, PerlinNoise.CHANNEL_RED | PerlinNoise.CHANNEL_GREEN | PerlinNoise.CHANNEL_BLUE ).apply( backGround );
new Blur( 8, 8, 3 ).apply( textGlow );

var layerManager: LayerManager = LayerManager.fromImage( backGround );

for ( var x: Number = -240; x < layerManager.width; x += layerManager.width / 100 )
Drawing.drawLine( layerManager.backgroundImage, 0x80008888, x, 0, x + 240, 200, true );

for ( var y: Number = -240; y < layerManager.height; y += layerManager.height / 50 )
Drawing.drawLine( layerManager.backgroundImage, 0x80888800, 0, y, 700, y + 240, true );

new GaussianNoise( .16, true ).apply( backGround );

layerManager.addLayer( new Layer( text, 1, BlendMode.ADD ) );
layerManager.addLayer( new Layer( textGlow, 1, BlendMode.ADD, -5, -5 ) );
layerManager.addLayer( new Layer( textGlow, 1, BlendMode.ADD, 5, 5 ) );

var pixelate: Pixelate = new Pixelate( 3 );
pixelate.apply( text );
pixelate.apply( textGlow );

layerManager.merge();
textGlow.dispose();
text.dispose();

layerManager.backgroundImage.updateHistogram();

var histoGram: Image = Image.fromBitmapData( layerManager.backgroundImage.histogram.getBitmapData( 700, 400 ), ImageFormat.RGB );

layerManager.addLayer( new Layer( histoGram, 1, BlendMode.ADD, 0, -200 ) );

layerManager.merge();

histoGram.dispose();

new ContrastCorrection( 1.4 ).apply( layerManager.backgroundImage );
new LevelsCorrection().apply( layerManager.backgroundImage );

addChild( new Bitmap( layerManager.bitmapData ) );[/as]

18 Comments

  1. Posted Feb 5, 2007 at 12:16 am | Permalink

    Hey Joa,

    Just discovered your classes. Nice stuff, sure they will come in handy. Just looking through and one feature request came to mind, something like photoshop’s radial/zoom blur would be a very useful addition to the collection.

    Congrats on some seriously hardcore stuff :)

  2. Posted Feb 5, 2007 at 1:38 am | Permalink

    I never thought about this filter. The implementation might be interesting. But it will be very slow :) Anyways I will give it a try!

  3. Posted Feb 5, 2007 at 5:27 pm | Permalink

    Ha, yesterday I implemented radial blur but I think it will be more interesting to use the GeometricMap with a blur so you can do all crazy stuff you want :o) (just have to implement that correct now)

  4. Posted Apr 23, 2007 at 2:12 pm | Permalink

    Hi Joa,
    This class seems cool however i was wondering if it is compatible with Flex?
    I tried to add it as a library and i get a conflict error bcs you use some of Flex’s internal namespaces for example Image.
    Is there a way around this or have you not published a Flex compatible version?

  5. Posted Apr 23, 2007 at 2:21 pm | Permalink

    It is comatible with Flex but a design bug indeed. It is possible (see the Battlebay using Flex) but you have to do somehing like image = new de.popforge.imageprocessing.core.Image();

  6. Posted Apr 23, 2007 at 5:34 pm | Permalink

    Hi Joa,
    Thanks for the heads up i finally managed to get some working examples.. I was wondering if you could point me in the direction of a good tutorial that would explain to me a method for creating these kinds of effects, as i would like to ideally create some of my own and who know’s they might be good enough to add to your library.
    Thanks for any advice, examples or tutorials.
    Omni

  7. Posted May 3, 2007 at 3:11 pm | Permalink

    Hi Joa,

    I was wondering if you where going to publish the .swc using Flash CS3 so we can use it for Flash. I am assuming it was built with Flex and I can’t seem to get it to work in CS3.

  8. Posted May 11, 2007 at 6:17 pm | Permalink

    Yes please (what Julian said) – or maybe some hints on installing the SWC directly to the Components. Everything I’ve tried hasn’t worked and I’m dying to give it a go in Flash CS3.

  9. Posted May 28, 2007 at 10:30 am | Permalink

    hi Joa,
    cool stuff you have here, im eager to start playing ’round with it and get a real grasp of its power.
    good work!!

  10. Posted Jun 7, 2007 at 6:22 pm | Permalink

    Dear Joa,

    First of all, very great work you have done and contributed. I am experimenting with face recognition and background subtraction for my college project and I found your site. However I am not able to import your ImageProcessing.swc either in the FLEX SDK or FLEX Builder. I am using Flex 2.0.143459 on WinXP Pro SP2. The error message is:

    D:\Adobe\Flex2\Flex SDK 2\bin\ImageProcessing>..\mxmlc.exe -strict -optimize -l
    .\swc\ -o .\lab.swf -use-network=false .\lab\Main.as
    Loading configuration file D:\Adobe\Flex2\Flex SDK 2\frameworks\flex-config.xml
    Error: unable to load SWC ImageProcessing.swc: multiple points.

    I search around your blog and found that some other users have encounter similar problems. I hope to get some tips from you what went wrong.

    Many Many Thanks Indeed, Danke!!

  11. Laurent
    Posted Oct 21, 2007 at 6:11 pm | Permalink

    Hi Joa,

    Thanks for publishing such a good image library!

    I wish I can test it right now !
    But the flex 2 sdk throw the same error as Jvy, “multiple point”.

    How can we fix this ?

    Thank you
    L

  12. Vidya
    Posted Jul 8, 2008 at 12:26 am | Permalink

    Hi,

    I’m trying to use your library in a Flex project.
    How do I resolve ambiguous references between mx:Image and your Image class?

    Thanks,

    -vidya

  13. szataniol
    Posted Jul 10, 2008 at 2:49 pm | Permalink

    Hi joa,

    Great work. I just have a little question – why does Image, Histogram, Layer etc does not extend DisplayObject class?

    Cheers

  14. Posted Jul 10, 2008 at 3:05 pm | Permalink

    Because everything is working on a BitmapData basis. There is no need to display anything basically. This would be an unnecessary overhead.

  15. szataniol
    Posted Jul 10, 2008 at 3:37 pm | Permalink

    Undoubtly it is more flexible now, but what is the use of image if you don’t want to display it? :) Ain’t gonna argue about this, I just thought it would be more intuitive like this:

    [Embed(source = 'image.jpg')]
    var imgAsset:Class;
    var image:Image = new Image(imgAsset as IBitmapDataDrawable, ImageFormat.RGB);
    addChild(image);

    Nevermind, it is your project ;) Can you please tell what am I doing wrong here:

    public class Test extends Sprite {

    [Embed(source = 'image.jpg')]
    private var imgAsset:Class;

    private var image:Image
    public var bitmap:Bitmap

    public function Test() {

    var imageSource:Bitmap = new imgAsset();
    var image:Image = new Image(imageSource.width, imageSource.height, ImageFormat.RGB);
    image.loadBitmapData(imageSource.bitmapData);

    trace(image.format); //trace: 4

    var g:GrayscaleRMY = new GrayscaleRMY();
    g.apply(image);

    trace(image.format); //trace: 4

    addChild(new Bitmap(image.bitmapData));
    }

    }

    The result is black rectangle..

  16. Posted Jul 10, 2008 at 5:06 pm | Permalink

    There are lots of uses for images which are not displayed. Your problem is that you apply a grayscale filter to an image which is RGB and this is probably implemented wrong.

    I did not work on the library for a while, but grayscale filters are conversion only, so if your image is a GRAYSCALE format and you load a bitmap data into it the grayscale filter will be used for conversion.

    I think it was like that.

  17. szataniol
    Posted Jul 11, 2008 at 10:06 am | Permalink

    I don’t get it – why would I apply grayscale filter to an image which is already in grayscale format? :) I thought it would work as conversion from ImageFormat.RGB to ImageFormat.GRAYSCALE.

  18. rdeman
    Posted Jan 15, 2009 at 4:19 am | Permalink

    I’m trying the .SWC in Flashdevelop with Flash CS4
    error: ReferenceError: Error #1065: Variable de.popforge.imageprocessing.core::Image is not defined.

2 Trackbacks

  1. [...] produced a image rendering library for AS3 http://blog.je2050.de/?p=97 it is available through a [...]

  2. [...] Read more [...]

Post a Comment

Your email is never shared. Required fields are marked *

*
*