Заполните круг точками, используя уклон к краю круга - PullRequest
0 голосов
/ 18 сентября 2018

Это то, чего я пытаюсь достичь

example of dot circle with bias towards edges

Пока что я доволен имеющимся у меня кодом, позаимствованным у Вольфрама и другого источника для математики.

Но я не могу понять, как интегрировать некоторые вычисления смещения или просто метод распределения того, что будет случайным, но отчасти организованным!

Кто-нибудь может указать мне правильное направление?

Вот мой код, который будет запускаться в браузере с использованием 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>

1 Ответ

0 голосов
/ 18 сентября 2018

То, что вы пытаетесь сделать, напоминает мне модель диска Poincare .Что вы можете сделать, это случайно выбрать гиперболическое расстояние , 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>

Типичный вывод показан ниже.Вы можете использовать различные средние и стандартные отклонения (кроме значения по умолчанию 1) в вызове randomGaussian(), чтобы настроить внешний вид.

enter image description here

...