1

Строится кривая, состоящая из множества кубических Безье, следующих друг за другом. Пробую обеспечить отсутствие крутых поворотов со сверхмалым радиусом, изломов.

Для этого вычисляю угол, образующийся между условным последним отрезком (по двум последним точкам) и предполагаемым следующим отрезком (до точки со случайными координатами). Если угол меньше MIN_ANGLE, то вызываю рекурсивно функцию getPoint(), которая генерирует случайную точку, проверяет минимальный угол и записывает точки в lastTwoPoints для последующей проверки.

Дополнительно добавил проверку на минимальное и максимальное расстояние для предполагаемого отрезка: MIN_DISTANCE и MAX_DISTANCE. Так я пытаюсь исключить изломы на минимальных отрезках и перекосы при слишком больших.

Результат удовлетворительный, но не идеальный. Изломы все-таки не исключены, да к тому же при многократных неудачных попытках перебора точек иногда получаю ошибку Maximum call stack size exceeded.

Как обеспечить отсутствие изломов кривых Безье и схожих с ними участками со сверхмалыми радиусами?

Здесь строится SVG-path, который точно так же может быть отрисован и на Canvas, поэтому в метках стоит canvas и html5-canvas.

let lastTwoPoints = [];

const W = document.documentElement.clientWidth;
const H = document.documentElement.clientHeight;

const MIN_ANGLE = 60;
const MIN_DISTANCE = (Math.min(W,H))/20;
const MAX_DISTANCE = (Math.min(W,H))/4;

let svg = document.querySelector('svg');
let path = document.querySelector('path');

//svg.style.width = W;
//svg.style.height = H;

svg.setAttribute('viewbox', `0 0 ${W} ${H}`);

createPath();

function getPoint(){
    let x = getRandomNumber(W*0.6) + W*0.2;
    let y = getRandomNumber(H*0.6) + H*0.2;
        
    let point = [x,y];

    if(lastTwoPoints.length < 2){
        lastTwoPoints.push(point);
    } else {
        if(getAngle(...lastTwoPoints, point) < MIN_ANGLE
            || getDistance(lastTwoPoints[1],point) < MIN_DISTANCE
            || getDistance(lastTwoPoints[1],point) > MAX_DISTANCE){
            point = getPoint();
        } else {
            lastTwoPoints.shift();
            lastTwoPoints.push(point);
        }
    }
    return point;
}

function pointString(){
    let point = getPoint();
    return `${point[0]} ${point[1]} `;
}

function getDistance(pointA, pointB){
    return Math.sqrt((pointA[0] - pointB[0])**2 + (pointA[1] - pointB[1])**2);
}

function getAngle(pointA, pointB, pointC){ // angle in pointB
    let a = getDistance(pointA, pointB);
    let b = getDistance(pointB, pointC);
    let c = getDistance(pointC, pointA);
    return Math.acos((a*a + b*b - c*c)/(2*a*b))*(180/Math.PI);
}

function createPath() {

    let path_string = `M ${pointString()} C ${pointString()} ${pointString()} ${pointString()}`;

    for( let i = 0; i < 100; i++  ) {
      path_string += `S ${pointString()} ${pointString()} `
    }
    
    path.setAttribute('d', path_string);
}


function getRandomNumber(max) { return Math.floor( Math.random() * max ); }
<svg fill="none" stroke="black" viewbox="0 0 600 200">
    <path d=""/>
</svg>

Переработка вопроса и попытки ответа на enSo.

7
  • Что-то я не пойму откуда берутся точки. Чистый рандом? Хочется просто рандомную кривую?
    – Alexey Ten
    25 июл 2021 в 4:27
  • Да все точки рандомные, первые две записываются в lastTwoPoints как есть, а каждая следующая проверяется относительно двух записанных. И если удовлетворяет условию, то следующая точка помещается в массив из двух, вытесняя первую. В общем то не важно, что они рандомные. Главное: как проанализировать кривую, имея в распоряжении начальные, конечные и контрольные точки кубических Безье. И не понятно, где ошибка в моей логике. В подавляющем числе случаев все работает, но иногда и нет. Почему?
    – Leonid
    25 июл 2021 в 5:49
  • @Leonid: тут ещё один нюанс - так как всё это параметрика и векторы, а используются кривые, то при увеличении масштаба, может быть так, что острые заломы сгладятся. И наоборот при уменьшении - то, что казалось плавным, станет острым.
    – UModeL
    25 июл 2021 в 6:14
  • Такое может быть, но для этого я и установил минимальные расстояния между контрольными точками, чтобы в масштабе "нашего зрения" не было кажущихся изломов (?). И меня беспокоит другой факт, почему при указании, скажем 80, 90, 120 градусов, за редким исключение процесс падает. Хотя при 90 градусах в обе стороны - вероятность 0.5 примерно для рандомной точки. Минимальные и максимальные расстояния отключаю при этом, они не влияют. Мне кажется где-то ошибка там спряталась. Саму работу функции getAngle я проверял отдельно, вроде, работает.
    – Leonid
    25 июл 2021 в 6:26
  • Хотя, может быть это позиционное явление. Например, последняя точка зажата в углу, предпоследняя под 45 градусов ближе к центру. Вот функция и не может найти нужную следующую точки и входит в бесконечный цикл. То есть, максимальный угол, который будет работать стабильно 44градуса только. Все остальные варианты загоняют алгоритм в ловушку. При 60 более и менее, а при 90 любой последний вектор, перпендикулярный и направленный на границу холста, и лежащий впритык к этой границе, будет вызывать бесконечный цикл поиска другой точки.
    – Leonid
    25 июл 2021 в 6:33

0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Посмотрите другие вопросы с метками или задайте свой вопрос.