Помогите, пожалуйста, сделать вывод значения слайдера, чтобы показывал угол отклонения маятника (от -90 до 90), у самого не выходит

Question

 $("#polzunok").slider({
        animate: "slow",
        range: "min",
        value: 50,
        slide: function(event, ui) {
          $("#result-polzunok").text(ui.value);
          draw();
        }
      });
      $("#result-polzunok").text($("#polzunok").slider("value"));
    
      var canvas = document.getElementById("canvas");
      var context = canvas.getContext("2d");
    
      requestAnimationFrame(draw);
    
      function draw() {
        var angle = $("#polzunok").slider("value") / 100 * Math.PI;
    
        var size = Math.min(canvas.width, canvas.height);
        var ox = (canvas.width / 2) >> 0;
        var rPend = size * 0.30;
        var rBall = size * 0.03;
        var x = (ox - rPend * Math.cos(angle)) | 0;
        var y = (rPend * Math.sin(angle) + 2) | 0;
    
        context.clearRect(0, 0, canvas.width, canvas.height);
        drawBg(context, canvas.width, canvas.height);
        drawBase(context, canvas.width);
        drawLine(context, ox, x, y);
        drawBall(context, x, y, rBall);
    
        requestAnimationFrame(draw);
      }
    
      function drawBg(context, w, h) {
        context.fillStyle = "rgba(255,255,255,0.51)"
        context.fillRect(0, 0, w, h);
    
      }
    
      function drawBase(context, w) {
        context.save();
        context.moveTo(0, 2);
        context.lineTo(w, 2);
        context.lineWidth = 3;
        context.stroke();
        context.restore();
      }
    
      function drawLine(context, ox, x, y) {
        context.save();
        context.moveTo(ox, 0);
        context.lineTo(x, y);
        context.stroke();
        context.restore();
      }
    
      function drawBall(context, x, y, rBall) {
        context.save();
        context.beginPath();
        context.arc(x, y, rBall, 0, Math.PI * 2);
        context.fill();
        context.restore();
      }

 #canvas {
          display: block;
          margin: 0 auto;
          padding: 0;
        }
    
        #polzunok {
          width: 200px;
          height: 15px;
          display: block;
          margin: 0 auto;
          background-color: #000;
          border: 3px solid #7442c8;
          border-radius: 10px;
          cursor: pointer;
          margin-top: -5px;
        }
    
        mark.red {
          background-color: #7442c8;
          color: white;
        }

    <!DOCTYPE html>
      <html>
      <meta charset="UTF-8">
    
      <title>Mayatnik</title>
    
      <head>
    
    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.5.0.min.js"></script>
    <script src="https://atuin.ru/demo/ui-slider/jquery-ui.min.js"></script>
    <script src="https://atuin.ru/demo/ui-slider/jquery.ui.touch-punch.min.js"></script>
    <link rel="stylesheet" href="https://atuin.ru/demo/ui-slider/jquery-ui.min.css">
    
    <h1 style='text-align: center'>
      <mark class="red">
    
      Маятник
    
      </mark >
    </h1>
    
    
    <div id="center">
      <canvas id=canvas width="350" height="350"></canvas>
    </div>
    
    <h2 style='text-align: center'>
        <mark class="red">
    
          Изменение угла маятника
    
        </mark >
    </h2>
    <div id="polzunok"></div>
    
    <h2 style='text-align: center'>
    </h2>
      </head>
    </html>

<!DOCTYPE html>
<html>
<head>
<title>Картинка - фон в HTML</title>
</head>
<style>
body {
background-image: url(monstercat-music-hd-ej-1920x1080.jpg);
background-repeat: repeat-x, repeat-x;
background-position-x: 40%;
background-position-y: 10%;
background-size: 105%;
}
</style>
</html>

БЛОГ НА HUSL

Помогите, пожалуйста, сделать вывод значения слайдера, чтобы показывал угол отклонения маятника (от -90 до 90), у самого не выходит

Ответы (0 шт):