Как нарисовать фигуру «ромб sh» в сетке вокруг точки - PullRequest
Новая
       111

Как нарисовать фигуру «ромб sh» в сетке вокруг точки

1 голос
/ 29 января 2020

Я борюсь с этой проблемой в течение нескольких дней, и я не могу получить логику c за ней. У меня есть сетка 10x10 с квадратом в позиции x = 5 y = 5, как на изображении ...

Я знаю, как можно нарисовать вокруг этого квадрата с диапазоном = 2, как на этом изображении .

Код пример: 

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);
    }
}

Требуемый эффект, который я пытаюсь создать , это , но я понятия не имею, как мне его достичь ...

Ответы [ 2 ]

0 голосов
/ 29 января 2020

Расстояние от поля до 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>
0 голосов
/ 29 января 2020

Это решение - супер простой способ решения проблемы. Он включает использование массива, расположенного в сетке чисел 10 × 10. 0 на сетке представляют все позиции, где мы хотим нарисовать белые квадраты. 1 на сетке представляют все позиции, где мы хотим нарисовать красные квадраты. 2 на сетке представляют все позиции, где мы хотим нарисовать синие квадраты. Нет необходимости знать относительные значения точек x и y или значение диапазона. Все, что вам нужно сделать, это изменить положение 0, 1 и 2 на сетке, и функция нарисует нужный вам шаблон.

Код такой, как показано ниже: 

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="500" height="500" style="border:1px solid #d3d3d3;">
</canvas>

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d"); 
/* 
 * The grid is a 10 by 10 array of numbers. 
 * The 0s represent all the spots where you want a white square. 
 * The 1s represent all the spots where you want a red square.
 * The 2s represent all the spots where you want a blue square(the middle spot in this case)
 */  
var grid = 
[ 
    [0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,1,0,0,0,0],
    [0,0,0,0,1,1,1,0,0,0],
    [0,0,0,1,1,2,1,1,0,0],
    [0,0,0,0,1,1,1,0,0,0],
    [0,0,0,0,0,1,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0] 
];
function drawSquares(grid)
{ 
    grid.forEach((row,rowIndex) => 
    {
        row.forEach((square,squareIndex) => 
        {   
            switch(square)
            {
                case 1: //if the grid value is a 1, draw a red square
                    ctx.beginPath();
                    ctx.rect(50*squareIndex,50* rowIndex, 50, 50);
                    ctx.fillStyle = "red";
                    ctx.fill(); 
                    ctx.lineWidth   = "1";
                    ctx.strokeStyle = "black";  
                    ctx.stroke();
                    break;
                case 2: //if the grid value is a 2, draw a blue square
                    ctx.beginPath();
                    ctx.rect(50*squareIndex,50* rowIndex, 50, 50);
                    ctx.fillStyle = "blue";
                    ctx.fill(); 
                    ctx.lineWidth   = "1";
                    ctx.strokeStyle = "black";
                    ctx.stroke();
                    break;
                case 0: //if the grid value is a 0, draw a white square
                    ctx.beginPath();
                    ctx.rect(50*squareIndex,50* rowIndex, 50, 50);
                    ctx.fillStyle = "white";
                    ctx.fill(); 
                    ctx.lineWidth   = "1";
                    ctx.strokeStyle = "black";
                    ctx.stroke();
                    break; 
            } 
        }); 
    });   
}
drawSquares(grid);
</script>  
</body>
</html>

Вывод вышеуказанного кода выглядит следующим образом: enter image description here

Пример использования: 

//Example 1: 
//To achieve your second result,the grid is changed as follows:
var grid = 
[ 
    [0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0],
    [0,0,0,1,1,1,1,1,0,0],
    [0,0,0,1,1,1,1,1,0,0],
    [0,0,0,1,1,2,1,1,0,0],
    [0,0,0,1,1,1,1,1,0,0],
    [0,0,0,1,1,1,1,1,0,0],
    [0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0] 
];
drawSquares(grid);//after the function call, the result is as shown below

enter image description here

//Example 2: 
//To achieve your first result,the grid is changed as follows:
var grid = 
[ 
    [0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,2,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0] 
];
drawSquares(grid);//after the function call, the result is as shown below

enter image description here

...