Alpha Beta filter demo

Author: Mikołaj Kamiński https://becomeapro.pl/

by mikasjp

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<div class="row">
  <button id="sin">Sin(x) + noise</button>
  <button id="noise">Noise</button>
</div>

<div class="row">
  &alpha; = <span id="alpha">0.00</span>
  <div id="slider"></div>
</div>
<div class="row">
  &beta; = <span id="beta">0.00</span>
  <div id="slider2"></div>
</div>

<div class="row" style="height:65vh">
  <canvas id="chart"></canvas>
</div>

CSS

div.row {
		  width: 80vw;
		  margin: auto;
		  padding: 10px;
		  text-align: center;
		}
		
		canvas {
		  height: 100% !important;
		}

JavaScript

var alpha = 0;
		var beta = 0;
		var dt = 0.2;

		var func = function(i) {
		  return Math.sin(i);
		}

		var offset = 0;

		var noiseDivider = 4;

		var myLineChart;

		var data = {
		  datasets: [{
		    label: 'Noisy signal',
		    fill: false,
		    backgroundColor: "rgba(255,0,0,0.5)",
		    borderColor: "rgba(255,0,0,0.5)",
		    data: []
		  }, {
		    label: 'Filtered signal',
		    fill: false,
		    backgroundColor: "rgba(0,255,0,0.5)",
		    borderColor: "rgba(0,255,0,0.5)",
		    data: []
		  }]
		};

		function RecalculateData() {
		  var lastSample = data.datasets[0].data[0].y;
		  var lastDerivative = 0;

		  for (var i = 1; i < data.datasets[0].data.length; i++) {
		    var sample = data.datasets[0].data[i].y;

		    var estSample = (lastDerivative * dt) + lastSample;

		    var error = sample - estSample;

		    estSample += alpha * error;

		    lastDerivative += (beta * error) / dt;

		    lastSample = estSample;

		    data.datasets[1].data[i].y = estSample;

		    data.datasets[1].data[i].y += offset;
		  }
		}

		function GenerateData() {

		  data.datasets[0].data = [];
		  data.datasets[1].data = [];

		  for (i = 0; i <= 4 * Math.PI; i += dt) {

		    var noise = Math.random() / noiseDivider;

		    var newPoint1 = {
		      x: i,
		      y: func(i) + (noise)
		    };
		    var newPoint2 = {
		      x: i,
		      y: offset + func(i) + (noise)
		    };
		    data.datasets[0].data.push(newPoint1);
		    data.datasets[1].data.push(newPoint2);
		  }
		}

		$(document).ready(function() {

		  var ctx = $('#chart').get();

		  GenerateData();
		  RecalculateData();

		  myLineChart = new Chart(ctx, {
		    type: 'line',
		    data: data,
		    options: {
		      scales: {
		        xAxes: [{
		          type: 'linear',
		          position: 'bottom'
		        }]
		      }
		    }
		  });

		  $('#slider').slider(

		    {

		      min: 0,
		      max: 2,
		      step: 0.05,

		      change: function(event, ui) {
		        alpha =...