Interpolation II

An interpolation table is a specific instance of a Lookup Table – which is also a practical application of indexing, in this case numeric indexes. You will create a computer program that uses the following lookup table (interpolation table), allows a user to input a number and calculates the answer by interpolating between 2 numbers – or finds an exact solution. The table gives the amount of total rainfall (normalized to 1) that occurred during a rainfall event. For example at hour 3, 0.6 or 60% of the total rain had fallen. You will need to create a function that allows me to enter a number between 0 and 6, and it must return the total amount of rainfall that has occurred. I must also be able to enter fractional numbers – for example if I enter 4.5 it should return 0.91 by using interpolation.

by Alan November

HTML

<h1>
Interpolation
</h1>

The table gives the amount of total rainfall (normalized to 1) that occured during a rainfall event.<br/><br/>

<table border="1" style ="color:white; background-color:blue">
<tr>
  <th>
   <b>Hour</b>
  </th>
  <td>0</td>
  <td>1</td>
  <td>2</td>
  <td>3</td>
  <td>4</td>
  <td>5</td>
  <td>6</td>
</tr>
<tr>
  <th>
    <b>Rainfall</b>
  </th>
  <td>0.00</td>
  <td>0.04</td>
  <td>0.11</td>
  <td>0.60</td>
  <td>0.87</td>
  <td>0.95</td>
  <td>1.00</td>
</tr>
</table>

<br/>
Enter a value between 0 and 6 (in the textbox below) to calculate the rain that has fallen at that time. (ie.  4.5hrs is 0.91in. of raiin has fallen)<br/>
Click "<b>Calculate Rainfall</b>" to get results.
<br/><br/>



<div><input type="tb1" id="input" onkeypress="handle(event)" /></div>



<input type="button" value="Calculate Rainfall" id="bt1" onClick="findRainfall(rainfall, input);"style="color:white; background-color:blue" />

<br/><br/>
<div id="output"></div>


<!--
<h1>
Interpolation
</h1>

The table gives the amount of total rainfall (normalized to 1) that occured during a rainfall event.<br/><br/>

<table border="1" style ="color:white; background-color:blue">
<tr>
  <th>
   <b>Hour</b>
  </th>
  <td>0</td>
  <td>1</td>
  <td>2</td>
  <td>3</td>
  <td>4</td>
  <td>5</td>
  <td>6</td>
</tr>
<tr>
  <th>
    <b>Rainfall</b>
  </th>
  <td>0.00</td>
  <td>0.04</td>
  <td>0.11</td>
  <td>0.60</td>
  <td>0.87</td>
  <td>0.95</td>
  <td>1.00</td>
</tr>
</table>

<br/>
Enter a value between 0 and 6 (in the textbox below) to calculate the rain that has fallen at that time. (ie.  4.5hrs is 0.91in. of raiin has fallen)<br/>
Click "<b>Calculate Rainfall</b>" to get results.
<br/><br/>

<input type="textbox" id="inputValue" onkeypress="handle(event)" />

<input type="button" id="btn1" value="Calculate Rainfall" onClick="findrRainfall(rainfall, input);" style="color:white; background-color:blue" /><br/><br/>

<div id="output">
</div>
-->

JavaScript

var rainfall = [0.00, 0.04, 0.11, 0.60, 0.87, 0.95, 1.00];

// User can press enter to et results
function handle(e) {
  var key = e.keyCode || e.which;
if (key == 13) {
    input = document.getElementById("input").value;
    findRainfall(rainfall, input);
  }
}

function findRainfall(rainfall, input) {
	input = document.getElementById("input").value;
  chkInput(input);
  document.getElementById("output").innerHTML = input + " = " + interpol(rainfall, input);
  document.getElementById("input").value = "";
}

function chkInput(input) {
  x = document.getElementById("input").value;
  if (isNaN(x) || x < 0 || x > 6) {
    alert("Enter numbers between 0 and " + (rainfall.length - 1) + " please. You entered: " + input);
  }
}

function interpol(rainfall, input) {

  var number = parseFloat(input);

  var x = number; // x coordinate
  var x1 = Math.floor(number); // x1 = coordinate 1
  var x2 = Math.floor(number + 1); // x2 = coordinate 2
  var y1 = rainfall[Math.floor(number)]; // y1 = coordinate 1
  var y2 = rainfall[Math.floor(number + 1)]; // y2 = coordinate 2

  // variable listed is the interpolated "y" coordinate.
  var y = (((x - x1) * (y2 - y1)) / (x2 - x1)) + y1;

  return number == rainfall.length - 1 ? rainfall[number] : Number(y).toFixed(2);
}