{"id":738,"date":"2010-06-24T00:03:40","date_gmt":"2010-06-24T04:03:40","guid":{"rendered":"http:\/\/patorjk.com\/blog\/?p=738"},"modified":"2014-01-25T17:50:51","modified_gmt":"2014-01-25T21:50:51","slug":"muller-images-experiment","status":"publish","type":"post","link":"https:\/\/patorjk.com\/blog\/2010\/06\/24\/muller-images-experiment\/","title":{"rendered":"Muller Images Experiment"},"content":{"rendered":"<p><a href=\"http:\/\/www.colourlovers.com\/blog\/2007\/09\/02\/the-muller-formula-or-predictable-color-preferences\/\">The Muller Formula<\/a> 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&#8217;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 &#8220;Muller Color&#8221;). 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.<\/p>\n<p><figure style=\"width: 129px\" class=\"wp-caption alignleft\"><img loading=\"lazy\" decoding=\"async\" alt=\"\" src=\"http:\/\/patorjk.com\/images\/blog-2010\/hsl-color-wheel.png\" title=\"HSL Color Wheel\" width=\"129\" height=\"119\" \/><figcaption class=\"wp-caption-text\">HSL Color Wheel<br \/>Image By <a href=\"http:\/\/en.wikipedia.org\/wiki\/File:Hsl-hsv_models.svg\">Jacob Rus<\/a><\/figcaption><\/figure>The original article used a the traditional artist&#8217;s Red-Yellow-Blue color wheel. I wasn&#8217;t able to find a good conversion formula to go from the <a href=\"http:\/\/en.wikipedia.org\/wiki\/RGB_color_model\">Red-Green-Blue color model (RGB)<\/a> (which is popular in computing) to the <a href=\"http:\/\/en.wikipedia.org\/wiki\/RYB_color_model\">Red-Yellow-Blue color model (RYB)<\/a>, but I did find formulas to go from RGB to the <a href=\"http:\/\/en.wikipedia.org\/wiki\/HSL_and_HSV\">Hue-Saturation-Lightness color model (HSL)<\/a>. I figured this would work well since the HSL model had everything I needed to calculate a &#8220;Muller Color&#8221;. I could detect the lightness of a color and then adjust its hue accordingly. <\/p>\n<p>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 <a href=\"http:\/\/patorjk.com\/color-palette-generator\/\">Image to Color Palette Generator<\/a> 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.<figure style=\"width: 129px\" class=\"wp-caption alignright\"><img loading=\"lazy\" decoding=\"async\" alt=\"\" src=\"http:\/\/patorjk.com\/images\/blog-2010\/rgb-circles.png\" title=\"HSL Color Wheel\" width=\"129\" height=\"119\" \/><figcaption class=\"wp-caption-text\">Primary and Secondary Colors<br \/>Image By <a href=\"http:\/\/en.wikipedia.org\/wiki\/File:AdditiveColor.svg\">SharkD<\/a><\/figcaption><\/figure><\/p>\n<p>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 &#8220;Muller Images&#8221;. 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 <a href=\"http:\/\/patorjk.com\/experiments\/muller-images\/\">here<\/a>. 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&#8217;s light and red if it&#8217;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. <\/p>\n<p>Unfortunately, the results weren&#8217;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.<\/p>\n<figure style=\"width: 480px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" alt=\"\" src=\"http:\/\/patorjk.com\/images\/blog-2010\/madoff-pumpkin.png\" title=\"Madoff Pumpkin\" width=\"480\" height=\"233\" \/><figcaption class=\"wp-caption-text\">Normal Image and Muller Color-ed Image<\/figcaption><\/figure>\n<p>It was still a cool idea, and maybe it could still be used for something, though it&#8217;d probably have to be tweaked a little bit. There are other images available to Muller-ize on the <a href=\"http:\/\/patorjk.com\/experiments\/muller-images\/\">experiment page<\/a> if anyone else is interested. Thanks to David Dailey for the idea on this one.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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&#8217;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 &hellip; <a href=\"https:\/\/patorjk.com\/blog\/2010\/06\/24\/muller-images-experiment\/\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">Muller Images Experiment<\/span> <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[34],"tags":[],"class_list":["post-738","post","type-post","status-publish","format-standard","hentry","category-random-thoughts"],"_links":{"self":[{"href":"https:\/\/patorjk.com\/blog\/wp-json\/wp\/v2\/posts\/738","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/patorjk.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/patorjk.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/patorjk.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/patorjk.com\/blog\/wp-json\/wp\/v2\/comments?post=738"}],"version-history":[{"count":20,"href":"https:\/\/patorjk.com\/blog\/wp-json\/wp\/v2\/posts\/738\/revisions"}],"predecessor-version":[{"id":1663,"href":"https:\/\/patorjk.com\/blog\/wp-json\/wp\/v2\/posts\/738\/revisions\/1663"}],"wp:attachment":[{"href":"https:\/\/patorjk.com\/blog\/wp-json\/wp\/v2\/media?parent=738"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/patorjk.com\/blog\/wp-json\/wp\/v2\/categories?post=738"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/patorjk.com\/blog\/wp-json\/wp\/v2\/tags?post=738"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}