Luminance

by OlsonDev

HTML

<div id="chartContainer" style="height: 370px; width: 100%;"></div>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"> </script>
<div style="margin-top:16px;color:dimgrey;font-size:9px;font-family: Verdana, Arial, Helvetica, sans-serif;text-decoration:none;">Source: <a href="https://canvasjs.com/" target="_blank" title="Beautiful HTML5 Charts &amp; Graphs ">https://canvasjs.com/</a></div>

JavaScript

window.onload = function() {

  var chart = new CanvasJS.Chart('chartContainer', {
    theme: 'light1', // 'light2', 'dark1', 'dark2'
    animationEnabled: false, // change to true		
    title: {
      text: 'Luminance'
    },
    data: [{
      type: 'line',
      dataPoints: [...Array(256).keys()].map(value => ({
        y: luminance(value)
      }))
    }]
  });
  chart.render();

}


function luminance(value) {
  value /= 255;
  if (value <= 0.04045) {
    value /= 12.92;
  } else {
    value = (value + 0.055) / 1.055;
    value = Math.pow(value, 2.4);
  }
  return (value * 0.2126) + (value * 0.7152) + (value * 0.0722);
}

console.log(JSON.stringify([...Array(256).keys()].map(luminance)))