Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
main();
function main() {
var canvas = document.getElementById("canvas");
latticeGradient(canvas, [
[[1, 0, 0, 1], [0, 1, 0, 1], [0, 0, 1, 1], [1, 0, 0, 1]],
[[0, 1, 0, 1], [0, 0, 1, 1], [1, 0, 0, 1], [0, 1, 0, 1]],
[[0, 0, 1, 1], [1, 0, 0, 1], [0, 1, 0, 1], [0, 0, 1, 1]],
[[1, 0, 0, 1], [0, 1, 0, 1], [0, 0, 1, 1], [1, 0, 0, 1]]
]);
}
function latticeGradient(canvas, rows) {
var ctx = canvas.getContext('2d');
var w = canvas.width;
var h = canvas.height;
var rowLength = rows[0].length;
var columnLength = rows.length;
var gradient, startColor, endColor, color, fac;
var upperRow, lowerRow, rowIndex;
var i, j;
for(i = 0; i < h; i++) {
gradient = ctx.createLinearGradient(0, i, w, i);
rowIndex = Math.floor(i / h * (columnLength - 1));
upperRow = rows[rowIndex];
lowerRow = rows[rowIndex + 1];
fac = (i * (columnLength - 1) / h) % 1;
for(j = 0; j < rowLength; j++) {
color = arrayToRGBA(
lerp(upperRow[j], lowerRow[j], fac)
);
gradient.addColorStop(j / (rowLength - 1), color);
}
ctx.fillStyle = gradient;
ctx.fillRect(0, i, w, i);
}
}
function arrayToRGBA(arr) {
var ret = arr.map(function(v) {
// map to [0, 255] and clamp
return Math.max(Math.min(Math.round(v * 255), 255), 0);
});
// alpha should retain its value
ret[3] = arr[3];
return 'rgba(' + ret.join(',') + ')';
}
function lerp(a, b, fac) {
return a.map(function(v, i) {
return v * (1 - fac) + b[i] * fac;
});
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment