Как в svg.js реализовать такое?

Question

[leni_m]

<div id="drawing"></div>
    <script>
        var points = {
            'A' : [50, 50],
            'B' : [1200, 50],
            'C' : [625, 500]
        },
            firstPoint = [(getRandom(50, 1200)), (getRandom(50, 500))],
            draw = SVG('drawing').size(1200, 500),
            group = draw.group();
        point = firstPoint;
        for (let i = 0; i<100000; i++) {
            nextPoint(point);
        }
        
        //group.animate({ ease: '<', delay: '1.5s', duration: 5000 }).rotate(180).skew(25, 0);
        
        
        function whatPoint() {
            switch (getRandom(1, 3)) {
                case 1 : return "A";
                case 2 : return "B";
                case 3 : return "C";
            }
        }
        function nextPoint(previousPoint) {
            var what = points[whatPoint()];
            point = [(previousPoint[0] + what[0])/2, (previousPoint[1] + what[1])/2];
            group.add(draw.circle(1).fill("#000").move(point[0], point[1]));
        }
        function getRandom(min, max) {
            return Math.floor(Math.random() * (max - min + 1)) + min;
        }
    </script>

Скажите, может ли он ставить по одной точке и показывать? А не грузиться и только потом все точки показывать?

Answer 1

[0xD34F]

Скажите, может ли он ставить по одной точке и показывать?

Можно, только наверное не по одной - скажем по 100 за раз. Показали часть точек - setTimeout на показ следующей части. Типа так:

const getRandom = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;

const NUM_POINTS = 100000;

const BASE_POINTS = [
  [ 50, 50 ],
  [ 1200, 50 ],
  [ 625, 500 ],
];

const draw = SVG('drawing').size(1200, 500);
const group = draw.group();

let currPoints = 0;
let point = [ (getRandom(50, 1200)), (getRandom(50, 500)) ];

function nextPoint(previousPoint) {
  const basePoint = BASE_POINTS[getRandom(0, BASE_POINTS.length - 1)];
  point = [ (previousPoint[0] + basePoint[0]) / 2, (previousPoint[1] + basePoint[1]) / 2 ];
  group.add(draw.circle(1).fill('#000').move(point[0], point[1]));
}

(function next() {
  if (currPoints < NUM_POINTS) {
    for (let i = 0; i < 100; i++, currPoints++) {
      nextPoint(point);
    }

    setTimeout(next, 50);
  }
})();

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

<div id="drawing"></div>