Код перестал функционироавать, помогите разобраться

Question

$("#polzunok").slider({
  animate: "slow",
  range: "min",
  value: 50,
  slide: function(event, ui) {
    $("#result-polzunok").text(ui.value);
  }
});
$("#result-polzunok").text($("#polzunok").slider("value"));

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");

setInterval(function() {
  context.clearRect(0, 0, 350, 350);

  var line = document.getElementById("polzunok").value;
  var size = Math.min(canvas.width, canvas.height);
  var rPend = size * 0.30;
  var rBall = size * 0.03;
  var x = Math.abs(200 - line);
  var y = Math.sqrt(Math.pow(rPend, 2) - Math.pow(x, 2));

  context.clearRect(0, 0, 350, 350); {
    context.moveTo(0, 2);
    context.lineTo(350, 2);
    context.lineWidth = 3;
  }
  context.fillStyle = "rgba(255,255,255,0.51)"
  context.fillRect(0, 0, canvas.width, canvas.height);
  context.fillStyle = "black";
  context.globalCompositeOperation = "source-over";
  context.save();
  context.fill();
  context.stroke();
  context.moveTo(200, 0);
  context.lineTo(line, y);
  context.stroke();
  context.beginPath();
  context.arc(line, y, rBall, 0, Math.PI * 2);
}, 10)

#canvas {
  display: block;
  margin: 0 auto;
  padding: 0;
}

#polzunok {
  width: 150px;
  height: 20px;
  display: block;
  margin: 0 auto;
}

<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<title>Mayatnik</title>
<h1 style='text-align: center'> Маятник </h1>

<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">
</head>


<div id="center">
  <canvas id=canvas width="350" height="350" style="background: #eee"></canvas>
</div>

<h2 style='text-align: center'>Изменение угла маятника</h2>
<div id="polzunok"></div>
<h2 style='text-align: center'>
  Значение ползунка: <span style="color:green" id="result-polzunok"></span>
</h2>

</html>

Answer 1

В коде несколько проблем:

document.getElementById("polzunok").value - элемент "polzunok" - это div, у него нет свойства value, соответственно все следующие расчеты и рисования неверны, так как line - undefined. Для решения, значение нужно брать так же, как и в строке $("#polzunok").slider("value")
расчет x, y - из-за несогласованности, rPend оказывается меньше вычисленного x, как следствие при расчете y получается корень из отрицательного числа и NaN как результат.
непонятно что показывает значение слайдера, из-за этого непонятны формулы, в которых используется это значение.
Для определения точек на окружности, проще использовать полярные координаты, в этом случае для расчета достаточно радиуса окружности и синуса/косинуса угла поворота.

Код может принять следующий вид:

$("#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);
  context.fillStyle = "black";
}

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: 150px;
  height: 20px;
  display: block;
  margin: 0 auto;
}

<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'> Маятник </h1>


<div id="center">
  <canvas id=canvas width="350" height="350" style="background: #eee"></canvas>
</div>

<h2 style='text-align: center'>Изменение угла маятника</h2>
<div id="polzunok"></div>
<h2 style='text-align: center'>
  Значение ползунка: <span style="color:green" id="result-polzunok"></span>
</h2>

БЛОГ НА HUSL

Код перестал функционироавать, помогите разобраться

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