如何创建集中在 JS 特定区域的随机点？

Question

这里需要一些概念上的帮助。目前，我有一个随机点函数，它可以创建两组散布在 canvas 上的点（橙色和蓝色）。但我正在寻找一种将点密度集中在屏幕周围随机区域的方法。

代码基本上是这样的：

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 函数结合使用时，会创建如下内容：

...但是如何创建一系列集中在屏幕一个或多个区域周围的点？还有更像这样的吗？

即使只是概念性提示，我们也将不胜感激。谢谢你。

Answer 1

您可以使用指数函数来确定具有某个随机角度的距离来实现此目的。

// 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>

如何创建集中在 JS 特定区域的随机点？

How do I create random dots concentrated in a particular area in JS?

javascript

random

math

dotspatial