JSFiddle - React, Tailwind, and code Playground

by Michael Prosser

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<h1>Interpolation of footing across terrain</h1>
<p>
SMOOTHNESS: <input type="range" id="smoothness" value="10" step="1" min="1" max="30" />
</p>
<div class="graph"></div>

CSS

.graph{
  position:relative;
}
.dot{
  position:absolute;
  border-radius: 50%;
  background-color:green;
  width:6px;
  height:6px;
  transform:translateX(-50%) translateY(-50%);
}
.dot.lit{
  background-color:#ff0000;
  width:12px;
  height:12px;
  border-radius: 50%;
}

JavaScript

function drawDots(smoothness){

$('.graph').html('');

   var ys = new Array(30,28,30,24,20,25,23,46,70,60,44,20,10,28,30,54,60,55,73,56,60,40,34,30,28,30,24,20,25,23,46,70,60,44,20,10,28,30,54,60,55,73,56,60,40,34,30,44,55,43,57,55,88,67,77,88,77,55,66,88,77,88,77,66,44,33,44,55,77,44,49,35,34,36,35,38,24,29,32,55);

  var x = 20;

  var step = smoothness;

  for(var i=0;i<ys.length;i++){

    var dot = $('<span class="dot"></span>');
    dot.css('left',x+'px');
    dot.css('top',ys[i]+'px');
    $('.graph').append(dot);

    x+=10;

  }

  var x = 20;

  for(var i=0;i<ys.length;i+=step){

    var avg;

    if(!i){

      avg = (ys[i]+ys[i+1])/2;

    } else {

      avg = (ys[i-1]+ys[i]+ys[i+1])/3;

    }

    var dot = $('<span class="dot lit"></span>');
    dot.css('left',x+'px');
    dot.css('top',avg+'px');
    $('.graph').append(dot);

    x+=10*step;

  }

}

var smoothness = 10;


$("#smoothness").on("input change", function() {
   smoothness = parseInt($(this).val());
   drawDots(smoothness);
});

drawDots(smoothness);