Using external libraries in Studio is very much possible, it’s just not documented, and not everything works.
Generally speaking, anything that touches the canvas won’t work. Particles libraries that shows beautiful stuff on the screen won’t work, anything visual won’t work, because Studio has full control over the canvas. If it’s a library that just does math or communicate with a database for example, it will work though. There are certain libraries out there, like popmotion, that does animation purely with math, no canvas stuff involved. These libraries very much work. You can even use some libraries to add basic physics behavior.
Here’s an example code snippet
declare const document;
(async () => {
await addLibrary(“https://cdnjs.cloudflare.com/ajax/libs/PhysicsJS/0.7.0/physicsjs-full.min.js”);
const world = Physics({sleepDisabled: true});
let physicsPlane = Physics.body('rectangle', {
x: plane.position()[0], // x-coordinate
y: plane.position()[1], // y-coordinate
width: plane.scale()[0],
height: plane.scale()[1]
});
})();
function addLibrary(library) {
let head = document.getElementsByTagName(‘head’)[0];
let script = document.createElement(‘script’);
script.type = ‘text/javascript’;
script.src = library;
head.appendChild(script);
return new Promise((resolve, reject) => {
script.onload = () => resolve("loaded");
script.onerror= () => reject("error");
});
}
“declare const document” tells Studio that “document” is a variable that exists and is there, even though Studio thinks it doesn’t exist(or rather, Studio wants you to think that it doesn’t exist). Without the “declare const document” you will get an error saying that “document” doesn’t exist. What we’re doing here is getting access to a variable that’s already there but hidden from us. Don’t use “let document” instead. If you do that, you will hide the document object and just use a normal variable that happens to be called “document”.