@Mihail900

Как написать условие генерация точек внутри эллипса?

Как написать условие, чтобы точки генерировались внутри эллипса?


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<canvas style="border: 1px solid grey" id="canvas"></canvas>
</body>
</html>

const WIDTH = 300;
const HEIGHT = 300;
const canvas = document.getElementById('canvas');
canvas.width = WIDTH;
canvas.height = HEIGHT;

const ctx = canvas.getContext('2d');

const n = 10;


function getRandom(min, max) {
    return Math.floor(Math.random() * (max - min)) + min;
}

ctx.beginPath();
ctx.ellipse(100, 100, 50, 90, Math.PI / 2, 0, 2 * Math.PI);
ctx.stroke();


for (let i = 0; i < n; i++){
   let x = getRandom(50,150);
   let y = getRandom(50,150);
   ctx.rect(x, y, 2,2);
   ctx.stroke();
}
  • Вопрос задан
  • 275 просмотров
Решения вопроса 1
0xD34F
@0xD34F
Сгенерировали одну координату, через уравнение эллипса нашли ограничения для второй, сгенерировали вторую.

const WIDTH = 300;
const HEIGHT = 300;
const canvas = document.getElementById('canvas');
canvas.width = WIDTH;
canvas.height = HEIGHT;

const ctx = canvas.getContext('2d');

const
  X = 100,
  Y = 100,
  A = 90,
  B = 50;

const
  N = 1000,
  SIDE = 4,
  HALF_SIDE = SIDE / 2;

const rand = (min, max) => Math.random() * (max - min) + min;

ctx.beginPath();
ctx.ellipse(X, Y, B, A, Math.PI / 2, 0, 2 * Math.PI);
ctx.stroke();

for (let i = 0; i < N; i++) {
  const
    x = rand(-A + HALF_SIDE, A - HALF_SIDE),
    maxAbsY = (B - HALF_SIDE) / A * Math.sqrt(A * A - x * x),
    y = rand(-maxAbsY, maxAbsY);

  ctx.beginPath();
  ctx.rect(x + X - HALF_SIDE, y + Y - HALF_SIDE, SIDE, SIDE);
  ctx.stroke();
}

https://jsfiddle.net/rLcuy4ko/
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы