不同波长的光与 RGB 颜色的转换
想用 js 做一个双缝干涉条纹的课件,其中一个需要实现的功能是:根据输入的波长(或频率)显示对应的颜色。网上搜到了这样一个解答,记录一下,代码如下:
<html>
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1.0"></head>
<body>
<div id="mainDiv"></div>
<script>
// 指定波长转换成RGBA颜色
function lambdaToColor(lambda, gamma, intensityMax) {
if (typeof (gamma) == 'undefined') {
gamma = 0.8; // double
}
if (typeof (intensityMax) == 'undefined') {
intensityMax = 255.0; // double
}
var r, g, b, alpha; // double
if (lambda >= 380.0 && lambda < 440.0) {
r = -1.0 * (lambda - 440.0) / (440.0 - 380.0);
g = 0.0;
b = 1.0;
} else if (lambda >= 440.0 && lambda < 490.0) {
r = 0.0;
g = (lambda - 440.0) / (490.0 - 440.0);
b = 1.0;
} else if (lambda >= 490.0 && lambda < 510.0) {
r = 0.0;
g = 1.0;
b = -1.0 * (lambda - 510.0) / (510.0 - 490.0);
} else if (lambda >= 510.0 && lambda < 580.0) {
r = (lambda - 510.0) / (580.0 - 510.0);
g = 1.0;
b = 0.0;
} else if (lambda >= 580.0 && lambda < 645.0) {
r = 1.0;
g = -1.0 * (lambda - 645.0) / (645.0 - 580.0);
b = 0.0;
} else if (lambda >= 645.0 && lambda <= 780.0) {
r = 1.0;
g = 0.0;
b = 0.0;
} else {
r = 0.0;
g = 0.0;
b = 0.0;
}
// 在可见光谱的边缘处强度较低。
if (lambda >= 380.0 && lambda < 420.0) {
alpha = 0.30 + 0.70 * (lambda - 380.0) / (420.0 - 380.0);
} else if (lambda >= 420.0 && lambda < 701.0) {
alpha = 1.0;
} else if (lambda >= 701.0 && lambda < 780.0) {
alpha = 0.30 + 0.70 * (780.0 - lambda) / (780.0 - 700.0);
} else {
alpha = 0.0;
}
// 1953年在引入NTSC电视时,计算具有荧光体的监视器的亮度公式如下
var Y = (0.212671 * r + 0.715160 * g + 0.072169 * b); // Math.round
// 伽马射线 gamma
// 照明强度 intensityMax
var R = r == 0.0 ? 0 : Math.round(intensityMax * Math.pow(r * alpha, gamma));
var G = g == 0.0 ? 0 : Math.round(intensityMax * Math.pow(g * alpha, gamma));
var B = b == 0.0 ? 0 : Math.round(intensityMax * Math.pow(b * alpha, gamma));
var A = (alpha); // Math.round
// return
return { r: R, g: G, b: B, a: A, y: Y };
}
var arrHtml = [];
for (var i = 380.0; i <= 780.0; i += 0.5) {
var lambda = i; // double
var gamma = 0.8; // double
var intensityMax = 255.0; // double
var res = lambdaToColor(lambda, gamma, intensityMax);
var rgba = 'rgba(' + res.r + ', ' + res.g + ', ' + res.b + ', ' + res.a + ')';
console.log('Lambda:' + lambda + ', ' + rgba + ', ' + res.y);
// rgba = 'rgb(' + res.r + ', ' + res.g + ', ' + res.b + ')';
arrHtml.push('<div style="background-color:' + rgba + '; width:1px;height:200px;display:inline-block;"></div>');
}
document.getElementById('mainDiv').innerHTML = arrHtml.join('');
</script>
</body>
</html>
效果如下:
发布时间:2018/12/25 下午9:35:46 阅读次数:4194
