Координаты точки на шестиугольной траектории

В проекте я хотел бы равномерно распределить точки вокруг правильного шестиугольного пути.
Таким образом, я хотел бы рассчитать координаты моих точек от центра шестиугольника и длины стороны.

Например, если я хочу сделать то же самое по кругу, я бы сделал (в JS):

let center = {x: 0, y: 0}
let radius = 10;
let amountOfDots = 48;
for (let i = 0; i < amountOfDots; i++) {
    let x = radius * Math.sin(Math.PI * 2 * i / amountOfDots) + center.x;
    let y = radius * Math.cos(Math.PI * 2 * i / amountOfDots) + center.y;
    // draw my dot in (x, y) or whatever
}

Другими словами, я хотел бы получить координаты всех этих точек в одном цикле.
В этом примере amountOfDots = 24Координаты точки на шестиугольной траектории

У меня есть интуиция, реализовать которую будет несложно, но я борюсь с математикой...
Спасибо :)

Можете ли вы добавить рисунок, чтобы ваш вопрос стал более ясным?

tucuxi 10.04.2022 14:43

Если вы думаете о (x, y) как о векторе и думаете о шестиугольнике как о 6 линиях внутри круга, вы можете выполнить простой расчет пересечения линий и получить точки, дайте мне знать, что вы думаете об этом решении

Eilonlif 10.04.2022 16:00

Всегда ли количество точек кратно 6? Вы хотите, чтобы расстояние между точками было одинаковым или угол к центральной точке?

chtz 10.04.2022 16:25

Это в основном то, что я хотел бы, пересечение линий. Дело в том, что, как вы сказали, есть 6 строк, что означает 6 сценариев. А в сценарии с 6 вариантами я могу просто нарисовать 6 линий и разрезать их на amountOfDots / 6 порции.

Florent Descroix 10.04.2022 16:33

В алгоритме, который я ищу, количество точек может быть любым, это значение, которое я хочу легко изменить. В конце концов, я бы хотел, чтобы расстояние между точками было одинаковым, но если у меня есть алгоритм с одинаковым углом, это подойдет :)

Florent Descroix 10.04.2022 16:34
Получение данных из формы с помощью JavaScript - краткое руководство
Получение данных из формы с помощью JavaScript - краткое руководство
Получить данные из формы с помощью JS очень просто: вы запрашиваете элемент формы, передаете его конструктору new FormData() и, наконец, получаете...
Пользовательские правила валидации в Laravel
Пользовательские правила валидации в Laravel
Если вы хотите создать свое собственное правило валидации, Laravel предоставляет возможность сделать это. Создайте правило с помощью следующей...
3 метода стилизации элементов HTML
3 метода стилизации элементов HTML
Когда дело доходит до применения какого-либо стиля к нашему HTML, существует три подхода: встроенный, внутренний и внешний. Предпочтительным обычно...
Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...
Flatpickr: простой модуль календаря для вашего приложения на React
Flatpickr: простой модуль календаря для вашего приложения на React
Если вы ищете пакет для быстрой интеграции календаря с выбором даты в ваше приложения, то библиотека Flatpickr отлично справится с этой задачей....
1
5
32
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Несколько наблюдений, когда мы делаем это на единичном круге (радиус = 1):

  • Размер одного из шести ребер шестиугольника равен 1

  • Координаты шести точек шестиугольника:

    ( 1,    0   )  
    ( 0.5,  √3/2)
    (-0.5,  √3/2)
    (-1,    0   )
    (-0.5, -√3/2)
    ( 0.5, -√3/2)
    
  • Общий размер окружности шестиугольника равен 6.

  • Расстояние (на этой окружности) между двумя последовательными точками равно 6/количество точек.

  • Расстояние от точки до начальной точки (на шестиугольнике) можно использовать, чтобы узнать, на каком ребре шестиугольника лежит эта точка (целая часть расстояния) и как далеко на этом ребре (дробная часть расстояния).

  • Таким образом, с помощью интерполяции мы можем определить координаты такой точки

Вот интерактивный фрагмент JS для расчета и рисования этих точек:

// Main algorithm:
function hexagonDots(center, radius, amountOfDots) {
    // Function to map unit coordinates to the given center & radius
    const project = (x, y) => ({
        x: center.x + radius * x,
        y: center.y + radius * y
    });
    const y = Math.sqrt(3) / 2; // = sin(60°)
    const hexaX = [1, 0.5, -0.5, -1, -0.5, 0.5, 1];
    const hexaY = [0, y, y, 0, -y, -y, 0];

    return Array.from({length: amountOfDots}, (_, i) => {
        let offset = 6 * i / amountOfDots;
        const edgenum = Math.floor(offset); // On which edge is this dot?
        offset %= 1; // Retain fractional part only: offset on that edge
        return project( 
            // Use interpolation to get coordinates of that point on that edge
            hexaX[edgenum] + offset * (hexaX[edgenum + 1] - hexaX[edgenum]),
            hexaY[edgenum] + offset * (hexaY[edgenum + 1] - hexaY[edgenum])
        );
    });
}

// I/O management:

function drawHexagon(ctx, dots) {
    // Draw
    ctx.resetTransform();
    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); 
    ctx.translate(200, 80);
    for (const {x, y} of dots) {
        ctx.beginPath();
        ctx.moveTo(x, y);
        ctx.lineTo(x+1, y);
        ctx.stroke();
    }
}

const ctx = document.querySelector("canvas").getContext("2d");

function refresh() {
    const center = {x: 0, y: 0};
    const radius = 70;
    const amountOfDots = +this.value;
    const dots = hexagonDots(center, radius, amountOfDots);
    drawHexagon(ctx, dots);
}

const input = document.querySelector("input");
input.addEventListener("input", refresh);
refresh.call(input);
Dots: <input type="number" value="48" size="4"><br>
<canvas></canvas>

О боже спасибо!! Я знал, что речь идет об интерполяции и прочем, но не мог это смоделировать!

Florent Descroix 10.04.2022 18:39

Другие вопросы по теме