P5 无法加载 CSV 表格和图像

Question

您好，我一直在使用 P5 和 WebGL 使用图像数组制作着陆动画，这些图像来自 CSV 文件。我在控制台上收到以下错误消息

Uncaught TypeError: Cannot read properties of undefined (reading 'gifProperties')

我注意到当我使用不同的 CSV 文件时，所有图像似乎都已加载并且动画效果符合预期。对于这个特定的 CSV 文件，即使它共享相同的架构，程序似乎也不会获取文件或加载其内容。

这是我的P5脚本

let imgs = [];
let imgs_arr = [];
let num = 45;

function preload() {
  table = loadTable('./assets/2021.csv', 'csv', 'header')
  console.log(table)
}

function processCSV(csv) {
  let imgLinks = [];
  csv.getColumn('key').forEach((e,i) => {
    let link = `./projects/2021/${e}/${e}-project.jpg`
    imgLinks[i] = loadImage(link)
  }); 
    return imgLinks
}

function setup() {
  let studentImages = processCSV(table)
  // console.log(studentImages);
  createCanvas(windowWidth, windowHeight, WEBGL);
  colorMode(HSB, 360, 100, 100, 100);
  for (let i = 0; i < num; i++) {
    let x = random(-width , width);
    let y = random(-height, height);
    let z = random(-width*5, width);
       let texture = new Type(studentImages[i], x, y, z)
      imgs_arr.push(texture);
  }
}

function draw() {
  background(0,0,0);
  orbitControl();
  for (let i = 0; i < num; i++) {
    imgs_arr[i].update();
    imgs_arr[i].display();
  }
}

class Type {
  constructor(_img, _x, _y, _z) {
    this.img = _img;
    this.x = _x;
    this.y = _y;
    this.z = _z;
  }

  update() {
    this.z += 5;
    if(this.z > width/2){
        this.z = -width*5;
    }
  }
    

  display() {
    push();
    translate(this.x, this.y, this.z);
    texture(this.img)
    image(this.img, 50, 50);
    if (window.screen.width < 767) {
      this.img.resize(100,100)
    }

    pop();
  }
}

任何帮助或替代方法将不胜感激谢谢

Answer 1

鉴于您的问题仅发生在某些 CSV 文件中，因此该特定图像列表或该列表中的图像之一似乎有问题。但是，您应该做的一件事是在 loadTable 函数的回调中进行 loadImage 调用。这将导致图像加载也包含在草图的预加载步骤中：

let imgs = [];
let imgs_arr = [];
let num = 45;

let table;
let studentImages;

function preload() {
  table = loadTable(
    './assets/2021.csv',
    'csv',
    'header'
    () => {
      console.log(table);
      studentImages = processCSV(table)
    }
  );
}

function processCSV(csv) {
  let imgLinks = [];
  csv.getColumn('key').forEach((e,i) => {
    let link = `./projects/2021/${e}/${e}-project.jpg`
    imgLinks[i] = loadImage(link)
  }); 
  return imgLinks
}

function setup() {
  // console.log(studentImages);
  createCanvas(windowWidth, windowHeight, WEBGL);
  colorMode(HSB, 360, 100, 100, 100);
  for (let i = 0; i < num; i++) {
    let x = random(-width , width);
    let y = random(-height, height);
    let z = random(-width*5, width);
    let texture = new Type(studentImages[i], x, y, z)
    imgs_arr.push(texture);
  }
}

function draw() {
  background(0,0,0);
  orbitControl();
  for (let i = 0; i < num; i++) {
    imgs_arr[i].update();
    imgs_arr[i].display();
  }
}

class Type {
  constructor(_img, _x, _y, _z) {
    this.img = _img;
    this.x = _x;
    this.y = _y;
    this.z = _z;
  }

  update() {
    this.z += 5;
    if(this.z > width/2){
        this.z = -width*5;
    }
  }
    

  display() {
    push();
    translate(this.x, this.y, this.z);
    texture(this.img)
    image(this.img, 50, 50);
    if (window.screen.width < 767) {
      this.img.resize(100,100)
    }

    pop();
  }
}

P5 无法加载 CSV 表格和图像

P5 fails to load CSV tables and Images

csv

dom

webgl

p5.js