javascript - 如何在点周围的网格中绘制 "rhombus' ish"形状

Question

我在这个问题上苦苦挣扎了好几天，但我无法理解其背后的逻辑。我有一个 10x10 网格，其中 x = 5 y = 5 位置有一个正方形，如 image 中所示。 ...

我知道如何在范围= 2的正方形周围绘制，就像这样image .

代码示例:

const pos = {x: 5, y: 5};
const range = 2; // Range can vary
const square = [...] // Square is an array of positions like [{x: 0, y: 0}, {x: 1, y: 0} ...]

for ... {
    if (pos.x - range <= square[i].x && pos.x + range >= square[i].x &&
        pos.y - range <= square[i].y && pos.y + range >= square[i].y) {
        fill("red");
        square(square[i].x * 10,
           square[i].y * 10,
           10);
    }
}

我想要达到的效果is this one ，但我不知道如何实现它......

Answer 1

磁场到pos的距离必须小于range。创建嵌套循环并遍历每个字段。计算 x 和 y 方向的距离 (dx, dy)。使用abs计算绝对距离。评估 dx 和 dy 之和是否小于或等于 range:

for (let i = 0; i < 10; ++ i) {
    for (let j = 0; j < 10; ++ j) {
        let dx = abs(pos.x - i);
        let dy = abs(pos.y - j);

        if (dx + dy <= range) {
            fill(dx + dy == 0 ? "blue" : "red");
            rect(gx*i, gy*j, gx, gy);
        }
    }
}

参见示例:

function setup() {
    createCanvas(400, 400);
}

const pos = {x: 5, y: 5};
const range = 2;

function draw() {
   
    let gx = width / 10;
    let gy = height / 10;

    background((255, 255, 255));

    noStroke();
    for (let i = 0; i < 10; ++ i) {
        for (let j = 0; j < 10; ++ j) {
            let dx = abs(pos.x - i);
            let dy = abs(pos.y - j);
            
            if (dx + dy <= range) {
                fill(dx + dy == 0 ? "blue" : "red");
                rect(gx*i, gy*j, gx, gy);
            }
        }
    }

    noFill();
    stroke("black");
    for (let i = 1; i < 10; ++ i) {
        line(gx*i, 0, gx*i, height);
        line(0, gy*i, width, gy*i);
    }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.10.2/p5.js"></script>