Strange off-by-one issue with snippet to generate gradients...

Question

I use my own library for a lot of stuff, and recently I decided to add gradient functionality, but I've encountered a problem that I seem to remember having a while ago also, and this is the matter of my gradient being slightly off near the end. First, the code in question:

gradient = function(l, g)
 {
var r = [], s = [], f = g.length - 1;
for (var x = 0; x < g.length; x++)
    g[x] = (typeof(g[x]) == 'string' ? g[x] : g[x].join(','))._replace(['#', ' ', 'rgb(', ')'], ''),
    g[x] = (g[x].indexOf(',') != -1
     ? g[x].split(',')
     : g[x].chunk(2).map(function(_)
      {
      return _.fromBase('hex');
      }));
for (var x = 0; x < f; x++)
    s[x] = [(g[x][0] - g[x + 1][0]) / (l - 1) * f, (g[x][1] - g[x + 1][2]) / (l - 1) * f, (g[x][2] - g[x + 1][2]) / (l - 1) * f];
for (var x = 0; x < l; x++)
    r[x] = '', ([0, 1, 2]).map(function(_)
     {
     var c = Math.floor(x / (l / (g.length - 1)));
     r[x] += (g[c][_] - s[c][_] * (x - (l / (g.length - 1)) * c)).toBase('hex').pad('0', 2);
     });
return r;
 };

And, of course, my library: http://wimg.co.uk/HJ0X8B.js

Have fun in there! : ) If you think you might be able to help in any way at all, the custom functions I use in the gradient snippet are _replace(), chunk(), map(), and toBase() and fromBase()... as you'll be able to see at this demo page, everything pretty much works (at least in Opera and Firefox) save for the gradient being ever so slightly off at the end (hover to be shown the hex value). For example, calling gradient(50, ['ffffff', 'ffff00', '00ff00']) does indeed create an array of length fifty that contains hexadecimal color values gradually shifting from red to yellow and then to lime, however the last color isn't exactly lime (in this case, it comes out 05ff00); this means that there's something slightly off in the mathematics and not the methodology.

So... anybody willing to wade through the jungle that is the code I find so strangely beautiful to help me arrive at a solution? All assistance is greatly appreciated.

Answer 1

If you expect people to help you:

1. Use opening and closing braces
2. Use semi-colons to end every logical line.
3. Write self-documenting code using meaningful variable names.
4. Separate your logical steps each to their own line, instead of combining as much as possible in a single line.

It almost looks like you're asking us to de-obfuscate someone else's code.

Answer 2

gradient = function(l, g)
 {
var r = [], s = [], f = g.length - 1;
for (var x = 0; x < g.length; x++)
    g[x] = (typeof(g[x]) == 'string' ? g[x] : g[x].join(','))._replace(['#', ' ', 'rgb(', ')'], ''),
    g[x] = (g[x].indexOf(',') != -1
     ? g[x].split(',')
     : g[x].chunk(2).map(function(_)
      {
      return _.fromBase('hex');
      }));
for (var x = 0; x < f; x++)
    s[x] = [(g[x][0] - g[x + 1][0]) / (l - 1) * f, (g[x][1] - g[x + 1][1]) / (l - 1) * f, (g[x][2] - g[x + 1][2]) / (l - 1) * f];
for (var x = 0; x < l; x++)
    r[x] = '', ([0, 1, 2]).map(function(_)
     {
     var c = Math.floor(x / (l / (g.length - 1)));
     r[x] += (g[c][_] - s[c][_] * (x - ((l-1) / (g.length - 1)) * c)).toBase('hex').pad('0', 2);
     });
return r;
 };

Use (l-1) instead of l on the last calculation line since you have prepared the s array for l-1 steps not l.

BTW your code is really hard to understand, try to write more understandable and standart code. And do write for loops instead of [0, 1, 2].map(sth).