0

Hey guys I'm having an issue that hopefully someone can help me with,

I have a JSFiddle here of applying the averaged colors to new div block, so I know it is working, I am having trouble applying them to gradient backgrounds though, and I think I have something seriously messed up, here is the repo

the issue is definetly in this portion of code somehow, I recommend cloning it out for review

    var isWebkit = 'webkitRequestAnimationFrame' in window;
    var values   = $.makeArray($('.value'));

    for(var i = 0; i < sigma; i++)
    {
        var newColor = [
            Math.floor(minColor[0]+maxIncrements[0]*i),
            Math.floor(minColor[1]+maxIncrements[1]*i),
            Math.floor(minColor[2]+maxIncrements[2]*i)
        ];

        var hex = this.toHex(newColor[0], newColor[1], newColor[2]);

        (isWebkit) ? $(values[i]).css('background', '-webkit-gradient(linear, left top, left bottom, from(#'+hex+'), to(#000));')
                   : $(values[i]).css('background', '-moz-linear-gradient(top, #'+hex+',  #000);');
    }

    for(var i = 1; i < sigma+1; i++)
    {
        var newColor = [
            Math.min(255,Math.floor(maxColor[0]+minIncrements[0]*i)),
            Math.min(255,Math.floor(maxColor[1]+minIncrements[1]*i)),
            Math.min(255,Math.floor(maxColor[2]+minIncrements[2]*i))
        ];

        var hex = this.toHex(newColor[0], newColor[1], newColor[2]);

        var c = (sigma+i);

        if (c <= values.length) // prevent overlap if we have an odd sigma
        {
            (isWebkit) ? $(values[c]).css('background', '-webkit-gradient(linear, left top, left bottom, from(#'+hex+'), to(#000));')
                       : $(values[c]).css('background', '-moz-linear-gradient(top, #'+hex+',  #000);');

        }
    }

EDIT

it looks like in my version compared to my fiddle I am NOT iterating, and always end up with a single hex of 000000 ???

2
  • 1
    you need to add the '#' in from('+hex+') like this from(#'+hex+') Oct 31, 2013 at 23:39
  • Didn't fix it, but extremely good point, I just added that, and plus one for catching it
    – ehime
    Oct 31, 2013 at 23:42

1 Answer 1

1

The issue was that it was trying to parse a HASH when hashes weren't accounted for

The fix

    /** hex parsers */
    (
        function(a)
        {
            a["toRGB"] = function(a)
            {
                var b = parseInt(a.replace('#', ''), 16); //drop our hash if it exists
                return[b>>16,b>>8&255,b&255]
            };

            a["toHex"] = function(a,b,c)
            {
                return'#'+(c|b<<8|a<<16|1<<24).toString(16).slice(1) // re-add our hash
            }
        })(this);

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.