Lighting system

I've been working on my new lighting system, at the moment it works really good but it has some bugs and color blending doesn't work as I want. Do you know some tricks to improve my code?
the drawing system is based on pixel.

this.draw = function(data, w, h)
    {
        var r = Math.floor(this.radius), ra = r * r;
        var x = Math.floor(this.xCord), y = Math.floor(this.yCord);

        // Bounds
        var x0 = x - r;
        if(x0  w) x1 = w;
        var y0 = y - r;
        if(y0  h) y1 = h;

        // Color
        var c = this.colorLight;
        var rr = this.red,
            gg = this.green, 
            bb = this.blue;

        for (var yy = y0; yy < y1; yy++)
        {
            var yp = (yy - y0) - r, yt = yp * yp;
            var yw = yy * w;
            for (var xx = x0; xx < x1; xx++) 
            {
                var xp = (xx - x0) - r;
                var i = (xx + yw) * 4;
                d = (xp * xp) + yt;
                if(d <= ra)
                {
                    il = 1 - (d / ra);
                    data[i + 0] += ((rr + data[i + 0])) * il;
                    data[i + 1] += ((gg + data[i + 1])) * il;
                    data[i + 2] += ((bb + data[i + 2])) * il;
                }
            }
        }
    }

preview: http://codepen.io/LukasHaring/pen/yNgERY

Y r vars all 1 ltr?

Is that hard to read? You betchya and so is this code. Just glancing at this, I'm completely assaulted by a large number of single letter, very similar, and practically meaningless variable names.

Words to the wise:

• Make it work.

• Make it right.

• Then, and only then, make it fast.

You've made it work. Now make it right. In this case, by "right" I obviously mean you should make this understandable to Joe Maintainer who will have to grok this code without ever having seen it before and without a clue about how it works. Remember, 6 months from now you yourself might as well have never seen the code before.

Some of these I can't even possibly take a stab at, but here are a few replacements that I would make.

• c >> color

• rr >> red

• gg >> green

• bb >> blue

• yy >> i (or perhaps something meaningful)

• xx >> j (or something more meaningful




Of course, changing yy to i will force you to give your current i` variable a sensible name.

StackExchange Code Review Q#92289, answer score: 4