Wednesday, May 12, 2010

Color Vision with Javascript

The Color Vision library for Javascript is composed of two parts; a color vision daltonize.js [1, 2] and simulate.js [3, 4, 5].  These algorithms combined enable developers to target specific forms of color blindness from both sides of the spectrum.

The following code is an example of using the Color Vision library to daltonize an image, exposing details to a protanope:

Color.Vision.Daltonize(image, {
        type: "Protanope,
        callback: function(canvas) {
            document.body.appendChild(canvas);
        }
});

Here are the results on an Ishihara test plate [6].

Color Blindness Simulation 

Gary W. Meyer and Donald P. Greenberg [3] present an algorithm to simulate the world through the eyes of dichromats.  In this example, we simulate how a protanopic (red-cone missing) individual would perceive and image:

Color.Vision.Simulate(image, {
        type: "Protanope",
        amount: 1.0,
        callback: function(canvas) {
            document.body.appendChild(canvas);
        }
});

One interesting thing about this algorithm is that it can be modified to match other forms of color blindness by modulating the confusion line coordinates.  At this time, there is no online color vision tests that can provide measurements of an individuals confusion line, as such, one is left to creating fanciful psychedelic customalies:

Color.Vision.Simulate(image, {
        type: "Custom",
        x: 0.7465,
        y: 0.2535,
        m: 1.273463,
        yint: -0.073894,
        amount: 1.0,
        callback: function(canvas) {
            document.body.appendChild(canvas);
        }
});

You can find the entire project online.

Javascript

References
  1. Françoise Viénot, Hans Brettel and John D. Mollon
    Digital video colourmaps for checking the legibility of displays by dichromats
    Color Research and Application, 24(4): 243-252
    , 1999.

  2. Onur Fidaner, Poliang Lin and Nevran Ozguven.
    Analysis of Color Blindness

  3. Gary W. Meyer and Donald P. Greenberg
    Color-Defective Vision and Computer Graphics Displays
    IEEE Computer Graphics and Applications, 8(5): 28-40, 1988.

  4. Vivianne C. Smith and Joel Pokorny
    Spectral sensitivity of the foveal cone photopigments between 400 and 500 nm
    Vision Research, 15(2): 161-171, 1975.
     
  5. Bruce Lindbloom
    RGB Working Space Information

  6. Les Daltoniens
    Le test d’Ishihara

23 comments:

  1. Hello Michael

    Nice work. Under which licence did you publish daltonize.js?

    Thomas

    ReplyDelete
  2. The links to the javascript files seems to be broken.

    ReplyDelete
    Replies
    1. Many years later, but to use this there needs to be an additional quote after the final e and before the comma on the line:
      type: "Protanope",

      Also "image" should be the image object. I just used document.getElementById("myImageID")

      Delete
  3. Hi Michael,

    First of all thanks for your awesome work....Secondly, I want to highlight those pixels in the image (may be replace the colors of those pixels into black spots), which represents the most confused colors of the whole image. These confused colors can be of many different intensities.

    I am trying to understand the algorithm i.e. Daltonize and Simulate, but I am unable to figure out, "How can I say, during the scan of image pixel by pixel, whether to highlight this pixel or not on the basis of most confused color information".


    Please give me some guidance about it. I will be thankful to you.

    ReplyDelete
  4. nike outlet store, http://www.nikeoutletstore.us/
    true religion outlet, http://www.truereligionoutletstore.us.com/
    stuart weitzman boots, http://www.stuartweitzmanoutlet.us/
    louis vuitton outlet, http://www.louisvuittonoutlet.in.net/
    polo ralph lauren, http://www.poloralphlauren.us.org/
    cheap snapbacks, http://www.cheapsnapbacks.us.com/
    the north face clearance, http://www.thenorthfaceclearances.us.com/
    true religion jeans, http://www.truereligionjeanscanada.com/
    jordan shoes, http://www.jordanshoes.us.com/
    cheap michael kors handbags, http://www.cheapmichaelkorshandbag.in.net/
    true religion jeans, http://www.truereligionjeansoutlets.us.com/
    rolex watches, http://www.rolexwatches.in.net/
    ralph lauren outlet, http://www.ralphlaurenoutlet.in.net/
    nike free uk, http://www.nikefreerunning.org.uk/
    michael kors factory outlet, http://www.michaelkorsfactoryoutletonline.com/
    oakley sunglasses, http://www.oakleysunglassesdiscount.us.com/
    gucci handbags, http://www.guccihandbags-outlet.co.uk/
    true religion jeans, http://www.truereligionjean.in.net/
    air jordan 11, http://www.airjordan11.net/
    dansko outlet, http://www.dansko-shoes.us/
    louis vuitton bags, http://www.louisvuittonbag.us.com/
    cheap mlb jerseys, http://www.cheapmlbjerseys.us.com/
    ed hardy clothing, http://www.edhardy.us.com/
    michael kors outlet, http://www.michaelkors-outlets.us.com/
    tiffany jewellery, http://www.tiffanyjewelleryoutlets.co.uk/
    michael kors handbags, http://www.michaelkorshandbag.co.uk/
    christian louboutin, http://www.scarpelouboutin.it/
    1007maoqiuyun

    ReplyDelete
  5. I appreciate the so-date information on your part.
    foro de opciones binarias

    ReplyDelete
  6. This blog is so nice to me. I will continue to come here again and again. Visit my link as well. Good luck
    obat aborsi
    cara menggugurkan kandungan

    ReplyDelete