如何绘制一个位置并一次绘制一个圆圈,而不是一系列位置?

时间:2019-02-18 23:20:56

标签: database mapping data-visualization p5.js

我想一次映射一个位置,一次绘制一个圆,而不是整个位置阵列。我不想一次绘制整个位置数组,而是想遍历每个位置,以便它成为一个延时动画。

我尝试过:

  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();

             }
  }         
          }
        }
  }

  }

1 个答案:

答案 0 :(得分:0)

您想要创建一个新变量来跟踪当前绘制圆的索引的声音。然后,您可以随着时间(可能是每帧)更改该索引,以更改绘制的圆。

尝试使用一个更简单的示例来使其工作。您可以创建一个包含3个硬编码位置的数组,并在这些位置之间循环吗?