用点填充一个圆，使用偏向圆的边缘

Question

这就是我想要实现的目标

到目前为止，我对自己的代码很满意，从 Wolfram 借用了一些数学知识。

但我不知道如何整合一些偏差计算，或者只是一种随机分配但有点组织的方法！

谁能给我指出正确的方向？

这是我的代码，它将运行在浏览器中使用 P5

var numDots = 3000;
var dotSize = 1.5;
var dotCoordinates = [];
var randomHue;
var xoff = 0;
var fps = 30;

function setup() {
  createCanvas(600,600);
  ellipseMode(CENTER);
  colorMode(HSB,360,100,100);
  randomHue = random(360);
  frameRate(fps);

  for(i=0; i < numDots; i++) {
    var rnd = map(noise(xoff),0,1,0,width);
    var R = 300; //circle radius
    var a = random(rnd) * TWO_PI; //random angle

    // var r = R * noise(rnd);      // donuts
    // var r = R * noise(random());   // dust rings
    // var r = R * random(noise(rnd));  // starburst
    var r = R*0.6 * sqrt(random());   // solid

    var x = width/2 + r * cos(a);
    var y = height/2 + r * sin(a);  
    result = createVector(x,y);
    dotCoordinates.push(result);
    xoff += 0.001;
  }    

}

function draw() {
  background(randomHue,100,10);
  noStroke();

  for(i=0; i < dotCoordinates.length; i++) {  
    fill(randomHue,50,80);
    ellipse(dotCoordinates[i]['x'], dotCoordinates[i]['y'], dotSize, dotSize);
  }

}

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

Answer 1

你想做的事让我想起了 Poincare disk model。你可以做的是随机选择一个点到圆盘中心的双曲距离，h，然后使用转换r = tanh(h/2)将其转换为距中心的欧几里德距离。概念验证：

function setup() {
  createCanvas(250, 250);
  background(0);
  noStroke();
  fill(255);
  noLoop();
}

function draw() {
  translate(width / 2, height / 2);
  for (let i = 0; i < 5000; i++) {
    let theta = random(0, TWO_PI);
    let h = randomGaussian(3.3); //experiment with different means
    let r = (exp(h) - 1) / (exp(h) + 1);
    let x = width / 2 * r * cos(theta);
    let y = height / 2 * r * sin(theta);
    ellipse(x,y,1,1); 
  }
}

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

典型输出如下图所示。您可以在对 randomGaussian() 的调用中尝试不同的均值和标准差（默认值 1 除外）来调整外观。

用点填充一个圆，使用偏向圆的边缘

Populating a circle with dots, using bias towards the edge of the cirlcle

processing

plot

geometry

p5.js