Persuasion Interactive Media
22Mar/11Off

Controlling the Color & Transparency of Visual Assets

Using the provided controls a user is able to independently manipulate the three Color Channels (Red, Green, and Blue), as well as the Transparency (commonly referred to as "alpha," or "α" in the Greek Lower Case) of the artifact.
Because of the granular control over the Color Channels and Transparency we can also control the composite (all Channels together) image Brightness, even going so far as to neutralize any color or invert the image to the negative.

Get Adobe Flash player

Manipulating color this way provides us a glimpse into color science.

The Color Gradient used is one of Hue only-there is neither Saturation nor Luminance variance. When converted to monochrome there is what appears to be an inconsistent patterning with the distribution of Hue. In fact, I programmed the conversion to monochrome using the Haeberli Vectors, which are the relative intensities of total Luminance as accounted for by the Red (about 31% of total pixel luminance), Green (about 61%), and Blue (about 8%) Channels in the digital sciences. In fact, there are other standards besides Haeberli's (some are more recent and some perhaps more defensible), but I believe that Haeberli enjoys the broadest acceptance. It is the variances in Luminance contributions that accounts for the apparently misregistered monochrome patterning.

Switching the unadulterated color Gradient to the negative provides an interesting redistribution of the Primary Colors (Red, Green, and Blue) centered upon the former bands of the Complementary Colors (Cyan, Magenta, and Yellow)-a useful demonstration for individuals learning the mechanics of the Color Wheel and Subtractive Color.

Another interesting matter is the way in which Brightness is controlled. In this visualization I used an ActionScript 3 ColorMatrixFilter Object, which is a comparatively complicated tool to invoke. It is actually a Matrix of 4 rows of 5 values and uses both additive and multiplicative functionalities to scale the brightness of the image properly-no matter what balance of Red, Green, Blue and Alpha (Transparency) you have prescribed with the controls.

The entire matter really distills that these functionalities are controllable not only via the Sliders I have provided, but as explained in the previous post:

They can be controlled by a wide variety of parameters including:

  1. Mouse position;
  2. Mouse movement direction;
  3. Mouse movement speed;
  4. Mouse button clicks;
  5. Keyboard input;
  6. Time of day;
  7. Touch screen input;
  8. Voice commands and other audio artifacts;
  9. Latitude and/or longitude;
  10. Device orientation (many have accelerometers...);
  11. Device movement;
  12. Interactive devices such as buttons or selections.

The point is that interactive visualization is engaging and makes visual artifacts more communicative: interactivity devoted to support a specific cognitive impact is engaging and persuasive. Interactivity that is rapid to produce and economical-particularly within Commercial Real Estate, Litigation Exhibits, Public Relations, Construction, Engineering, and Education industries-is highly desirable.

L