Skip to content

Instantly share code, notes, and snippets.

@bebraw
Created Jul 26, 2010
Embed
What would you like to do?
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment