不同波长的光与 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 阅读次数:3103