Last Instinct

The fast asynchronous JPEG encoder made by Mateusz Małczak has been updated. I made a tutorial on how to use the fast JPEG-encoder in Adobe Flash earlier. The new release has resolved memory leaks and the asynchronous encoding shall also be faster. I have not had time to try it out, but you can read all about it and download it at segfaultlabs.

Thanks for the update Mateusz!

If you want to encode JPEG images in AS3 there are a number of encoders to use and obviously there is one that is better than all the rest. Mateusz Małczak has made an excellent JPEG encoder based on the libjpeg C-library compiled into Actionscript using Adobe Alchemy. It not only produces small JPEGs with high quality really fast, but it’s also asyncronous meaning that it doesn’t lock up your application while encoding, like many of the other encoders do. This way you can also monitor the progress of the encoding process while encoding. The disadvantage is that you need an extra click from the user to save the file when the process is complete. This is due to limitations in the security model in the Flash Player, which only allow file saving exactly when you make a click, which doesn’t work with asynchronous scripts. However, this isn’t a big problem if you make a logic design.

Step 1

Start by making a new Flash File (Actionscript 3.0) and save it in a folder of your choice.

Step 2

Download the jpegencoder.swc from segfaultlabs. Just click on the jpegencoder.swc in the folder /libs/.

UPDATE: The library has been updated and is now faster and not leaking memory. Also, you can download it directly on segfaultlabs without going into the source.

Save the file to the folder where you have your .fla file.

Step 3

Open the publish settings in flash and select the flash tab.

To get the SWC library working when you publish your swf you need to do a little magic trick, otherwise you will get the error ReferenceError: Error #1065: Variable MainTimeline is not defined when publishing or testing the SWF. To deal with this error we need to include the required things to use SWC libraries in the SWF.

Check the Export SWC checkbox in the publish settings.

Note: this setting will also produce another SWC file with the same name as your SWF when publishing. This file is not needed when distributing the SWF to the web or similar and can be deleted.

Step 4

Click on Actionscript settings.

Go to the Library path section. Click on Browse to SWC file and locate the jpegencoder.swc and include it.

Click OK to save your library settings.

Voilà! Now you are ready to use the Alchemy JPEG Encoder in your code!

Initializing the library

To initialize the Alchemy JPEG library use the following lines in your actionscript:

import cmodule.jpegencoder.CLibInit;   
 
/// init alchemy object
var jpeginit:CLibInit = new CLibInit(); // get library
var jpeglib:Object = jpeginit.init(); // initialize library exported class to an object

Starting the encoder

To use the encoder simply call the jpeglib.encodeAsync function and use it with a ByteArray. There is also a non-asyncronous function you can use which is a little bit faster. Even if its faster I recommend using the asynchronous function, since it doesn’t lock up your application while encoding.

// Refer to your own BitmapData object
var imgBitmap:BitmapData = someBitmapDataYouHaveAlreadyCreated;
 
// Prepare Alchemy objects
var imgData:ByteArray = imgBitmap.getPixels(imgBitmap.rect);;
var imgEncoded:ByteArray = new ByteArray();
imgData.position = 0;
 
// Function called when completed
var encodeComplete:Function = function() {
    trace("Encoding complete");
};
 
// Start JPEG encoder
trace("Start encoding");
var jpegQuality:Number = 80;
jpeglib.encodeAsync(encodeComplete, imgData, imgEncoded, imgBitmap.width, imgBitmap.height, jpegQuality);

Monitor progress

To see the progress of the encoding you need to set up a function that monitors the position of the ByteArray reader in the encoder. This is done by simply using a setInterval function during the encoding. Don’t forget to clear the interval when the encoding is complete.

// Encoding progress monitor function
var encodeProgress:Function = function() {
	// Listen to the position of the data reader
	trace("Encoding progress: " + Math.round(imgData.position/imgData.length*100) + "%");
};
// Start monitoring the progress of the encoding
var progressMonitor:Number = setInterval(encodeProgress, 20);
 
// Encoding progress complete function
var encodeComplete:Function = function() {
	trace("Encoding complete");
 
	// Stop monitoring the progress
	clearInterval(progressMonitor);
};

Full example

Here is a full example of encoding some graphics into a JPEG while monitoring the progress and then saving it onto the user’s hard drive.

Try the live demo of the Channel Colorizer Pixel Bender filter I made a couple of weeks ago. You can load an image or use your webcam and then change the RGB colors to some cool theme using coloring by Adobe Kuler. And naturally, you can save your images back to your disk to use them for anything you like.

Adobe Kuler gives the coloring an extra dimension. You can search for whatever comes to your mind: bananas, fire, happiness, an author or a specific color. Just keep in mind that you have to be a little bit patient with the search times, since the kuler-servers seems to be a bit overloaded.

The demo features a couple of really cool techniques:

• The Pixel Bender filter running live with webcam support.
• Coloring themes using Adobe Kuler via the ColorMunch AS3 class by Ben Kanizay
• Asynchronous saving of JPEG-files in Flash based on libjpeg using the Alchemy JPEG-encoder AS3 class by Mateusz Małczak

Go ahead and make some cool images and feel free to post some comments about it!

ChannelColorizer by Klas Lundberg is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 2.5 Sweden.
Feel free to contact me if you want it for commercial use.

The first version of my Color channel colorizer Pixel Bender filter for Flash and Photoshop had some problems with the balancing to preserve detail in the pixture. I decided to take care of this problem and changed the balancing to regular normalization, which normalizes all channels together. I tried this when I was making the previous version, but couldn’t get it to work properly. The solution was to not include the alpha channel in the normalization. Therefore I made an extra separate normalization only for the alpha channel.

I also added so that the normalization works when color values are too low, not only when they are too high, as in the previous version.

After a bit of testing I realized that I mostly wanted to have resuts that did have some normalization, but not full, since this could make the colors a bit dull. To solve this I added the option to set in percent how much normalization to use in the filter, and the result was great. Setting the normalization to 50% preserves both a lot of details and some of the sharp colors.

ChannelColorizer by Klas Lundberg is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 2.5 Sweden.
Feel free to contact me if you want it for commercial use.

I had an idea for a (probably) very cool graphic effect for Flash using colorized dots. My intention was to make it so it could be used for images, animations, videos or whatever. To do this effect I realized that I needed a way to change colors of the graphics in an easy and precise way. Since I’ve worked a lot with the Pixel Bender Toolkit lately, it came natural to make a pixel bender filter for this task.

The filter is made to change each original RGB channel of an image into a different color, defined by the user. The filter also has support for the transparency in the alpha channel (RGBA format). However, it is a rather abstract thing to understand the effects of changing the transparency in to color or vice versa, so I will leave it for you to experiment with if you really need it.

The above image is filtered using the color transformation in the diagram. You can see how the colors differ from the original image to the right.

The filter can be used with two settings, balanced or unbalanced. The default setting is unbalanced which sets the channels to the specific colors exactly. This causes the the colors to go outside the boundaries of the RGB color space when the colors get to intense. The effect is that the colors get cut off at a specific point, when they can’t get anymore intense. The balanced setting corrects this and normalizes the color so that all details gets preserved and nothing is cutoff. This sounds good right? Well, the negative effect is that the colors no longer is the exact colors you specified and sometimes the colors get very dull or desaturated. The filter is now updated and the colors are now correct all the time.

Here is an example of the two sides of the balancing with an rather extreme color setting. The picture on the left shows the original image. The picture in the middle has an unbalanced color setting. Here you can see that the image matches the colors but some intense colors in the flower gets too intense and loses detail. When turning on the balancing in the right picture, the detail comes back, but the colors no longer match the color setting. Read about the updated normalization.

The filter can be used in a lot of ways for a lot of purposes and I bet you can find more uses of it:

• Changing each channel to a different color
• Mapping the colors to a specific color theme or scheme
• Changing the image to black and white (or decolorize/desaturate)
• Changing the image to black and white with a specific color tone or tint (sepia for example)
• Creating a color weighted black and white image
• Colorizing an image to a specific RGB color
• Extracting a specific color channel

The filter is primarily made for use with Flash, but works fine with Photoshop as well. To use it in Photoshop you need to install the Pixel Bender plugin for Photoshop CS4 and copy the Kernel file to the Pixel Bender folder of Photoshop. If you want to use it in Flash or Flex, Lee Brimelow has made some good tutorials on how to get started with Pixel Bender and Flash.

ChannelColorizer by Klas Lundberg is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 2.5 Sweden.
Feel free to contact me if you want it for commercial use.

The golden section is perceived and used by most humans, whether they know it or not. By thinking about it and use it in you photos or other graphics, you can get a great composition easily.

The golden ratio works like this mathematically:

If you have a small section and a large section, the relation between the two is the same as the relation between the large section and total section (the sum of the two sections together). After doing some math we find that if the smaller section is 1, the bigger section is ~1.62. This means that the golden section is positioned at ~62% of the two together.

You should not get obsessed with this number when it comes to design and you should not use it with too much exactness. It’s really just a good hint about what humans generally like in composition. Since we naturally like it — it’s easy to use. You don’t have to measure or use a template for it, you just have to know about it. Since we like it, we easily guess where the position of the golden section is.

To use it in a composition, just take out the main element in the image and position it in the golden section. The hard part could be to identify what element in the photo that is the main element or the most significant line. You have to identify what the eye looks at first or what you want it to look at. Try to identify lines in the image or objects that differ from the rest. Here are a few examples:

• If you have a whole person in an big environment, you naturally look at the person.
• If you just have a person, the main element is the eyes of the person.
• If you have a landscape, the horizon is often the most significant line.

The example to the left is unmodified and the photo to the right was cropped.

I found a cool image effect. It’s looks like it is inspired by the Game of Life, which has been around for ages. The pixels are initially placed at a random position, then they try to find their way to their own correct position. Unfortunally, some pixels never seem to find their way home because they are being blocked by other pixels.

http://www.drububu.com/