Skip to content

Instantly share code, notes, and snippets.

@aalin
Last active September 22, 2017 11:47
Show Gist options
  • Save aalin/3c96adf0142a49e5db34669c72b65cfd to your computer and use it in GitHub Desktop.
Save aalin/3c96adf0142a49e5db34669c72b65cfd to your computer and use it in GitHub Desktop.
function lerp(a, b, t) {
return a + t * (b - a);
}
function mix(a, b, t) {
return a.map((v, i) => lerp(v, b[i], t));
}
function clamp(x, min, max) {
if (x < min) { return min; }
if (x > max) { return max; }
return x;
}
function gradient(colors, x) {
x = clamp(x, 0.0, 1.0);
const numColors = colors.length - 1;
const index = Math.floor(numColors * x);
const length = 1.0 / numColors;
const color1 = colors[index];
const color2 = colors[index + 1] || color1;
return mix(color1, color2, (x - index * length) * numColors);
}
const colors = [
[0xff, 0x00, 0x00],
[0xff, 0xcc, 0x00],
[0x00, 0xff, 0x00],
[0x00, 0xff, 0xcc],
[0x00, 0x00, 0xff],
[0xff, 0x00, 0x00]
];
for (let i = 0; i < 100; i++) {
const style = `background: rgb(${gradient(colors, i / 100.0).map(Math.floor).join()}`;
console.log("%c ", style);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment