Volume reduction simulation of PannerNode(WebAudio) distanceModels

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 rolloffFactor = 0.5;
const refDistance = 1;
const maxDistance = 10000;


const linear = distance => {
	return 1 - rolloffFactor * (distance - refDistance) / (maxDistance - refDistance);
};

const inverse = distance => {
	return refDistance / (refDistance + rolloffFactor * (Math.max(distance, refDistance) - refDistance));
};

const exponential = distance => {
	return Math.pow(Math.max(distance, refDistance) / refDistance, -rolloffFactor);
};

const labels = [];
const linearValues = [];
const inverseValues = [];
const exponentialValues = [];

for (let i = 0; i < 10000; i += 10) {
	labels.push(i);
	linearValues.push(linear(i));
  inverseValues.push(inverse(i));
  exponentialValues.push(exponential(i));
}

const chart = new Chart(ctx, {
    type: 'line',
    data: {
    	labels: labels,
      datasets: [
      	{
        	label: 'linear',
          borderColor: 'rgb(255, 99, 132)',
          data: linearValues,
          fill: false
        },
        {
        	label: 'inverse',
          borderColor: 'rgb(99, 255, 132)',
          data: inverseValues,
          fill: false
        },
        {
        	label: 'exponential',
          borderColor: 'rgb(99, 132, 255)',
          data: exponentialValues,
          fill: false
        },
      ]
    },
    options: {
    	title: {
      	display: true,
        text: 'Volume reduction for each distanceModel algorithm'
      },
      scales: {
      	xAxes: [ {
        	display: true,
          scaleLabel: {
          	display: true,
            labelString: 'distance'
          }
        }],
        yAxes: [ {
        	display: true,
          scaleLabel: {
          	display: true,
            labelString: 'volume'
          }
        }]
      }
    }
});

document.querySelector('#info').textContent = `rolloffFactor=${rolloffFactor}/refDistance=${refDistance}/maxDistance=${maxDistance}`;