Gain when the listener is between coneInnerAngle and coneOuterAngle

by Tomoki Sato

HTML

<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
<canvas id="myChart"></canvas>
<div id="info">

</div>

JavaScript

const ctx = document.querySelector('#myChart').getContext('2d');

const coneInnerAngle = 50;
const coneOuterAngle = 120;
const coneOuterGain = 0.8;

const absInnerAngle = coneInnerAngle / 2;
const absOuterAngle = coneOuterAngle / 2;

const calcGain = angle => {
	const x = (angle - absInnerAngle) / (absOuterAngle - absInnerAngle);
  return (1 - x) + coneOuterGain * x;
};

const labels = [];
const gains = [];


for (let i = 25; i < 60; i++) {
	labels.push(i);
	gains.push(calcGain(i));
}

const chart = new Chart(ctx, {
    type: 'line',
    data: {
    	labels: labels,
      datasets: [
      	{
        	label: 'gain',
          borderColor: 'rgb(50, 50, 50)',
          data: gains,
          fill: false
        }
      ]
    },
    options: {
    	title: {
      	display: true,
        text: 'Gain when the listener is between coneInnerAngle and coneOuterAngle'
      },
      scales: {
      	xAxes: [ {
        	display: true,
          scaleLabel: {
          	display: true,
            labelString: 'angle'
          }
        }],
        yAxes: [ {
        	display: true,
          scaleLabel: {
          	display: true,
            labelString: 'gain'
          }
        }]
      }
    }
});

document.querySelector('#info').textContent = `coneInnerAngle=${coneInnerAngle}/coneOuterAngle=${coneOuterAngle}/coneOuterGain=${coneOuterGain}`;