# Advice regarding reading .mat file in p5.js

**URL:** <https://discourse.processing.org/t/advice-regarding-reading-mat-file-in-p5-js/38437>\
**Category:** Project Guidance\
**Created:** [August 21, 2022, 8:14am UTC](https://discourse.processing.org/t/advice-regarding-reading-mat-file-in-p5-js/38437 "2022-08-21T08:14:14Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![ramith](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/ramith/32/16833_2.png) [@ramith](https://discourse.processing.org/u/ramith)\
**Post date:** [August 21, 2022, 8:14am UTC](https://discourse.processing.org/t/advice-regarding-reading-mat-file-in-p5-js/38437/1 "2022-08-21T08:14:14Z")

</div>

Hi !  
A js newbie here…  
I’m trying to read a .mat file through p5.js  
I found this [library](https://github.com/KovacsGG/mat4js), but cannot quite integrate it with p5.js

Any pointers would be really helpful.

Thanks!!

---

<div class="post-metadata">

**Author:** ![mnse](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mnse/32/16520_2.png) [@mnse](https://discourse.processing.org/u/mnse)\
**Post date:** [August 21, 2022, 9:32am UTC](https://discourse.processing.org/t/advice-regarding-reading-mat-file-in-p5-js/38437/2 "2022-08-21T09:32:31Z")

</div>

Hi @ramith,

Just add the lib to your main html as described here…

> **[GitHub - KovacsGG/mat4js: JavaScript library to load Matlab Level 5 MAT-files...](https://github.com/KovacsGG/mat4js#via-script-tag)**
>
> JavaScript library to load Matlab Level 5 MAT-files as JavaScript objects and vice versa - GitHub - KovacsGG/mat4js: JavaScript library to load Matlab Level 5 MAT-files as JavaScript objects and vi...

Afterwards you can use it as here…

> **[GitHub - KovacsGG/mat4js: JavaScript library to load Matlab Level 5 MAT-files...](https://github.com/KovacsGG/mat4js#read)**
>
> JavaScript library to load Matlab Level 5 MAT-files as JavaScript objects and vice versa - GitHub - KovacsGG/mat4js: JavaScript library to load Matlab Level 5 MAT-files as JavaScript objects and vi...

To get the ArrayBuffer just use

> **[FileReader.readAsArrayBuffer() - Web APIs | MDN](https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsArrayBuffer)**
>
> The FileReader interface's
> readAsArrayBuffer() method is used to start reading the
> contents of a specified Blob or File. When the read
> operation is finished, the readyState becomes
> DONE, and the loadend is
> triggered. At that time, the...

Cheers  
— mnse

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [August 21, 2022, 12:40pm UTC](https://discourse.processing.org/t/advice-regarding-reading-mat-file-in-p5-js/38437/3 "2022-08-21T12:40:59Z")

</div>

> [@mnse](#):
>
> Just add the lib to your main html as described here…

An “index.html” example that remotely loads both mat4js & p5js libraries plus a local “sketch.js” file:

```auto
<script defer
  src=https://cdn.JsDelivr.net/gh/KovacsGG/mat4js/dist/mat4js.read.min.js>
</script>

<script async src=https://cdn.JsDelivr.net/npm/p5></script>

<script defer src=sketch.js></script>

```

---

<div class="post-metadata">

**Author:** ![ramith](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/ramith/32/16833_2.png) [@ramith](https://discourse.processing.org/u/ramith)\
**Post date:** [August 21, 2022, 2:13pm UTC](https://discourse.processing.org/t/advice-regarding-reading-mat-file-in-p5-js/38437/4 "2022-08-21T14:13:04Z")

</div>

Thank You @mnse & @GoToLoop !

I was able to read the mat file like this, and it worked 😃

```auto
let mat_result = []

function readFile(e) {
  console.log(e.target.files[0]);
  const file = e.target.files[0]
  let reader = new FileReader();

  reader.onloadend = function (e) {
      mat_result = mat4js.read(e.target.result);
  };

  reader.readAsArrayBuffer(file);

}

function setup() {
  angleMode(DEGREES); 

  input = createFileInput();
  input.position(0, 0);
  input.id('fileItem');
  input.changed(readFile);
}

```

only issue right now is that I get a warning as below. it works though

```auto
p5.min.js:3 
        Uncaught TypeError: o is not a function
    at e.onload (p5.min.js:3:528013)

```

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [August 21, 2022, 3:09pm UTC](https://discourse.processing.org/t/advice-regarding-reading-mat-file-in-p5-js/38437/5 "2022-08-21T15:09:06Z")

</div>

> [@ramith](#):
>
> ```auto
> p5.min.js:3 
> Uncaught TypeError: o is not a function
> at e.onload (p5.min.js:3:528013)
> 
> ```

In order to troubleshoot it you need to use the non-minimized version of [p5.js](https://cdn.JsDelivr.net/npm/p5/lib/p5.js):

```auto
<script defer
  src=https://cdn.JsDelivr.net/gh/KovacsGG/mat4js/dist/mat4js.read.min.js>
</script>

<script async src=https://Unpkg.com/p5/lib/p5.js></script>

<script defer src=sketch.js></script>

```

---

<div class="post-metadata">

**Author:** ![ramith](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/ramith/32/16833_2.png) [@ramith](https://discourse.processing.org/u/ramith)\
**Post date:** [August 21, 2022, 6:40pm UTC](https://discourse.processing.org/t/advice-regarding-reading-mat-file-in-p5-js/38437/6 "2022-08-21T18:40:21Z")

</div>

Thank you so much, finally i made it!