Is there a way to load external scripts / other libraries

[TiborUdvari]

I would like to make a test with p5.xr among other libraries. Is there an official way to do this?

I'm thinking of doing something like this if not

function addScript(src) {
  const script = document.createElement('script');
  script.src = src;
  document.head.appendChild(script);
}

addScript("path/to/your/script.js");

[ffd8]

heyhey @TiborUdvari ! FYI it's already a built in feature! yeah yeah.. looooong readme...

let libs = [
    '' // path(s) to CDN or local if running OFFLINE mode
]

There's a small libs loading bug in the console.____ that's fixed in the upcoming version of P5LIVE (loong overdue) – however that's only caused an issue with ml5. I just tested it with p5.xr and the library loads fine, however it doesn't seem to work with the latest p5.js.. the examples used v1.5.0 (P5LIVE is using 1.9.0, 1.9.2 just game out last week). In the upcoming release, you can also customize which version of p5.js to use (disabling p5 and manually loading another CDN). I see that p5.xr stops working from 1.7.0+...

example loading p5.xr

Here's the code you'd use in the future P5LIVE version (soooon) to disable built in p5, then manually load an older version.

// p5.xr works with p5.js 1.5.0 - bug with latest 1.9+

// no p5 // disable latest version

let libs = [
	'https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/p5.min.js',
	'https://cdn.jsdelivr.net/npm/p5.xr/dist/p5xr.min.js'
	]
	
new p5(); // manually init p5
function preload() {
  createVRCanvas();
}

function setup() {
  setVRBackgroundColor(200, 0, 150);
  fill(0, 255, 0);
}

function calculate() {
  // Things you want to happen once per frame
}

function draw() {
  translate(0, 0, 10);
  rotateX(10);
  rotateY(20);
  
  box(5);
}

[TiborUdvari]

output.mp4

Thank you! I got it working directly in the headset. It does crash out of immersive mode sometimes, but I think this is the closest I got to have live coding in Mixed Reality.

p5.xr hasn't released the new version with the encoded fixes just yet. I have a fork that works, so for anyone with a XR headset this should work:

let libs = [
	'https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.1/p5.js',
	'https://cdn.jsdelivr.net/npm/@tiborudvari/p5.xr@0.4.67/dist/p5xr.js'
]

new p5(); // manually init p5
function preload() {
	createMRCanvas();
}

let r = 0;

function calculate() {
	r = frameCount / 100 * 1;
}

function draw() {
	push();
	scale(0.01); // use cm 
	push();
	translate(10, -11, -50)
	rotateX(r);
	box(10, 10, 10)
	pop();
	pop();
}

[ffd8]

badaaaamn – that looks awesome in the XR recording! Super cool it all works. 1st P5LIVE in VR that i know of..? there's a BIG ol update coming veeery soon (last touches right now) – would be great to add a demo for this – what else is needed? does the calculate() function come from the headset? or why not just calculate that directly where it's being used in the draw()? (the least code needed, the better for demos. Also curious if you need that outer push()/pop()? Or maybe a reset() would do the same if the matrix keeps scaling? Feel free to tweak for minimal/clear demo – in next version can remove the custom p5 version (will load latest) etc – and give a little header for what one needs to know for the demo (would be under hardware, either _hardware_headset or _hardware_xr?), ie:

/*
	_hardware_xr // cc _prefered_name/handle_ 2024
	_short description of setup/hardware/workflow_
*/

• would be ideal to CDN directly to the original repo, so hopefully that PR can be approved soon – or temporarily points to fork, then back to main project once updated.

[TiborUdvari]

The draw function is being called twice, one time for each eye. So any calculations there get updated twice. I'm actively doing tests / different versions to the API, before I update to upstream. It's not always clear what the p5 like api should be like.

For now I feel it's a little hardware specific, so it's kind of hard to have it be as plug and play as I would like it.

Anyways, I'm doing a small workshop with this soon, so I'll do a proper writeup of what is needed / how to use it with p5.live, I'll post it here once I'm done.

It's an ideal use case, because when people have the headset on there is no way of knowing what they are actually seeing ...

PS Doing small demos here in the meantime: https://www.tiborudvari.com/sketchbook