# Web Assembly (WASM) best practices for p5.js andeditor.p5js.org?

**URL:** <https://discourse.processing.org/t/web-assembly-wasm-best-practices-for-p5-js-andeditor-p5js-org/28111>\
**Category:** Project Guidance\
**Created:** [February 27, 2021, 10:48am UTC](https://discourse.processing.org/t/web-assembly-wasm-best-practices-for-p5-js-andeditor-p5js-org/28111 "2021-02-27T10:48:47Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![danbri](https://avatars.discourse-cdn.com/v4/letter/d/e99b99/32.png) [@danbri](https://discourse.processing.org/u/danbri)\
**Post date:** [February 27, 2021, 10:48am UTC](https://discourse.processing.org/t/web-assembly-wasm-best-practices-for-p5-js-andeditor-p5js-org/28111/1 "2021-02-27T10:48:47Z")

</div>

Hello!

_I spent a while making sure this post had lots of useful links, but couldn’t post it because new users only get 2 links. Which is fair enough but I feel I’m being needy if I just ask without trying to share what I found. So anyway my 2 links are:_

- [a GIST with all the other links still working](https://gist.github.com/danbri/5c4db17dba2fed2d75382e9bcd9fdd76)
- a [box2d wasm sketch](https://editor.p5js.org/danbri/sketches/VNxRKPPtk) that only works sporadically

(If you’re interested in this, look at the GIST above as there are some maybe useful links there)

I am trying to understand the most reliable way to call Web Assembly (WASM) code in an editor. p5js. org sketch. I couldn’t find any precedents or examples where others had done this, so I thought a thread here might help. For more on Web Assembly, see Mozilla + Wikipedia.

This involves fetching a .wasm file from a URL, and my problem seems to be that I haven’t found a pattern for delaying invocation of the P5 sketch code until the WASM part is ready.

The motivation for this is that WASM provides a way to exploit code written in other languages, and can also sometimes help with performance. My particular interest is to explore using the box2d/liquidfun physics engine this way, but hopefully a shared template could work for other uses.

I made an example yesterday that seems to sometimes work, and sometimes not. Friends report it works fine, and I see it working ok on iOS browsers. It is also fine in Chrome on Chromebook when used in an incognito window. However, when I am logged in to editor. p5js. org the WASM demo fails and I see an error, and often a warning. The unpredictability of this makes me think it’s a timing issue. It would be fantastic to have a simple template people can use for WASM-based sketches that avoids this.

# Example sketch

- My main sketch: [p5 flock meets box2d-wasm-liquidfun test by danbri -p5.js Web Editor](https://editor.p5js.org/danbri/sketches/hWpLvdEB5)
- simplified version: [box2d-wasm-liquidfun test with flocking removed by danbri -p5.js Web Editor](https://editor.p5js.org/danbri/sketches/VNxRKPPtk) - without the additional normal P5 flocking code showing.

https://editor.p5js.org/danbri/sketches/hWpLvdEB5https://editor.p5js.org/danbri/sketches/VNxRKPPtk

The WASM file I’m using is served with HTTP headers for CORS and media type, i.e. “Access-Control-Allow-Origin: \*”, and “Content-Type: application/wasm”.

Looking around, I found there’s a distinction between global and local mode for creating P5 sketches. Also that there’s a p5.wasm project that uses Javascript Promises to address the loading problem (with both global and local examples).

# Errors / Warnings

When logged in to the p5js editor, after a recent edit, I see:

`Uncaught TypeError: Cannot read property 'split' of undefined (: line 61)`

…and sometimes also one or more of these:

```auto
still waiting on run dependencies: 
dependency: wasm-instantiate 
(end of list) 

```

I have only explored this in the online p5js so far, and am not quite yet whether these are P5.js or P5jseditor issues. I’d be happy to put more time into this if folks with more p5js/p5jseditor experience can nudge me in the right direction.

---

<div class="post-metadata">

**Author:** ![danbri](https://avatars.discourse-cdn.com/v4/letter/d/e99b99/32.png) [@danbri](https://discourse.processing.org/u/danbri)\
**Post date:** [February 27, 2021, 1:04pm UTC](https://discourse.processing.org/t/web-assembly-wasm-best-practices-for-p5-js-andeditor-p5js-org/28111/2 "2021-02-27T13:04:09Z")

</div>

If/when it works, the output looks like this:

> <https://twitter.com/danbri/status/1365305840656408581>
>
> Daniel Shiffman @shiffman

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [August 18, 2021, 10:54pm UTC](https://discourse.processing.org/t/web-assembly-wasm-best-practices-for-p5-js-andeditor-p5js-org/28111/3 "2021-08-18T22:54:07Z")

</div>

Hi @danbri, apologies for this very, very belated response. Did you ever arrive at any “best practices?”

Aso, I’m not sure if you searched the forum for other WASM discussions

[https://discourse.processing.org/search?q=WASM%20order%3Alatest](https://discourse.processing.org/search?q=WASM%20order%3Alatest)

and found p5.wasm

> [@New addon library - p5.wasm](https://discourse.processing.org/t/new-addon-library-p5-wasm/16675):
>
> A new experimental addon library for p5.js written in Rust and compiled to WebAssembly: [https://github.com/limzykenneth/p5.wasm](https://github.com/limzykenneth/p5.wasm) Reimplements some of p5.js’ functions in WebAssembly. I should stress the “experimental” since in most cases, you are still better off using native p5.js functions instead of those provided by this addon library. However if you are interested in exploring Rust and/or WebAssembly, do checkout this project. Any questions feel free to open an issue on github, I don’t vis…

> **[GitHub - limzykenneth/p5.wasm](https://github.com/limzykenneth/p5.wasm)**
>
> Contribute to limzykenneth/p5.wasm development by creating an account on GitHub.