P5 fails to load CSV tables and Images-CodePudding

Hi I am stuck in making a landing animation using P5 and WebGL using an array of images, served from a CSV file. I get the following error on my console that says

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

I noticed that when I use a different CSV file, then all the images seems to load and the animation is as expected. With this particular CSV file, even if it shares the same schema, the program doesnt seem to pick up the file or load its contents.

This is my P5 script

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

Any help or alternative approaches will be greatly appreciated Thank you

CodePudding user response：

Give that your issue is occurring only for some CSVs it seems likely that there is a problem with that particular list of images, or one of the images in that list. However, one thing you should do is to make your loadImage calls in the callback of the loadTable function. This will cause the image loading to also be included in the preload step for your sketch:

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