多个圆围绕2点打包

Question

嗨，我正在尝试构建包含数千个圆圈的交互式图表。 SVG 和 canvas 在性能方面并不好 我发现出于性能原因，P5 JS 或 WebGL 是一个很好的解决方案。 不幸的是，我是 P5 的新手，我试图在 Canvas 中找到与此示例类似的示例 https://codepen.io/hey-nick/pen/xbONzg 但是在 P5 上

`function CirclePacking(canvas) {
    this.canvas = canvas;
    this._ctx = this.canvas.getContext("2d");
    this._circles = [];
  this.canvas.width = window.innerWidth;
  this.canvas.height = window.innerHeight;
    
    var self = this;
  var intervalCounter = 0;
    var intervalStop = circleCount * 2; // pretty arbitary, but it works

  
    var interval = setInterval(function(){
    self.enterFrame();
    
   /* if (++intervalCounter === intervalStop) {
       // positioning is now complete
       clearInterval(interval);
    }*/
    
  }, 1000/60);

}`

我有大约 10K 个大小相同的圆圈可以很好地分组（使用圆圈包装）在页面上的 2 个位置的圆圈中。像这样

你能指导我一些类似的教程或例子吗？

提前谢谢你

我试过 Canvas，但在 1000 圈之后，它开始真正降低性能