question about p5js support

[jyg]

Hi,
I was just trying to use pd4web with p5js since 2 weeks with some results (https://jyg.github.io/carto_p5/webpatch/index.html, source code here https://github.com/jyg/carto_p5) and I just saw that you put an example in your readme file ("interaction with p5js").
Did you put any code somewhere related to this ?
I would be very interested !
Thanks and congrats for your work. It's a game changer for pd web-integration !

[charlesneimog]

Hi @jyg, thanks for using pd4web, if you find a bug, please report it...

Yes, there is an example, but I believe it is a different use, I was using it just to show a poem while people improvised. There are some hidden commands (like a, b, and c) to trigger the processes.

If you see the improvisation guide you will understand! https://charlesneimog.github.io/Projeto/.

• Here I define the Sketch div and load the puredata = https://github.com/charlesneimog/Projeto/blob/main/poemas/index.html#L25;

• Here is the sketch
  https://github.com/charlesneimog/Projeto/blob/main/poemas/mySketch.js#L1092

[jyg]

I have some other questions : Is it possible to place the audiostart button inside the p5js canvas, with a custom size and position ?

[charlesneimog]

1. @jyg it is implemented in version 1.2.3, not before that. You don't need to change helpers.js (also I changed it to main.js in version 1.2.3. In 1.2.3 I am starting the workaround midi in/out support, so if you had a personalized helpers.js you must copy and paste the things you had changed. (Sorry for that!).
2. You can place it anywhere you want, but it must have a listener event, and the id must be Start-Audio-Button. If you want to modify more things, check the JS_AddUIButtons function, this event

   pd4web/pd4web/src/main.js

   Lines 13 to 31 in 73a8f28

   	startButton.onclick = () => {
   	const iconElement = document.getElementById("SoundIcon");
   	if (iconElement.classList.contains("fa-volume-xmark")) {
   	for (var i = 0; i < iconElement.classList.length; i++) {
   	iconElement.classList.remove(iconElement.classList[i]);
   	}
   	iconElement.className = "fa-solid fa-volume-high fa-2x";
   	if (audioContext.state === "suspended") {
   	audioContext.resume();
   	}
   	audioWorkletNode.connect(audioContext.destination);
   	} else {
   	// sound is on
   	iconElement.className = "fa-solid fa-volume-xmark fa-2x";
   	if (audioContext.state === "running") {
   	audioContext.suspend();
   	}
   	}
   	};

   .

Be careful, because the function JS_AddUIButtons is called from web assembly, errors on it can be a nightmare.

You will should remove things like iconElement.className = "fa-solid fa-volume-high fa-2x";

[jyg]

I will study this deeper. For now, I had to fix the issue that if you send messages from script to pd before audio is in function, you can freeze the script. I resolved it by checking if the audio button icon is 'fa-spinner', but I don't know if that is the more elegant way.
However, for now I have a rather satisfying and functional webpatch. Thanks a lot !
By the way, I had to limit delay~ lines in order to avoid out-memory errors. I'll check it more deeply and send you a report.

[charlesneimog]

Great, pd4web should not send anything to Pd if the audio is off, you can check the global variable pdIsInitialized.

PS.: I am migrating all these things to PdModule, I will take a look for this to work better.

About the delay~ lines, have you tried to use the --initial-memory flag?

https://charlesneimog.github.io/pd4web/patch/#pd4web-command-line

[jyg]

Thanks a lot for all those tips.
I'll check delay lines and --initial-memory flag.
One thing that I don't understand : If you compile pdlib in webassembly, wouldn't it be possible to do dynamic patching ?
I can understand that with projects such as hvcc, it is not possible. But here we are in another case, or am I wrong ?

[charlesneimog]

Yes, it is already possible using this website:

https://purrdata.glitch.me/

But it just allow to use externals that are already compiled (I love externals hehe). So it could be great for students/teaching, but when we start to use things more personalized it is hard.

pd4web is based on this work, but I changed the audio backend (from SDL to WebAudio) and I am trying to keep more simple possible.