const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const slider3 = document.getElementById('fs3');
const slider4 = document.getElementById('fs4');

const alphaValue = document.getElementById('f3');
const filterOrderValue = document.getElementById('f4');

userString = "alpha*inputSamples[n-1] + (1.0-alpha)*outputSamples[n-1]";

slider3.addEventListener('input', function() {
  alphaValue.textContent = slider3.value;
  redraw();
});

slider4.addEventListener('input', function() {
  filterOrderValue.textContent = slider4.value;
  redraw();
});


document.getElementById('updateButton').addEventListener('click', function() {
  updateAndRedraw();
});

function setFilterUserString(str){
  document.getElementById('textInput').value = `${str}`;
  updateAndRedraw();
}

function updateAndRedraw(){
  const userInput = document.getElementById('textInput').value;
  userString = userInput;
  redraw();
}
////////////////////////
//STUFF FOR THE TUTORIAL
////////////////////////

FS = 20000 //Hz
DT = 1.0/FS //Seconds
N_SAMPLES = 512

function wave(t, frequency, amplitude, phaseShift, yOffset){
  return amplitude * Math.sin((2 * Math.PI * frequency * t) + phaseShift) + yOffset;
}

function drawFunction(func, strokestyle) {
  
  const funcScaled = (x) => -func(x)*canvas.height/2 + canvas.height/2;
  
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.beginPath();
  
  ctx.moveTo(0, funcScaled(0));
  
  
  for (let n = 0; n < N_SAMPLES; n++) {
    const y = funcScaled(n);
    ctx.lineTo(n*canvas.width/(N_SAMPLES-1), y);
  }
  
  ctx.strokeStyle = strokestyle;
  ctx.lineWidth = 2;
  ctx.stroke();
}


//This is an example low-pass filter function. 
//Here alpha sets freq
function simpleLowPassFilter(inputSamples, alpha){
  
  const nSamples = inputSamples.length;
  
  let outputSamples = new Array(inputSamples.length).fill(0);
  
  //This is our core filter algorithm. This loop is just taking the rolling average of our input function
  for(let n = 0; n < nSamples-1; n++){
    outputSamples[n] = (1.0-alpha)*outputSamples[n] + alpha*inputSamples[n];
  }
  
  return outputSamples;
  
}

//This is the actual filter that takes user input
function userFilter(userString, inputSamples, alpha){
  
  const nSamples = inputSamples.length;
  
  userStringAugmented = "return " + userString + ";";
  
  const userFunc = new Function("inputSamples", "outputSamples", "alpha", "n", userStringAugmented)
  
  let outputSamples = new Array(inputSamples.length).fill(0);
  
  for(let n = 1; n < nSamples; n++){
    outputSamples[n] = userFunc(inputSamples, outputSamples, alpha, n);
  }
  
  return outputSamples;
  
}

function redraw(){
  //drawFunction((n)=>wave(n*DT,parseFloat(slider1.value), .5, 0,0) + wave(n*DT,parseFloat(slider2.value), .5, 0,0),'black');
  let ogSamples = new Array(N_SAMPLES).fill(0);
  
  //Fill our buffer w samples
  for(let n = 0; n < N_SAMPLES; n++){
    ogSamples[n] = wave(n*DT,80, .5, 0,0) + wave(n*DT,1000, .5, 0,0) ;
  }
  
  //First order filter of input samples
  filteredSamples = userFilter(userString,ogSamples, parseFloat(slider3.value));
  
  //For higher order filters, we just apply the first order filter to the filtered samples many times
  //This should perform similarly to an nth order RC ladder filter in electronics
  for(let no = 1; no < parseInt(slider4.value); no++){
    filteredSamples = userFilter(userString,filteredSamples, parseFloat(slider3.value));
  }
  
  const ftodraw = (n) => (n >= 0 && n < filteredSamples.length) ? filteredSamples[n] : 0;
  
  drawFunction(ftodraw, 'black');
  
}

// Initial drawing
redraw();