December 22, 2005

Simple color effects

RGB is the most widespread method for representing colors. HTML, CSS, Java's java.awt.Color constructors, and countless more, all expect color to be described in terms of their RGB components.

But RGB is not the best choice for doing common operations such as desaturation and certain types of gradients (e.g., shades of a color and fade to black or white). There's a much more natural way of manipulating colors for that purpose without going crazy with interpolation in the RGB color space. The trick is to work with the HSV representation, instead. In the HSV space, a color is defined by it's hue (the "rainbow" of colors), it's saturation and it's brightness or value.

For any given color, change the brightness to get a darker or lighter shade. If you want to desaturate it (without changing it's brightness), simply reduce it's saturation value.

Here's a simple example, and the relevant Javascript code:


function RGB(r, g, b)
{
   this.r = r
   this.g = g
   this.b = b
}

RGB.prototype = {
   toHSV: function()
   {
     var max = Math.max(this.r, this.g, this.b)
     var min = Math.min(this.r, this.g, this.b)

     var s = (max - min) / max

     switch (max) {
       case this.r: return new HSV(60 * (this.g - this.b) / (max - min), s, max)
       case this.g: return new HSV(60 * (this.b - this.r) / (max - min) + 120, s, max)
       case this.b: return new HSV(60 * (this.r - this.g) / (max - min) + 240, s, max)
     }
   },

   toHex: function()
   {
     var r = Math.floor(this.r * 255).toString(16)
     var g = Math.floor(this.g * 255).toString(16)
     var b = Math.floor(this.b * 255).toString(16)

     return "#" + (r.length == 1? "0" : "") + r
       + (g.length == 1? "0" : "") + g
       + (b.length == 1? "0" : "") + b
   }
}


function HSV(h, s, v)
{
   this.h = h
   this.s = s
   this.v = v
}

HSV.prototype = {
   toRGB: function()
   {
     var sextant = Math.floor(this.h / 60) % 6

     var f = this.h / 60 - sextant
     var p = this.v * (1 - this.s)
     q = this.v * (1 - f * this.s)
     t = this.v * (1 - (1 - f) * this.s)

     switch (sextant) {
       case 0: return new RGB(this.v, t, p)
       case 1: return new RGB(q, this.v, p)
       case 2: return new RGB(p, this.v, t)
       case 3: return new RGB(p, q, this.v)
       case 4: return new RGB(t, p, this.v)
       case 5: return new RGB(this.v, p, q)
     }
   },

   toHex: function()
   {
     return this.toRGB().toHex()
   }
}


function desaturate(box, color)
{
   box.style.backgroundColor = color.toHex()

   color.s -= .01
   if (color.s >= 0) {
     window.setTimeout(function() { desaturate(box, color), 50 })
   }
}

function fadeToBlack(box, color)
{
   box.style.backgroundColor = color.toHex()

   color.v -= .01
   if (color.v >= 0) {
     window.setTimeout(function() { fadeToBlack(box, color), 50 })
   }
}

function fadeToWhite(box, color)
{
   box.style.backgroundColor = color.toHex()

   var v = 1 - color.v
   var distance = Math.sqrt(color.s * color.s + v * v)

   color.s -= 0.01 * color.s / distance
   color.v += 0.01 * v / distance

   if (color.v <= 1 && color.s >= 0) {
     window.setTimeout(function() { fadeToWhite(box, color), 50 })
   }
}

7 Comments:

Blogger nasha said...

Why was there no follow on bankruptcy then? The bailout of AIG FP went to (wow power leveling) hedge funds that bound credit swaps on Lehman failing or others betting on rating (wow power leveling) declines. AIG has drained over 100 billion from the government. Which had to go to (wow power leveling) those who bet on failures and downgrades. Many of whom (power leveling)were hedge funds. I-banks that had offsetting swaps needed the money from the AIG bailout or they would have been caught. Its an (wow powerleveling) insiders game and it takes just a little bit too much time for most people to think (wow gold) through where the AIG 100 billion bailout money went to, hedge funds and players, many of whom hire from the top ranks of DOJ, Fed, Treasury, etc. ZHANG XIAO CHEN

April 19, 2009 9:57 PM  
Blogger Kayla said...

Present-day society, the rapid development of science and technology makes cell phones wholesale is no longer a simple phone communications equipment only. Wholesale cell phones have many features, entertainment, scalability, and so have a good expression of the discount cell phones will be to maximize the effectiveness of multimedia technology.

September 24, 2009 9:23 PM  
Blogger Kayla said...

Cell phones from simple communication became a full-featured entertainment terminal . Can be said that cell phone china new milestone in the industry. This fully demonstrates that, cheap cell phones entertainment has become the most sought after consumer applications and has become the focus of the mobil phones market.

September 24, 2009 9:24 PM  
Blogger Kayla said...

www.crazypurchase.com Web site for the majority of the china wholesalers, and buy products wholesale to provide information and buy wholesale from china information exchange platform dedicated to becoming China Wholesale.

September 24, 2009 9:24 PM  
Blogger Adi said...

Thank you for sharing.
Oes Tsetnoc | Mengembalikan Jati Diri Bangsa | Kenali dan Kunjungi Objek Wisata di Pandeglang | Oes tsetnoc | Online Marketing | Electronics Gadgets | etips solution | Travel Guide

October 25, 2009 8:11 AM  
Blogger Apa Saja Dah said...

Find and download what you need at Rapidshare Search Engine.
Top Site List Free Proxy Site Internet Marketing Tools Internet Marketing Auto Insurance Quotes Home Mortgage Loan Newest Gadgets Review Free Download mp3

October 31, 2009 9:24 PM  
Blogger nike said...

Merry Christmas, my dear friends:
Nike shoes
nike shox torch
Cheap nike shoes
Discount nike shoes
Nike shox r4
nike shox shoes
puma cat
cheap sport shoes
cheap nike shox
cheap nike max
nike tn dollar
nike running shoes
nike air max tn
puma shoes
discount puma shoes
puma mens shoes
puma running shoes
puma shoes
ed hardy clothes
ed hardy shirts
ed hardy jackets
ed hardy hoodies
ed hardy boots
ed hardy polo shirts
ed hardy shoes
ed hardy jeans
ed hardy outerwear
ed hardy long sleeve shirts
ed hardy bags
ed hardy uggr boots
ed hardy handbags
ed hardy love kills slowly shirts
ed hardy love kills slowly shoes
ed hardy love kills slowly boots
ed hardy trousers
ed hardy mens
ed hardy womens
ed hardy t shirts
ed hardy sunglasses
ghd hair straighteners mk4
hair straightners
ghd iv styler hair straightener
ghd hair straightners
cheap ghd hair straighteners

December 15, 2009 4:49 PM  

Post a Comment

Links to this post:

Create a Link

<< Home