JavaScript реализовать алгоритм Кируса - Бека

87
25 января 2022, 22:40

Ребятушки помогите пожалуйста с помощью языка JavaScript реализовать алгоритм Кируса-Бека.

var context = document.getElementById("MyCanvas").getContext("2d"); 
var coordsX = [], 
  coordsY = []; 
var cordX = [], 
  cordY = []; 
var n = -1; // счётчик нарисованных точек 
var coord = true; // переменная flag которая либо разрешат рисовать либо запрещает при false; 
var x = -1; 
 
function pseudoScalar(a1, b1, a2, b2) { 
  return a1 * b2 - a2 * b1; 
} 
 
 
function checkPrime() { 
  for (var i = 0; i < n - 1; i++) 
    for (var j = i + 2; j < n; j++) { 
      if (pseudoScalar(coordsY[j] - coordsY[i], coordsX[i] - coordsX[j], 
          coordsY[j] - coordsY[j + 1], coordsX[j + 1] - coordsX[j]) * 
        pseudoScalar(coordsY[j] - coordsY[i + 1], coordsX[i + 1] - coordsX[j], 
          coordsY[j] - coordsY[j + 1], coordsX[j + 1] - coordsX[j]) < 0 && 
        pseudoScalar(coordsY[i] - coordsY[j], coordsX[j] - coordsX[i], 
          coordsY[i] - coordsY[i + 1], coordsX[i + 1] - coordsX[i]) * 
        pseudoScalar(coordsY[i] - coordsY[j + 1], coordsX[j + 1] - coordsX[i], 
          coordsY[i] - coordsY[i + 1], coordsX[i + 1] - coordsX[i]) < 0) 
        return false; 
    } 
 
  return true; 
} 
 
function getCoords(event) //координаты 
{ 
  if (coord == true) { 
    n += 1; 
    coordsX[n] = event.clientX - 40; 
    coordsY[n] = event.clientY - 30; 
    drawCircle(coordsX[n], coordsY[n], 4, "black"); 
    if (n > 0) { 
      drawLine(coordsX[n - 1], coordsY[n - 1], coordsX[n], coordsY[n]); 
    } 
  } 
} 
 
 
function drawCircle(x, y, radius, color) // рисует точки, для построения многоугольника 
{ 
  context.beginPath(); 
  context.arc(x, y, radius, 0, Math.PI * 2, false); 
  context.strokeStyle = color; 
  context.closePath(); 
  context.fillStyle = color; 
  context.fill(); 
  context.stroke(); 
} 
 
function drawLine(x1, y1, x2, y2) //соединение точек 
{ 
  context.strokeStyle = "black"; 
  context.beginPath(); 
  context.moveTo(x1, y1); 
  context.lineTo(x2, y2); 
  context.lineWidth = 2; 
  context.stroke(); 
 
} 
 
function graph() //соединяет первую и последнюю точк линией и заканчивает рисунок 
{ 
  drawLine(coordsX[0], coordsY[0], coordsX[n], coordsY[n]); 
  coord = false; 
  if (!checkPrime()) { 
    alert("Многоугольник не является простым"); 
    del(); 
  } 
} 
 
function del() // очищает прямоугольник 
{ 
  context.clearRect(0, 0, 750, 570); 
  n = -1; 
  coordsX = []; 
  coordsY = []; 
  coord = true; 
}
body { 
  padding: 0px; 
  margin: 0px; 
  background-color: #CDCDCD; 
} 
 
#Canvas { 
  flex-direction: column; 
  align-content: flex-start; 
  flex-wrap: wrap; 
  display: flex; 
  width: 1320px; 
  height: 640px; 
  border-radius: 10px; 
  box-shadow: 0 0 10px; 
  margin: 10px 0 0 20px; 
  background: linear-gradient(to left top, blue, pink); 
} 
 
.c1 { 
  box-shadow: 0 0 10px; 
  width: 750px; 
  height: 570px; 
  margin: 20px 0 0 20px; 
  border-radius: 10px; 
  background-color: white; 
  float: left; 
} 
 
.c2 {} 
 
.list { 
  width: 500px; 
  height: 570px; 
  box-shadow: 0 0 10px; 
  border-radius: 10px; 
  margin: 20px 0 0 20px; 
  background-color: #CDCDCD; 
} 
 
input { 
  margin: 20px 0 0 20px; 
  box-shadow: 0 0 10px; 
  border-radius: 5px; 
} 
 
h4 { 
  font-style: italic; 
  font-weight: 600; 
  text-align: center; 
} 
 
p { 
  padding: 20px; 
  font-style: italic; 
  font-weight: 400; 
}
<!DOCTYPE html> 
<html lang="ru-en"> 
 
<head> 
  <meta charset="utf-8"> 
  <title>Algoritm Cyrus — Beck</title> 
  <link rel="stylesheet" type="text/css" href="style.css"> 
</head> 
 
<body> 
  <div id="Canvas"> 
    <canvas id="MyCanvas" class="c1" width="750" height="570" onclick="getCoords(event)"></canvas> 
    <div class="c2"> 
      <input type="button" name="but1" value="Закончить фигуру" title="Закончить рисование фигуры  для отсечения линий" onclick="graph()"> 
      <input type="button" name="but2" value="Очистить холст" onclick="del()"> 
    </div> 
    <div class="list"> 
      <h4>Algoritm Cyrus-Beck</h4> 
      <p> p(t)=p1+t(p1-p0),t in [0,1]<br> где p0, p1 — координаты начала и конца отрезка соответственно,<br> t — параметр.<br> Каждый отсекаемый отрезок содержит координаты начала и конца, а также два параметра tA и tB, соответствующие началу и концу отрезка.<br>        Для каждого отсекаемого отрезка P выполняются следующие действия:<br> Рёбра отсекающего многоугольника обходятся против часовой стрелки. Для каждого ребра E вычисляется параметр tE, описывающий пересечение E с прямой, на которой лежит отрезок 
        P. Вычисляется скалярное произведение вектора E и внешней нормали N, в зависимости от знака которого возникает одна из следующих ситуаций:<br> E · N 
        < 0 — отрезок P направлен с внутренней на внешнюю сторону ребра E. В этом случае параметр tA заменяется на tE, если tE> tA.<br> E · N > 0 — отрезок P направлен с внешней на внутреннюю сторону ребра E. В этом случае параметр tB заменяется на tE, если tE 
          < tB.<br> 
            E · N = 0 — отрезок P параллелен ребру E. Отрезок P отбрасывается как невидимый, если находится по правую сторону от E. Если tA 
            <=t B, то заданная параметрами tA и tB часть отрезка P видима. В противном случае отрезок P полностью невидим.</p> 
    </div> 
  </div> 
  <script src="script.js" type="text/javascript"></script> 
</body> 
 
</html>

вот ссылка на материал сижу уже месяц над этим алгоритмом https://ru.wikipedia.org/wiki/%D0%90%D0%BB%D0%B3%D0%BE%D1%80%D0%B8%D1%82%D0%BC_%D0%9A%D0%B8%D1%80%D1%83%D1%81%D0%B0_%E2%80%94_%D0%91%D0%B5%D0%BA%D0%B0

READ ALSO
Удалить родительский елемент

Удалить родительский елемент

Все привет, помогите разобратьсяСуть, пишу ToDoList и столкнулся с проблемой удаления элементов списка

131
Прокрутка для элемента [закрыт]

Прокрутка для элемента [закрыт]

Хотите улучшить этот вопрос? Переформулируйте вопрос так, чтобы он был сосредоточен только на одной проблеме

124
Создание сложных веб-приложений

Создание сложных веб-приложений

Ниже есть картинка сайтаКак такое создается? С помощью каких средств? Знаю, что такое можно сделать с помощью WebAssembly, но данный сайт сделан...

92