FIR 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">
		b<sub>0</sub> = <span id="b0">1</span><br>
		b<sub>1</sub> = <span id="b1">0</span>
	</div>
	
	<div class="row">
		<div id="slider"></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 b0 = 1;
		var b1 = 0;
		
		var func = function(i)
		{
			return 0;
		}
		
		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()
		{
			for(var i=1; i<data.datasets[0].data.length; i++)
			{
				data.datasets[1].data[i].y = offset + (data.datasets[0].data[i].y*b0 + data.datasets[0].data[i-1].y*b1);
			}
			myLineChart.update();
		}
		
		function GenerateData()
		{
		
			data.datasets[0].data = [];
			data.datasets[1].data = [];
		
			for(i = 0; i<=4*Math.PI; i+=0.2)
			{
				
				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();
			
			var i;
			
			GenerateData();
		
			myLineChart = new Chart(ctx, {
				type: 'line',
				data: data,
				options: {
					scales: {
						xAxes: [{
							type: 'linear',
							position: 'bottom'
						}]
					}
				}
			});
		
			$('#slider').slider(
				
				{
				
					min: 0,
					max: 1,
					step: 0.05,

					change: function( event, ui )
					{
						b1 = $('#slider').slider('value');
						b0 = 1-b1;
						
						$('#b0').html(b0.toFixed(2));
						$('#b1').html(b1.toFixed(2));
						
						RecalculateData();
						
					}
				}
			);
			
			$('#sin').click(function(){
				func = function(i) { return Math.sin(i); }
				GenerateData();
				RecalculateData();
			});
			
			$('#noise').click(function(){
				func = function(i) { return 0;...