Stupid hue-rotate CSS filter coded in JS
The definition of "hue" by browsers was pulled out of someone's ass.
by glebm
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjs/3.13.1/math.min.js"></script>
<p>
This algorithm emulates the wierd, nonsensical and completely
idiotic <code>hue-rotate</code> CSS filter. I wanted to know
how it worked, because it is out of touch with any definition
of "hue" I've ever seen; the results it produces are stupid
and I believe it was coded under extreme influence of meth,
alcohol and caffeine, by a scientologist listening to Death Metal.
</p>
<span>#</span>
<input type="text" id="color" placeholder="RRGGBB">
<input type="text" id="angle" placeholder="degrees">
<button onclick="calculate()">Calculate</button>
<p id="result"></p>
CSS
body {
font: 14px sans-serif;
padding: 6px 8px;
}
input {
width: 64px;
}
JavaScript
/*
syms mr mg mb hr hg hb a
c = cosd(a)
s = sind(a)
A = [
mr+(1-mr)*c+(1-mr)*c-mr*s mg-mg*c-mg*s mb-mb*c+(1-mb)*s ;
mr-mr*c+hr*s mg+(1-mg)*c+hg*s mb-mb*c-hb*s
mr-mr*c-(1-mr)*s mg-mg*c+mg*s mb+(1-mb)*c+mb*s
]
print A
*/
function calculate() {
console.log(math.eye(3));
// Get the RGB and angle to work with.
var color = document.getElementById('color').value;
if (! /^[0-9A-F]{6}$/i.test(color)) return alert('Bad color!');
var angle = document.getElementById('angle').value;
if (! /^-?[0-9]+$/i.test(angle)) return alert('Bad angle!');
var r = parseInt(color.substr(0, 2), 16);
var g = parseInt(color.substr(2, 2), 16);
var b = parseInt(color.substr(4, 2), 16);
var angle = (parseInt(angle) % 360 + 360) % 360;
// Hold your breath because what follows isn't flowers.
// Luminance coefficients.
var lumR = 0.2126;
var lumG = 0.7152;
var lumB = 0.0722;
const lum = math.diag([lumR, lumG, lumB]);
const lumM = math.matrix([
[lumR, (1 - lumR), 0],
]);
// Hue rotate coefficients.
var hueRotateR = 0.143;
var hueRotateG = 0.140;
var hueRotateB = 0.283;
var hue = math.diag([hueRotateR, hueRotateG, hueRotateB]);
var cos = Math.cos(angle * Math.PI / 180);
var sin = Math.sin(angle * Math.PI / 180);
const hueRotate = math.matrix([
[cos, -sin, 0],
[sin, cos, 0],
[ 0, 0, 1]
]);
col = [1, cos - cos * lumR, -sin]
matrix[0] = lumR + (1 - lumR) * cos - lumR * sin;
matrix[1] = lumG - lumG * cos - lumG * sin;
matrix[2] = lumB - lumB * cos + (1 - lumB) * sin;
matrix[3] = lumR - lumR * cos + hueRotateR * sin;
matrix[4] = lumG + (1 - lumG) * cos + hueRotateG * sin;
matrix[5] = lumB - lumB * cos - hueRotateB * sin;
matrix[6] = lumR - lumR * cos - (1 - lumR) * sin;
matrix[7] = lumG - lumG * cos + lumG * sin;
matrix[8] = lumB + (1 - lumB) * cos + lumB * sin;
...