Tag Archive for 'imageprocessing'

Page 2 of 3

Curves

CurvesI think that I would sell this if I were an artist. Unfortunately I am not. What you see here is a fractal plasma with applied Curves filter. The UI in this example is of course not tweaked. But you can add and remove points from the curve. Also there are some other options like changing the interpolation etc.

Let’s do some serious art!

It is also nice that I have no lags in the stand-alone player even if I use live mode.

Library updates

Just after the last release I have a couple of updates ready to use. Here is a list of new stuff:

  • QuickNormalMap (thanks to Ralph Hauwert)
  • DisplacementMap
  • GeometricDisplacementMap
  • QuickBumpMap (thanks to Ralph Hauwert)
  • Ripple
  • Spherize
  • Twirl
  • InterpolatedPlasma (thanks to toxie^ainc. and Hopper)
  • SinePlasma (thaks to tocie^ainc. and Hopper)
  • Interpolation (bicubic, bilinear, nearest neighbour)
  • Set of mathematical described displacement maps (RippleMap, SphereMap, TwirlMap)

As you can see it is growing. I am also happy about the nice help I got. There is a lot more to implement since I got the ok to use some rendering filters that theese demo-scene people use to create textures at runtime.

First contribution to the ImageProcessing library

QuickNormalMap and QuickBumpMapI am glad that UnitZeroOne.com made a contribution to the imageprocessing library. Now there is a very fast bump mapping and normal map filter (QuickBumpMap and QuickNormalMap).
Theese filters work with a native filter like the QuickSepia and there would be a way to implement them on a pixel-level. So this is why they have the Quick prefix.

Right now I am working (besides of my work) on very nice filters to synthesize textures. As always: Stay tuned!

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]

HDR in AS3

HDRTwo days ago I read about HDR pictures and I was falling in love with them directly. So I would like to show here some stuff since I think the implementation is done but I do not read any HDR file formats (which should not be any problem at all). Currently I am able to mix 2 to 3 photographs together and get a rendered result out of it. The problem is, that I do not find any sample images on the web (that are not a specific HDR format) without getting into copyright troubles.

Since I am also not sure about the whole technique I want to explain here what it does. Maybe I am totally wrong. So think of the fact that theese are my first steps with HDR. First of all I apply a tone mapping filter to all of the images.

First of all the world luminance is calculated using \small lum = \exp(\frac{\sum_{x,y}{log(1+Y(x,y))}}{width \cdot height}) where Y is returning the luminance value (using RGB to XYZ matrix). After this step I walk through every pixel and change the luminance to a scaled luminance using a \small scale = \frac{18}{lum}. The resulting luminance is normalized like this \small newLum(x,y) = \frac{Y(x,y) \cdot scale}{1+Y(x,y) \cdot scale}. After this step I assign the new luminance by multiplying each channel value with it.

After this there is the last and tricky step where I blend all the images together. I think that this is still wrong since I take the darkest as a 100% base and blend the other pictures with 50% opacity onto it.

The results are looking good, if I take three pictures with very dark, middle and high tones but I am not sure that the described technique is correct. Once I get the reader for an RGBE format I will post it here. But I am also a little bit busy.

Check out the HDR group on flickr.com. You will find the source-code for all this stuff of course in the upcomming release of the ImageProcessing library.

Update: Added missing example. Look at the clouds on the right or details in the foreground for example. Remember that all of this is done automatically and in a very experimental state.

Upcomming Imageprocessing Library Release

I am sorry that I do not have much time theese days but I am planning to release a brandnew version of the imageprocessing library. This time I hope some of you already used it and have some ideas about improvements.

Here is the plan for the new features:

  • JPEG encoding (complete, using modified version of Tinic Uro’s encoder)
  • PNG encoding (complete, using modified version of Tinic Uro’s encoder)
  • Experiments on very fast mean values (using a Matrix approach orginally comming from Mario Klingemann)
  • Implementation of a fast interpolated/non-interpolated warp filter (using tesselation technique by André Michelle)
  • Interpolated levels correction
  • Simple drawing API (anti-aliased and normal lines complete, text and other primitives missing)
  • New core class for a layered image (supporting also blend-modes on layers)
  • Full alpha-channel support

As you can see some of the stuff is already complete. Other stuff is missing. The warp filter for instance has never been tested by me before but I have a lot of code here to implement that beast on a fast way. I could also think of two resolutions like I have done it with the sepia filter (QuickSepia and Sepia classes). Beacuse creating a simple warp filter using bilinear interpolation is not that hard. The only problem is, that it will be slow. The other technique uses the Flash drawing API to warp the image (and also for interpolation) but it is not 100% correct.

Another problem is that I lost the batch file for the ASDoc generation. But this is of course a minor issue. Stay tuned!

Closing in Flash

Working with images in Flash leads to some simple problems. First of all you have the general performance issues and then no possibilities of working with binary images and fast morphological filters. This makes it really hard to approach good results. For example: The background subtraction experiment works with a basic scene subtraction technique.

Some time ago I have done some “research” (German article) and created all programs in C++. The scene subtraction was very good and I had no holes in the extracted objects. Just because I was able use a three-dimensional color space and also grayscale and binary immages together.

What makes a binary image so important? Of course most color information will be lost. What you still have is the shape of an object. You can apply a lot of filters to a binary image and they are very fast since you only got {0;1} instead of {0;…;255} values per channel. A very powerful group of filters are the morphological filters. They are based on the shape of an object and gain information or modify that shape.

Now back to topic. The closing filter. It is a filter that allows you close holes in an image. If you do some background subtraction you will always have some holes inside your image (if you do not use a special light setup). So what do we need? A fast and working closing filter.
Continue reading ‘Closing in Flash’

Real-time background subtraction (Updated)

This is a quick test I made regarding background-substraction in Flash (which is also called Scene building etc.). I wanted to test this because of another experiment which I have in mind. The result is very nice, and it is acceptable fast.

A simplified description of the used technique. First of all I have the WebCam and a Video. A (grayscale) Snapshot of the scene will be taken which is called background. The background should not include the things you want to extract. From that moment on you create a grayscale picture from the webcam and substract the background from it. I draw the video onto the screen and for every pixel that has a difference greater than 8 I copy a pixel from the original webcam image.

Have a look
[as]var frame: BitmapData = webcam.getCurrentFrame();
videoBitmap.draw( videoDisplay );

//– create grayscale image of webcam frame
buffer.applyFilter( frame, frame.rect, new Point, bt709 );

//– substract the background
buffer.draw( background, null, null, ‘difference’ );

//– apply threshold
buffer.paletteMap( buffer, buffer.rect, new Point, null, null, alphaMap );

//– create mask using alpha channel
frame.copyChannel( buffer, buffer.rect, new Point, BitmapDataChannel.BLUE, BitmapDataChannel.ALPHA );

//– draw
smallScreen.draw( videoBitmap );
smallScreen.draw( frame );
screen.draw( smallScreen, scale );[/as]

I updated the way the resulting picture is drawn (thanks André!). Therefore the alpha-channel is abused as a mask applied with some thresholding. Instead of BitmapData.threshold I use BitmapData.paletteMap with a pre-cached table because it is a little bit faster. It is much better using the alpha-channel as a mask because of smooth edges. One last problem: Using only the Y-channel of a picture results in to many holes in the resulting image. I will try the same with three dimensions instead of one.

ImageProcessing Library (beta)

A first beta release of the imageprocessing library can be downloaded right now. I like to experiment with my webcam and images. This is a fast library with a couple of implemented algorithms. Have a try and tell me what you think about it.

ImageProcessing Library
ImageProcessing Library Documentation

Updates:

  • Added QuickSepia filter which is using a ColroMatrixFilter instead of YIQ transformations (de.popforge.imageprocessing.filters.color.QuickSepia)
  • Added Color.add() and Color.substract() for easier blend-mode calculations.
  • The zip-file contains now the laboratory sources and a batch to compile them.

ImageProcessing library

LevelsCorrectionGot an idea what imageprocessing means? You always wanted to create som eyeToy like game, but it is a struggle to fight against bad lighting? You know that AS3 is fast. So what about some real-time imageprocessing?

This is a personal point of interest and I had a lot of fun creating this library. It is currently in an early state but it is very difficult to create acceptable results. This library is not very scientific but the output is nearly the same. For some reasons I had to speed up some processes of real imageprocessing. I will continue the fun and add some filters. I do not know from which categorie, maybe morphologic or some more basic binary stuff like Erosion or Dilation (and therefore Closing).

Have a small preview here. I will post either the sources (after having another look) or a compiled SWC. But Flex Builder 2 is some sort of annoying. If I compile the SWC with the compc it works fine until I want to include the SWC into a project. The project also compiles but there is no auto-completion in Flex Builder.

ImageProcessing Library Documentation