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

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:

(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

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:

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.

1 Like

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

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:latest

and found p5.wasm