Как создать случайные точки, сосредоточенные в определенной области в JS? - PullRequest
Новая
       74

Как создать случайные точки, сосредоточенные в определенной области в JS?

2 голосов
/ 06 февраля 2020

Нужна концептуальная помощь здесь. В настоящее время у меня есть функция случайных точек, которая создает два набора точек (оранжевых и синих), которые растягиваются по холсту. Но я ищу способ сконцентрировать плотность точек в случайных областях вокруг экрана.

Код выглядит примерно так: 

var createBlueDots = function () {
       for (var i = 0; i <=someRandomNum; i++) {
        context.beginPath();
        var rand_x = Math.random(i) * horz_max;
        var rand_y = Math.random(i) * vertical_max;
        context.arc(rand_x, rand_y, radius, 1, 2*Math.PI);
        context.fillStyle ="#0855A2";
        context.fill();
        context.closePath();   
        }
    }
createBlueDots();

... который в сочетании с другой функцией OrangeDot создает что-то вроде этого: image of random dots over a canvas

... но как мне создать серию точек, которые сосредоточены вокруг одной или нескольких областей экрана? Что-то еще подобное?

concentrated dot area

Будут признательны даже за концептуальные советы. Спасибо.

1 Ответ

3 голосов
/ 06 февраля 2020

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

// dot count
const dots = 500;
// center point
const center = { x: 100, y: 100 };
// max distance from the center
const radius = 150;
// centripetal force, the larger it gets the more concentrated the dots are
const centripetal = 2.5;

const context = document.querySelector('canvas').getContext('2d');

var createBlueDots = function () {
	for (var i = 0; i <= dots; i++) {
		context.beginPath();
		const dist = (Math.random() ** centripetal) * radius;
		const angle = Math.random() * Math.PI * 2;
		var rand_x = dist * Math.cos(angle) + center.x;
		var rand_y = dist * Math.sin(angle) + center.y;
		context.arc(rand_x, rand_y, 2, 1, 2 * Math.PI);
		context.fillStyle = "#0855A2";
		context.fill();
		context.closePath();
	}
}

createBlueDots();
<canvas width="200" height="200"></canvas>
...