This question is about using the p5.js Editor tool.
In the index.html file there are statements in the head section to link to p5.js e.g.
Now I want to link to a js file on my website like this
but it doesn’t work. The editor doesn’t give any error/warning message about the file it simply states
The Complex class is defined in this file.
This is the sketch. I have tried it in Firefox and Safari with the same result.
Any help / thoughts welcome
I’ve removed the
http: part and then it loaded successfully:
We shouldn’t load files using protocol
http: while our page is
I tried this with
"" around the source file also with and without the // and unfortunately this didn’t solve my problem. The error message is
"Complex is not defined"
It could still be that a protocol / security issue but I would expect the editor to report it as a problem
Imo you need to make your class available in the current/global context when loading from remote.
Put that to the bottom of your remote complex.js
window.Complex = Complex;
and try again …
Ok! In principle it should work like it is as the code is a simple JS code which should automatically assigned to the global context. Maybe open web developer console and look what that say …
Unfortunately I can’t test now on my mobile. Will have a look tomorrow if the issue is persistent…
When I 1st edited out
http: from “Complex.js” link it just worked for me.
But strangely I can’t get it working again!
Anyways, I don’t like https://editor.p5js.org at all; and don’t even have an account there.
It’s always seemed to me it does too many things behind-the-scene!
Could you re-host it at My Sketch - OpenProcessing using Mode “HTML/CSS/JS”?
https://Glitch.com would be even better.
It’s a mess especially when you try to do anything on a mobile device … But that’s with nearly all web based code editors
p5.js editor seems to parse the index.html file and processes all the script tags in
fileReducer.js and I suspect that it is ignoring request script requests that are not local.
OpenProcessing, Glitch and many others are meant to host ready-to-deploy code.
While editor.p5js.org is meant for creating code online besides hosting them.
IMO, that’s not the best usage for it. Other sites are much better for sharing.
Try out Glitch.com or GitHub.com.
quick check about … and several things to do …
First you need to make your server secure (valid https accessible) to fix that. You can use LetsEncrypt:
Mixed Content: The page at ‘p5.js Web Editor’ was loaded over HTTPS, but requested an insecure script ‘https://lagers.org.uk/libs/_files/math/complex.js’. This request has been blocked; the content must be served over HTTPS.
Second is most probably to also allow cross origin access.
Access to script at ‘https://xxx/complex.js’ from origin ‘https://preview.p5js.org’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.
if you use apache server check if headers module are enabled
apachectl -M | grep headers_module
if not install and restart
sudo a2enmod headers
Afterwards make a
.htaccess in the directory of your script. should be not on root (do ie js/complex.js) and set it in the js directory with content.
Header set Access-Control-Allow-Origin "*"
and restart apache
sudo systemctl restart apache2
Afterwards it should work! Tested it from my server and it runs in the p5js webeditor successfully …
Ahh! One thing more. load the scripts in the correct order in the head section of the html…
Hope that helps …
Thanks for your time investigating this issue, unfortunately I am unable to test your fix but since you have got it to work I will mark it as a solution
@quark, a much better way to distribute your “complex.js” library would be to host it on GitHub.com.
This way, most CDN links would automatically work. As an example, we can get p5.sound like this:
Besides GitHub, NPMjs.com is another excellent deployment option:
About the public npm registry | npm Docs
Let’s say you have a scope name “@lagers” (or maybe “@quark”?):
Then the package name for your library would be “@lagers/complex” (or “@quark/complex”?).
Also always create a “main: path_to_library_filename” field entry inside your “package.json”.
Doing so allows much shorter CDN bare links that default to the main file of your library:
P.S.: Those 2 links above don’t exist yet. Package “@lagers/complex” needs to be published 1st!