Using loadTable with correct types in typescript with p5js

p5.js Libraries
1

I am loading a csv file using the p5.js function, loadTable in typescript. It seems that its not reading the csv file at all, maybe i am missing something in my approach. I have all the type definition in typescript for p5.js.

Here is the code, main.ts.


import * as p5 from "p5";


const plot_diagram = (p: p5) => {
  let data: p5.Table;

 p.preload = () => {
    const CSV_FILE: string = "./sample.csv";
    const CSV_TYPE: string = "csv";
    const CSV_HEADER: string = "header";

    data = (p as any).loadTable(CSV_FILE, CSV_TYPE, CSV_HEADER); //how to fix this?

    console.log("data ", data.getRowCount()); // shows wrong object.
  };
  
  p.setup = () => {
    p.createCanvas(640, 480);
    p.noFill();
    // how many rows?
    console.log("row ", data.getRowCount());
    // what are the columns?
    console.log("col ", data.columns);
  };
  p.draw = () => {
    p.background(200);

    p.beginShape();

    for (let i = 0; i < 5000; i++) {
      p.vertex(
        data.getNum(i, "row"),
        data.getNum(i, "col ")
      );
    }
    p.endShape();
  };
};

export default plot_diagram;
1 Like
2

Where’s that variable spectrum. Shouldn’t that be instead: export default plot_diagram;

Is “p5” path just enough? I had to use import * as p5 from "p5/index"; on my own TS sketch:

1 Like
3

Sorry for the mis type, it is,

export default plot_diagram

and i changed to

import * as p5 from "p5/index";

still no difference. The problem is line,

data = (p as any).loadTable(CSV_FILE, CSV_TYPE, CSV_HEADER);

that data is empty.

4

preload() is still too soon to check anything on data b/c it’s still loading.

Can you host your whole sketch on GitHub.com, Glitch.com or similar?

Here’s another online example:

1 Like
5

Thanks for the glitch link. I can look into. And good to know that preload is too soon.
Here is the whole repo.

just do yarn, yarn start. might ask you to install parcel.

6

Oh, that’s React! Sorry I still dunno much about it. :crying_cat_face:

Most I can do is take a look at your “spectrum.ts” file and make it work as it is w/o React: :face_with_monocle:


7

yes, spectrum.ts is the main file i am working on.
To get the project running, uncomment, //import sketch from “~sketch/circle”;
and comment import sketch from “~sketch/spectrum”;
That will give you some circles. The spectrum file is basically supposed to create a x-y plot.

8

Only thing that i am struggling with is to load csv in typescript and have the data var with csv values.
Rest i can manage. once i have data var, i can run data.getNum and other functions on it.

Only clue i got so far is from this SO answer, but that only works because there is a type called SoundFile.

https://stackoverflow.com/questions/56199144/how-to-use-p5-sound-in-typescript-node-js.
So what’s the work around to call

loadTable("./less.csv", "csv", "header");

in typescript with correct types?

9

Here is the another repo where i played with the idea of loading a csv file, it seems it does not work in typescript here too. github.com/suvirbhargav/p5js-typescript-fusebox

I added the code in sketch.ts in the above repo. Could it be that loadTable doesn’t work when running a local project? Perhaps i misunderstood its use case?

10

ah, i figure it out. The issue was not related to typescript. It was browser cors policy.
Perhaps a better error message is needed in loadTable function.

1 Like