如何在我的數據可視化項目中使圈子不重疊？ p5.j​​s

Question

對於我的大學項目，我將對數據（尤其是總體）進行可視化表示。 到目前為止，我將前50個國家/地區顯示為圓形，其大小與人口總數相關。 圓的位置是完全隨機的，因此，圓聚集並且數據難以理解。 我必須添加什么代碼才能使圓不重疊。 在此先感謝您，如果我錯過了一些細節，我很抱歉，我是編碼方面的初學者。

當前狀態的代碼。

    let population;
//The preload function is executed before initializing the code in setup
//Loads any related data or media files
function preload() {

  population = loadJSON("worldpopulation.json");
}

function setup() {
  console.log(population); //Return all JSON data
  var canvas = createCanvas(1280, 720);

}

function draw(){
  noLoop();
  console.log(population[2].population / 1000000);
  for (let i=0; i<50; i++){
    let newSize = population[i].population / 3000000;
    let newPosX = random(1280);
    let newPosY = random(720);
    var r = newSize;
    fill(random(255), random(255), random(255));
    ellipse(newPosX, newPosY, newSize, newSize);
    fill(0);
    textAlign(CENTER);
    text(population[i].country, newPosX, newPosY-5);
    text(population[i].population, newPosX, newPosY+5);
  }

Answer 1

最簡單的方法可能是在創建圓時保留一組渲染的圓。 然后，僅將有效的（不重疊）添加到渲染層。

如果圓心之間的距離小於其半徑之和，則該圓與另一個圓重疊。 換句話說，如果圓2（具有中心（x2，y2）和半徑r2）滿足以下條件，則僅添加圓形2（具有中心（x1，y1）和半徑r1）。

（（x2-x1）^ 2 +（y2-y1）^ 2）^（1/2）>（r1 + r2）

如果不是，則將其丟棄並嘗試生成另一個。