bebraw/arb.html

## arb.html
<html>
    <head>
        <title>Arbitrary Gradient Test</title>
        <script type="text/javascript" src="graphics.js"></script>
        <script type="text/javascript" src="math.js"></script>
        <script type="text/javascript">
            function draw() {
                var canvas = document.getElementById("canvas");

                var beginPoint = new Point(20, 50);
                var beginColor = [1, 0, 0, 0.5]; // semi-opaque red

                var endPoint = new Point(150, 200);
                var endColor = [0, 1, 0, 1.0]; // opaque green

                var directionalGradient = function(point) {
                    var projection = project(beginPoint, endPoint,
                        point).sub(beginPoint);

                    var beginEnd = endPoint.sub(beginPoint);

                    var lerpFac = 0;
                    if (beginEnd.normalize().add(projection.normalize()).toDist() > 1) {
                        lerpFac = projection.toDist() / beginEnd.toDist();
                    }

                    return lerp(beginColor, endColor, lerpFac);
                }

                process(canvas, directionalGradient);
            }
        </script>
    </head>
    <body onload="draw()">
    <canvas id="canvas" width="300" height="300"></canvas>
</body>
</html>

## graphics.js
function process(canvas, func) {
    function setPixel(imageData, x, y, rgba) {
        var index = (x + y * imageData.width) * 4;

        for (var i = 0; i < 4; i++) {
            imageData.data[index + i] = rgba[i] * 255;
        }
    }

    var ctx = canvas.getContext("2d");
    var imageData = ctx.createImageData(canvas.width,
        canvas.height);

    for (var y = 0; y < canvas.height; y++) {
        for (var x = 0; x < canvas.width; x++) {
            var result = func(new Point(x, y));

            setPixel(imageData, x, y, result);
        }
    }

    ctx.putImageData(imageData, 0, 0);
}

## hori.html
<html>
    <head>
        <title>Horizontal Gradient Test</title>
        <script type="text/javascript" src="graphics.js"></script>
        <script type="text/javascript" src="math.js"></script>
        <script type="text/javascript">
            function draw() {
                var canvas = document.getElementById("canvas");

                var leftBound = [1, 0, 0, 0.5]; // semi-opaque red
                var rightBound = [0, 1, 0, 1.0]; // opaque green
                var horizontalGradient = function(point) {
                    return lerp(leftBound, rightBound, point.x / canvas.width);
                }

                process(canvas, horizontalGradient);
            }
        </script>
    </head>
    <body onload="draw()">
    <canvas id="canvas" width="300" height="300"></canvas>
</body>
</html>

## math.js
function lerp(a, b, fac) {
    var ret = [];

    for (var i = 0; i < Math.min(a.length, b.length); i++) {
        ret[i] = a[i] * (1 - fac) + b[i] * fac;
    }

    return ret;
}

function project(target, initial, current) {
    var delta = initial.sub(target);

    if( (delta.x == 0) && (delta.y == 0) ) {
        return target;
    }

    var t = current.sub(target).mul(delta).div(delta.toDistSquared());

    return delta.mul(t.x + t.y).add(target);
}

function dot(a, b) {
    return a.x * b.x + a.y * b.y;
}

function Point(x, y) {
    this.init(x, y);
}
Point.prototype = {
    init: function(x, y) {
        this.x = x? x: 0;
        this.y = y? y: 0;
    },
    add: function(other) {
        return this.operationTemplate(other, function(a, b) {return a + b});
    },
    sub: function(other) {
        return this.operationTemplate(other, function(a, b) {return a - b});
    },
    mul: function(other) {
        return this.operationTemplate(other, function(a, b) {return a * b});
    },
    div: function(other) {
        return this.operationTemplate(other, function(a, b) {return a / b});
    },
    ceil: function() {
        return this.operationTemplate(null, function(a) {return Math.ceil(a)});
    },
    floor: function() {
        return this.operationTemplate(null, function(a) {return Math.floor(a)});
    },
    round: function() {
        return this.operationTemplate(null, function(a) {return Math.round(a)});
    },
    operationTemplate: function(other, op) {
        if(isNumber(other)) {
            return new Point(op(this.x, other), op(this.y, other));
        }

        if(other == null) {
            return new Point(op(this.x), op(this.y));
        }

        return new Point(op(this.x, other.x), op(this.y, other.y));
    },
    toDist: function() {
        return Math.sqrt(this.toDistSquared());
    },
    toDistSquared: function() {
        return this.x * this.x + this.y * this.y;
    },
    normalize: function() {
        return this.div(this.toDist());
    },
    invert: function() {
        return new Point(-this.x, -this.y);
    }
}

function isNumber(n) {
    return !isNaN(parseFloat(n)) && isFinite(n);
}

## vert.html
<html>
    <head>
        <title>Vertical Gradient Test</title>
        <script type="text/javascript" src="graphics.js"></script>
        <script type="text/javascript" src="math.js"></script>
        <script type="text/javascript">
            function draw() {
                var canvas = document.getElementById("canvas");

                var topBound = [1, 0, 0, 0.5]; // semi-opaque red
                var bottomBound = [0, 1, 0, 1.0]; // opaque green
                var verticalGradient = function(point) {
                    return lerp(topBound, bottomBound, point.y / canvas.height);
                }

                process(canvas, verticalGradient);
            }
        </script>
    </head>
    <body onload="draw()">
    <canvas id="canvas" width="300" height="300"></canvas>
</body>
</html>
	<html>
	<head>
	<title>Arbitrary Gradient Test</title>
	<script type="text/javascript" src="graphics.js"></script>
	<script type="text/javascript" src="math.js"></script>
	<script type="text/javascript">
	function draw() {
	var canvas = document.getElementById("canvas");

	var beginPoint = new Point(20, 50);
	var beginColor = [1, 0, 0, 0.5]; // semi-opaque red

	var endPoint = new Point(150, 200);
	var endColor = [0, 1, 0, 1.0]; // opaque green

	var directionalGradient = function(point) {
	var projection = project(beginPoint, endPoint,
	point).sub(beginPoint);

	var beginEnd = endPoint.sub(beginPoint);

	var lerpFac = 0;
	if (beginEnd.normalize().add(projection.normalize()).toDist() > 1) {
	lerpFac = projection.toDist() / beginEnd.toDist();
	}

	return lerp(beginColor, endColor, lerpFac);
	}

	process(canvas, directionalGradient);
	}
	</script>
	</head>
	<body onload="draw()">
	<canvas id="canvas" width="300" height="300"></canvas>
	</body>
	</html>
	function process(canvas, func) {
	function setPixel(imageData, x, y, rgba) {
	var index = (x + y * imageData.width) * 4;

	for (var i = 0; i < 4; i++) {
	imageData.data[index + i] = rgba[i] * 255;
	}
	}

	var ctx = canvas.getContext("2d");
	var imageData = ctx.createImageData(canvas.width,
	canvas.height);

	for (var y = 0; y < canvas.height; y++) {
	for (var x = 0; x < canvas.width; x++) {
	var result = func(new Point(x, y));

	setPixel(imageData, x, y, result);
	}
	}

	ctx.putImageData(imageData, 0, 0);
	}
	<html>
	<head>
	<title>Horizontal Gradient Test</title>
	<script type="text/javascript" src="graphics.js"></script>
	<script type="text/javascript" src="math.js"></script>
	<script type="text/javascript">
	function draw() {
	var canvas = document.getElementById("canvas");

	var leftBound = [1, 0, 0, 0.5]; // semi-opaque red
	var rightBound = [0, 1, 0, 1.0]; // opaque green
	var horizontalGradient = function(point) {
	return lerp(leftBound, rightBound, point.x / canvas.width);
	}

	process(canvas, horizontalGradient);
	}
	</script>
	</head>
	<body onload="draw()">
	<canvas id="canvas" width="300" height="300"></canvas>
	</body>
	</html>
	function lerp(a, b, fac) {
	var ret = [];

	for (var i = 0; i < Math.min(a.length, b.length); i++) {
	ret[i] = a[i] * (1 - fac) + b[i] * fac;
	}

	return ret;
	}

	function project(target, initial, current) {
	var delta = initial.sub(target);

	if( (delta.x == 0) && (delta.y == 0) ) {
	return target;
	}

	var t = current.sub(target).mul(delta).div(delta.toDistSquared());

	return delta.mul(t.x + t.y).add(target);
	}

	function dot(a, b) {
	return a.x * b.x + a.y * b.y;
	}

	function Point(x, y) {
	this.init(x, y);
	}
	Point.prototype = {
	init: function(x, y) {
	this.x = x? x: 0;
	this.y = y? y: 0;
	},
	add: function(other) {
	return this.operationTemplate(other, function(a, b) {return a + b});
	},
	sub: function(other) {
	return this.operationTemplate(other, function(a, b) {return a - b});
	},
	mul: function(other) {
	return this.operationTemplate(other, function(a, b) {return a * b});
	},
	div: function(other) {
	return this.operationTemplate(other, function(a, b) {return a / b});
	},
	ceil: function() {
	return this.operationTemplate(null, function(a) {return Math.ceil(a)});
	},
	floor: function() {
	return this.operationTemplate(null, function(a) {return Math.floor(a)});
	},
	round: function() {
	return this.operationTemplate(null, function(a) {return Math.round(a)});
	},
	operationTemplate: function(other, op) {
	if(isNumber(other)) {
	return new Point(op(this.x, other), op(this.y, other));
	}

	if(other == null) {
	return new Point(op(this.x), op(this.y));
	}

	return new Point(op(this.x, other.x), op(this.y, other.y));
	},
	toDist: function() {
	return Math.sqrt(this.toDistSquared());
	},
	toDistSquared: function() {
	return this.x * this.x + this.y * this.y;
	},
	normalize: function() {
	return this.div(this.toDist());
	},
	invert: function() {
	return new Point(-this.x, -this.y);
	}
	}

	function isNumber(n) {
	return !isNaN(parseFloat(n)) && isFinite(n);
	}
	<html>
	<head>
	<title>Vertical Gradient Test</title>
	<script type="text/javascript" src="graphics.js"></script>
	<script type="text/javascript" src="math.js"></script>
	<script type="text/javascript">
	function draw() {
	var canvas = document.getElementById("canvas");

	var topBound = [1, 0, 0, 0.5]; // semi-opaque red
	var bottomBound = [0, 1, 0, 1.0]; // opaque green
	var verticalGradient = function(point) {
	return lerp(topBound, bottomBound, point.y / canvas.height);
	}

	process(canvas, verticalGradient);
	}
	</script>
	</head>
	<body onload="draw()">
	<canvas id="canvas" width="300" height="300"></canvas>
	</body>
	</html>