JSFiddle - React, Tailwind, and code Playground

by Michael Prosser

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="tools">
  <input type="number" id="exponent1" value="2" />
  <input type="number" id="exponent2" value="1.9" />
</div>
<div class="stage">

</div>

CSS

html{
  height:100%;
}
body{
  height:100%;
  margin:50px;
  position: relative;
}
.stage{
  height:100%;
  background-color: #ccc;
  position: relative;
}
.dot{
  width: 20px;
  height: 20px;
  bottom: 0px;
  left: 0px;
  background-color: red;
  position: absolute;
  text-align: center;
  line-height: 20px;
  border-radius: 50%;
  font-size: 10px;
  color: #fff;
}
.tools{
  position: fixed;
  left: 0px;
  right:0px;
  top: 0px;
  padding: 10px;
  background-color: rgba(0,0,0,0.8);
  z-index: 99;
}

JavaScript

function parse(){

	$('.stage').html('');

  var pitch = 0;

  var step = Math.PI/90;

  var i = 0;

  var exponent1 = parseFloat($('#exponent1').val());
  var exponent2 = parseFloat($('#exponent2').val());

  while(i < 90){

    pitch+=step;

    var dot = $('<div class="dot">' + i + '</div>');

    dot.css('left',parseInt(i*10)+'px');
    dot.css('bottom',parseInt(Math.pow(Math.pow(pitch,exponent1*pitch),exponent2)*1)+'px');

    $('.stage').append(dot);

    i++;

  }

}

$('#exponent1,#exponent2').change(function(){

	parse();

});

parse();