Skip to content

在矩形内随机渲染点

js

以四边形重心为中心在周围随机渲染点

以四边形重心为中心在周围随机渲染指定数量的点,并且指定横向/纵向偏移范围,指定点与点之间的间距确保不重合

html

以不规则四边形为边界随机渲染点

js
/**
 * 生成四边形内部均匀分布的点
 * @param {Object[]} points - 四边形的顶点坐标数组 [{x: number, y: number}, ...]
 * @param {number} number - 需要渲染的点的数量
 * @returns {Object[]} 返回生成的点数组 [{x: number, y: number}, ...]
 */
function generatePointsInQuadrilateral(points, number) {
    if (points.length !== 4) {
        throw new Error("points 必须包含四个顶点");
    }

    // 将四边形分成两个三角形
    const [A, B, C, D] = points;

    // 将点分成两部分分别分布到两个三角形中
    const numPointsInTriangle1 = Math.floor(number / 2);
    const numPointsInTriangle2 = number - numPointsInTriangle1;

    const triangle1 = [A, B, C];
    const triangle2 = [A, C, D];

    // 生成三角形内部的点
    function generatePointsInTriangle(triangle, numPoints) {
        const [P1, P2, P3] = triangle;
        const result = [];

        for (let i = 0; i < numPoints; i++) {
            let r1 = Math.random();
            let r2 = Math.random();

            // 确保 r1 和 r2 的和小于等于 1,以保证点在三角形内
            if (r1 + r2 > 1) {
                r1 = 1 - r1;
                r2 = 1 - r2;
            }

            const x = P1.x + r1 * (P2.x - P1.x) + r2 * (P3.x - P1.x);
            const y = P1.y + r1 * (P2.y - P1.y) + r2 * (P3.y - P1.y);

            result.push({ x, y });
        }

        return result;
    }

    // 合并两个三角形的点
    const pointsInTriangle1 = generatePointsInTriangle(triangle1, numPointsInTriangle1);
    const pointsInTriangle2 = generatePointsInTriangle(triangle2, numPointsInTriangle2);

    return [...pointsInTriangle1, ...pointsInTriangle2];
}

// 示例使用
const quadrilateral = [
    { x: 0, y: 0 },
    { x: 10, y: 0 },
    { x: 8, y: 6 },
    { x: 2, y: 5 }
];
const numberOfPoints = 20;

const generatedPoints = generatePointsInQuadrilateral(quadrilateral, numberOfPoints);
console.log(generatedPoints);
/**
 * 生成四边形内部均匀分布的点
 * @param {Object[]} points - 四边形的顶点坐标数组 [{x: number, y: number}, ...]
 * @param {number} number - 需要渲染的点的数量
 * @returns {Object[]} 返回生成的点数组 [{x: number, y: number}, ...]
 */
function generatePointsInQuadrilateral(points, number) {
    if (points.length !== 4) {
        throw new Error("points 必须包含四个顶点");
    }

    // 将四边形分成两个三角形
    const [A, B, C, D] = points;

    // 将点分成两部分分别分布到两个三角形中
    const numPointsInTriangle1 = Math.floor(number / 2);
    const numPointsInTriangle2 = number - numPointsInTriangle1;

    const triangle1 = [A, B, C];
    const triangle2 = [A, C, D];

    // 生成三角形内部的点
    function generatePointsInTriangle(triangle, numPoints) {
        const [P1, P2, P3] = triangle;
        const result = [];

        for (let i = 0; i < numPoints; i++) {
            let r1 = Math.random();
            let r2 = Math.random();

            // 确保 r1 和 r2 的和小于等于 1,以保证点在三角形内
            if (r1 + r2 > 1) {
                r1 = 1 - r1;
                r2 = 1 - r2;
            }

            const x = P1.x + r1 * (P2.x - P1.x) + r2 * (P3.x - P1.x);
            const y = P1.y + r1 * (P2.y - P1.y) + r2 * (P3.y - P1.y);

            result.push({ x, y });
        }

        return result;
    }

    // 合并两个三角形的点
    const pointsInTriangle1 = generatePointsInTriangle(triangle1, numPointsInTriangle1);
    const pointsInTriangle2 = generatePointsInTriangle(triangle2, numPointsInTriangle2);

    return [...pointsInTriangle1, ...pointsInTriangle2];
}

// 示例使用
const quadrilateral = [
    { x: 0, y: 0 },
    { x: 10, y: 0 },
    { x: 8, y: 6 },
    { x: 2, y: 5 }
];
const numberOfPoints = 20;

const generatedPoints = generatePointsInQuadrilateral(quadrilateral, numberOfPoints);
console.log(generatedPoints);

根据点构成的二维数组上下左右链接顶点生成网格

js