The Muller Formula is a neat little color formula that aims to predict which sets of colors people will find pleasing. No actual formula is given for it, but it’s concept is described. Given a set of colors with the same hue but a different lightness, the colors with the lighter hues should be shifted to a more naturally bright color and the colors with a darker hues should be shifted to a more naturally dark color. I thought this was a neat idea and figured I could possibly simplify it to work with a single color (what I decided to call a “Muller Color”). If a color had a high lightness, its hue would be shifted to a naturally light color. If it had a low lightness, its hue would be shifted towards a naturally darker color.

The original article used a the traditional artist’s Red-Yellow-Blue color wheel. I wasn’t able to find a good conversion formula to go from the Red-Green-Blue color model (RGB) (which is popular in computing) to the Red-Yellow-Blue color model (RYB), but I did find formulas to go from RGB to the Hue-Saturation-Lightness color model (HSL). I figured this would work well since the HSL model had everything I needed to calculate a “Muller Color”. I could detect the lightness of a color and then adjust its hue accordingly.

Looking at the HSL color wheel, I decided to use the primary colors (Red, Blue and Green) as the more naturally dark colors, and the secondary colors (Yellow, Cyan, Magenta) as the more naturally light colors. This decision was just based on my own judgement. Using the HSL color model and the concept described by the Muller Formula, I was able to generate interesting colors from RGB inputs. And to make a long story short, I ended up using this idea in my Image to Color Palette Generator app. A color palette would be generated of an image, but in addition, the user would also see a palette of the corresponding Muller Colors.

I figured I was done with this idea until I received a recent email from someone suggesting I take the images people input into the Color Palette Generator program and create “Muller Images”. Basically, call the Muller Color formula on every pixel in the image and generate a new image. I thought this was a really cool idea so I whipped up a quick prototype which you can see here. The shift percent indicates how much a color should shift. For example, if the color is between red and yellow and the shift is 100%, it will become yellow if it’s light and red if it’s dark (a dark yellow would even end up becoming red and a light red would end up becoming yellow). If the shift is just 50%, it will just shift 50% of the way closer.

Unfortunately, the results weren’t as stellar as I hoped. Calling the Muller Color formula on every pixel caused them to gravitate towards similar colors, so the resulting image tended to look like poorly compressed gifs. An example of a 10% shift can be seen in the Bernie Madoff pumpkin pic below.

It was still a cool idea, and maybe it could still be used for something, though it’d probably have to be tweaked a little bit. There are other images available to Muller-ize on the experiment page if anyone else is interested. Thanks to David Dailey for the idea on this one.

Some big updates were made to my Typing Speed Test. I’ve spent the last two weeks brainstorming and implementing ideas I thought would make it more useful. Once I found I could easily capture the speed at which the keys were typed I realized that this also meant I could deduce how fast each finger was moving.

However, to be able to accommodate Dvorak and Colemak users, I had to make the user’s keyboard layout one of the configuration items. I also realized that not everyone types according to the standard fingering positions, including myself. I noticed this back when I was learning the Dvorak layout. My right pinky kept getting really sore. When I switched back to the QWERTY layout, I noticed that the only keys I used my Right Pinky for were the “Enter” key and the “Right Shift” key. To accommodate the people who deviate from the norm, I also made it so users could manually set which fingers they used for each key.

Allowing users to change the normal Finger-to-Key mapping lead to some hard user interface decisions. What I ended up creating was a keyboard map where the user changed a key’s mapping by clicking it one or more times. When it’s clicked, its mapping goes to the next finger in the legend. I initially had a design that used radio buttons, but I didn’t like all of the back and forth movement it caused with the mouse. I’m still not sure I have the best design, but for now I think what I have works fine. Below you can see an picture of the user interface. The keys are set with the finger positions I typically use.

Once you finish the test you’ll now be presented with stats on how well you typed and stats on how fast your individual fingers were. To make the test more blog friendly, I also decided to present the user with the HTML code for the output tables. Below you can see two of my tables from a run I did.

Typing Stats Words Per Minute (WPM): 76 Characters Per Minute (CPM): 378 Words Correct: 32 Words Incorrect: 0 Fastest Finger: Left Pinky Slowest Finger: Left Ring Keyboard Layout: QWERTY Test Duration: 30 Seconds

Stats From PAT or JK’s Typing Speed Test

Average Finger Response Time Left Pinky: 119 milliseconds Left Ring: 228 milliseconds Left Middle: 158 milliseconds Left Index: 206 milliseconds Right Index: 135 milliseconds Right Middle: 128 milliseconds Right Ring: 188 milliseconds Right Pinky: N/A Thumb(s): 100 milliseconds

Stats From PAT or JK’s Typing Speed Test

I should note that the finger speeds are based on all of the key presses you make and not just on the ones that lead to correct words. Also, FireFox seemed to be able to detect Backspace key presses while IE did not.

I still have a bunch more ideas that I want to add in, but I haven’t gotten to them yet (like the hot spot visualization I mentioned in my last post).

If you find any errors or bugs let me know. You can post them in the comment section of this post.

About a month ago I had an interesting idea for my Text Ascii Art Generator (TAAG) program. Though due to being busy with work and buying a house, I haven’t had time to try it out. However, the idea is applicable to almost any web service, so I thought I’d share it with you all in case someone out there was looking for a nifty way to make some extra money off of a web app or blog without posting a bunch of ads up. I’m aware that too much commercialism can kill a website, however, I think this idea is kind of clever.

The idea originally struck me when I was brainstorming improvement ideas for TAAG. I thought that it might be cool if the user could put their output on a t-shirt. It’d make for a really neat way for someone to show their techiness/geekiness. After deciding I liked the idea, I then wondered if the t-shirt companies had already thought about 3rd party applications creating dynamic designs for them. After some quick googling, I discovered they had.

Both Zazzle and SpreadShirt allow you to dynamically submit designs for t-shirts which you can then sell. CNN even uses SpreadShirt to sell t-shirts of recent headlines. And you’re not limited to just t-shirts, you can put your designs on all sorts of crazy products – mugs, purses, hats, buttons, mouse pads, shoes, postage stamps, posters – the list goes on.

I’m not advocating turning your web apps or blogs into online stores, but if carefully used, this could compliment their output. An online photomosaic program that would let you buy a poster of your output might be kind of cool. And web comics that would let you buy t-shirts of your favorite comics would probably do pretty well, I had a whole bunch of Far Side t-shirts when I was in middle school.

Though as I said at the start of this post, I haven’t done any of this myself yet. I talked briefly to the FIGlet creators and they were cool with the idea, however, since I didn’t create the fonts themselves I’d feel wrong selling products with other people’s artwork on them without their permission / giving them a cut, and since there are over 300 fonts, this creates a rather complicated situation. So I may not even implement this idea (I’m still thinking about it though), but I figured I’d share the general concept, since it appears it could apply nicely in certain situations.