Question

我已映射出数据，我想分离数组：data [6]，以便依次映射和绘制每个索引。例如，绘制索引0，第一个圆，然后消失，然后绘制索引1，依此类推。

我试图使用计时器功能，但它仍然可以一次绘制它们。我曾尝试将代码放入设置和绘制中，但这没有什么区别。我是p5.js的新手，所以将不胜感激。

var cities;

var lat = 0;

var lng = 0;

var clat = 0;
var clng = 0;

var zoom = 2;

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

}

function setup() {
createCanvas(1980, 1020);
  translate(width/2, height/2);
  imageMode(CENTER);

}

function draw(){


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[4];
        var lng = data[5];
        var victims = data[6];

        victims = pow(10, 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, 0, 100);



        stroke(0, 0, 255);
        fill(0, 0, 255, 10);
        ellipse(x, y, d, d);


}



function mercX(lng) {
  //sets unit of measurement as radian, not degrees
  lng = radians(lng);
var a = (256 / PI) * pow(2, zoom);
  var b = lng + PI;
  return a * b;
}

function mercY(lat) {
   //sets unit of measurement as radian, not degrees
  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;
}


}

Answer 1

我要解决的方法是处理preload()函数中的数据，然后使用framerate()控制草图的速度。 draw()函数每秒被调用60次，并且每次绘制椭圆 all ；如果您要告诉它一次绘制一个，则需要一个控制变量。

看看这个草图。

let circles = [];

function preload(){
  // DATA HANDLING (Just some random circles)
  for(let i = 0; i < 10; i++){
    circles[i] = {
      radius:random(1, 20),
      x:random(0, 500),
      y:random(0, 200),
      color:[random(0, 255), random(0, 255), random(0, 255)]
    };
  }
}

function setup(){
  createCanvas(500, 200);
  frameRate(1);
}

// CONTROL VARIABLE
let currentlyDrawn = 0;

function draw(){
  if(currentlyDrawn < circles.length){
    // ERASE PREVIOULSY DRAWN CIRCLE
    clear();
    let c = circles[currentlyDrawn];
    fill(c.color);
    circle(c.x, c.y, c.radius);
    currentlyDrawn++;
  }else{
    noLoop();
  }
}

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

我想一次绘制一个数组数据[6]的每个映射索引

1 个答案: