p5.j​​s只加载一次JSON吗?

时间:2018-10-14 20:21:57

标签: javascript p5.js

问题描述

使用带有回调的loadJSON()加载数据会不断重复加载输入数据文件。容器中的项目数量持续增长,浏览器速度减慢,直到内存不足。

预期结果

在完全读取输入数据后,请停止使用loadJSON()加载数据。

FILELIST.json中的示例内容

例如,数据仅包含14个JSON条目的数组(现在仅使用BYTES作为椭圆大小)

{"BYTES":"97488","MONTH":"sep","DAY":"01","YEAR":"2018","PATH":"./addons/p5.dom.js"},

其中的每一个在异步加载后都绘制为椭圆形。

var framerate = 2;
var containers = [];
var canvas_x = 700
var canvas_y = 500
var container_largest = 0;

function setup() {
  createCanvas(canvas_x,canvas_y);
  setInterval(getData,1000);
}

function getData() {
  loadJSON("../FILELIST.json", gotData);
}

function gotData(data) {
  spaceData = data;
  console.log(data);
  // Handle new data
  for (var i = 0; i < spaceData.length; i++) {
      bytes = spaceData[i].BYTES;
      if (bytes > 0) {
        containers.push(new Container(bytes));
      }
      if (bytes > container_largest) {
        container_largest = bytes;
      }
    }
}

function draw() {
  background(0);
  frameRate(framerate)

  // Run all containers
  for (var i = 0; i < containers.length; i++) {
    containers[i].run(containers);
  }
}

function Container(size) {
    this.size = size;
    //console.log(size);
}

Container.prototype.run  = function(containers) {
  this.render();
}

Container.prototype.render = function() {
  fill(255);
  rel_size = int(this.size/container_largest);
  rel_size = int(canvas_x / (rel_size*containers.length));
  ellipse(random(canvas_x) ,random(canvas_y), rel_size, rel_size);
}

0 个答案:

没有答案