Как нанести на карту одно местоположение и нарисовать один круг за раз, вместо множества мест?

Question

Я хочу нанести на карту одно местоположение за раз, рисуя один круг за раз вместо всего массива местоположений.Вместо того, чтобы рисовать весь массив локаций одновременно, я хочу циклически проходить по каждой локации, чтобы она стала замедленной анимацией.

Я пробовал:

1. функции таймера;
2. клавиша нажата;

3. создание эллипсов в функции конструктора;

   и лучшее, что я могу получить, - это все круги одновременно.

var cities;
var lat = 0;
var lng = 0;
var clat = 0;
var clng = 0;
var zoom = 1;



function preload(){
    cities = loadStrings('shooting_data.csv');

}

function mercX(lng) {
      lng = radians(lng);
      var a = (256 / PI) * pow(2, zoom);
      var b = lng + PI;
      return a * b;
}

function mercY(lat) {
      lat = radians(lat);
      var a = (256 / PI) * pow(2, zoom);
      var b = tan(PI/4 + lat/2);
      var c = PI - log(b);
      return a * c;
}


function setup() {
  createCanvas(1980, 1020);

} 

  function draw() {
      translate(width/2, height/2);
      imageMode(CENTER);
      frameRate(10);


      var x = [];
      var y = [];
      var d = [];

        var cx = mercX(clng);
        var cy = mercY(clat);

        for (var i = 0; i < cities.length; i++) {
        var data = cities[i].split(/,/);
//        console.log(data);

        var lat = data[1];
        var lng = data[2];
        var victims = data[3];

        victims = pow(5, victims);
        victims = sqrt(victims);

            var victimsmax = sqrt(pow(5, 5));
            var x = [mercX(lng) - cx];
            var y = [mercY(lat) - cy];
            var d = [map(victims, 1, victimsmax, 10, 100)];

//            for (z = 0; z < x.length; z++) {
//            console.log(d[0]);
            var shotsFired = [lat, lng, victims];
            if ( mouseIsPressed == true){ 

          for ( var a = 0; a < x.length; a++){
          for( var b = 0; b < y.length; b++){
          for ( var c = 0; c < d.length; c++){       



            fill(255, 0, 0, 1);
            stroke(255, 0, 0);
            ellipse(x[a], y[b], d[c], d[c])
          }
           if  (mouseIsPressed == false){

                 noFill();
                 clear();

             }
  }         
          }
        }
  }

  }

Answer 1

Звучит так, будто вы хотите создать новую переменную, которая отслеживает индекс текущего нарисованного круга.Затем вы можете изменить этот индекс с течением времени (возможно, каждый кадр), чтобы изменить, какой круг нарисован.

Попытайтесь заставить это работать на более простом примере.Можете ли вы создать массив из 3 жестко запрограммированных позиций и прокрутить их?