CODEWITHSUNDEEP
javascriptjquery
ehime
ehime

Reputation: 8405

Applying Standard average colors to background gradients

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 ???

Upvotes: 0

Views: 92

Answers (1)

ehime
ehime

Reputation: 8405

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);

Upvotes: 1

Related Questions