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
- a box2d wasm sketch 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.js Web Editor
- simplified version: p5.js Web Editor - without the additional normal P5 flocking code showing.
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.