P5無法加載CSV表和影像

嗨，我卡在使用使登陸影片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();
  }
}

任何幫助或替代方法將不勝感激謝謝

uj5u.com熱心網友回復：

假設您的問題僅出現在某些 CSV 上，那么該特定影像串列或該串列中的影像之一似乎可能存在問題。但是，您應該做的一件事是loadImage在loadTable函式的回呼中進行呼叫。這將導致影像加載也包含在草圖的預加載步驟中：

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

標籤：文件 dom 网页链接 p5.j​​s

上一篇：影像高度沒有變化

下一篇：如何卸載Redshift權限？