Last Instinct

I got a bit inspired by my previous Sparkling sunset made with Photoshop and wanted to make a proof of concept for Adobe Flash. So I animated the sunset. This is what you can do with Flash without using much code. I have just used a few lines to randomize starting points. All other graphic effects are built into Flash and needs no coding.

Wouldn’t it be cool if sunsets like these existed?

I found some amazing colorful wallpapers in a theme pack for Windows 7 called Surreal Territory by Chuck Anderson of NoPattern. He has really done a lot of great colorful designs! I got a bit inspired to make something similar. So I took one of my photos from Skanör last weekend and made a truly colorful sparkling sunset! Feel free to download it as a wallpaper or something. =)

Color is maybe the strongest trend of this year. Strong, vivid colors is the thing to look for and be inspired by. Just try to look beyond the basic colors and look for those who are not obvious. Well, the obvious will work great too, but my point is that there are a lot of colors and color combinations that we don’t think about right away. And yeah, you have to combine them with strong contrast in any way you can think of. If you need a tool for it, Adobe Kuler is the way to go.

Here are a couple of sources for inspiration:

The Dance by Tony Ariawan

Paradise Typo by Xaliber

Virtual Sky Studio

Size Matters Poster by The Steve Angello Team

Brofäste by Johanna Holmblad

You can also try my Channel Colorizer to put some color into your own images.

A great source for inspiration and making your own color themes is Adobe Kuler. It’s a free service and features all the common color picking techniques. They also have an API available for non-commercial use. It’s perfect for use with flash and its really simple to use thanks to the ColorMunch AS3 class by Ben Kanizay. I used it for color picking in my ChannelColorizer.

Here is a basic example for making a search for “banana”-themes from Kuler in Actionscript 3. To use it you need the ColorMunch class an your own Kuler API key. There are some more examples in the ColorMunch wiki, but you’ll find the most useful information in the documentation provided in the ColorMunch zip-package.

• Register for a Kuler API key
• Download the ColorMunch class and extract it to your fla-folder.

Example of using Adobe Kuler in Flash AS3 via the ColorMunch class:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

import beekay.colormunch.*;
 
// creates a new ColorMunch instance with your Kuler API key
var colormunch:ColorMunch = new ColorMunch("INSERT_YOUR_KULER_API_KEY_HERE");
 
// At a minimum listen for the 'resultReady' event
// This will fire when the result has been recieved and processed
colormunch.addEventListener(ColorMunchEvent.RESULT_READY, onResultReady);
colormunch.addEventListener(ColorMunchEvent.ERROR, onResultError);
 
function onResultReady(event:ColorMunchEvent) {
	trace("Kuler recieved");
	var theme:Theme = colormunch.getRandomTheme();
	var themeSprite:Sprite = theme.getThemeSprite();
	themeSprite.width = stage.stageWidth;
	themeSprite.height = stage.stageHeight;
 
	// Put the theme sprite on the stage
	addChild(themeSprite);
 
	// Get information about the selected theme
	trace("Loading theme: " + theme.getThemeTitle());
 
	// access swatch information through the theme object
	var swatch:Swatch;
	var col:uint;
	var cR:uint;
	var cG:uint;
	var cB:uint;
 
	for (var i:int = 0; i < theme.getSwatchCount(); i++) {
		// get the color
		swatch= theme.getSwatchByIndex(i);
		col	= swatch.getHex();
 
		// Split the color into RGB
		cR 	= (col >> 16) & 0xFF;
		cG 	= (col >> 8) & 0xFF;
		cB 	= col & 0xFF;
		trace("RGB:", cR, cG, cB);
	}	
}
function onResultError(event:ColorMunchEvent) {
	trace("Kuler error: " + event.data);
}
 
// Everything prepared, now search for 10 "banana" themes starting at 0
colormunch.searchThemes(ColorMunch.FILTER_NONE, "banana", 0, 10);

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.