Hue Change

I made an image with the usual weird fetish stuff, and some unobtrusive background, but I couldn’t decide which color I should use for this background. So I wrote a little shockwave flash file, with the result being displayed above. If you click on the image above, the hue of the background changes randomly.

In fact, I wrote it in such a way that I could specify a certain hue value as a parameter that I could send to the clip, like this:

I also implemented the possibility to move through the different possible values for the hue, like this:

Instead of smoothly moving through the colors, I also implemented the possibility to jump across the hue wheel:

Instead of changing the hue of the background, it is also possible to change the hue of a small image in thje foreground:

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
        width="255"
        height="340"
        id="haxe"
        align="middle">
  <param name="movie" value="HueChange.swf" />
  <param name="allowScriptAccess" value="always" />
  <param name="quality" value="high" />
  <param name="scale" value="noscale" />
  <param name="salign" value="lt" />
  <param name="bgcolor" value="#ffffff" />
  <param name="flashvars" 
         value="click=yes&delay=2&image=yuko_fg.png&underlay=yuko_bg.png" />
  <embed src="HueChange.swf"
         flashvars="click=yes&delay=2&image=yuko_fg.png&underlay=yuko_bg.png"
         bgcolor="#ffffff"
         width="255"
         height="340"
         name="haxe"
         quality="high"
         align="middle"
         allowScriptAccess="always"
         type="application/x-shockwave-flash"
         pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>

If you want to use this on your own page, you also need the file HueChange.swf. Within the HTML Code, everything must be entered twice: once for the Internet Explorer, then again for real browsers.

image = <pathname>
URL of an image ressource. This is the only parameter that must be provided. If the image can’t be loaded, bad things will happen.

underlay = <pathname>
If present, loads an image to be displayed under the main image (the main image should contain transparent areas).

overlay = <pathname>
If present, loads an image to be displayed over the main image (this image should contain transparent areas).

hue = <int>
default: 0
Integer between 0 and 360, describes the initial hue value. A value of hue=0 means that nothing will be changed. For a value of hue=120, red becomes green, green becomes blue and blue becomes red.

click = yes | no | <link>
default: no
yes: Mouseclick changes hue to a random value
no: Mouseclick does nothing
<link>: Mouseclick opens <link> in the current window.

delay = <int>
default: 0
Delay in 1/30 second between animation steps. If 0 (the default), no animation takes place. A value of delay=1 means the animation takes place with a frame rate of 30 FPS. A value of delay=30 means the animation takes place with one frame per second.

step = <int>
default: 1
Change in hue for animation. If delay=0, this parameter has no effect. Sensible values would be in the range -180 to 180. The value step=0 will prevent the animation from being noticable. Values greater than +1 will lead to jumps in the color space. For example, for step=60, the hue will alternate between six values (0, 60, 120, 180, 240, 270). If step is relative prime to 360, all possible hue values will be reached, but not necessairily in order (try, for example, step=157 or step=179). For large values of step, delay should also have a rather large value (like delay=30), otherwise, the animation might show seizure inducing color flashes (delay=1&step=180 would be a bad idea).

Changing the hue of an image is implemented using a ColorMatrixFilter. Since I found this a bit tricky, you might be interested in checking the source code. I compiled the file using Haxe, a language with a free compiler to produce flash files. If you use Actionsript, you will have to change the code slightly.

	I could use red for the background, because, as everybody knows, red is sexy.
	Or I could use pink, because it’s the archetypical girly color.
	On the other hand, I could use a background color that maximizes the contrast with the foreground with a fresh, cool blue.
	Using green relocates the image in the open nature.