Sketch tool: linking js files from another server

p5.js Libraries
1

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.
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.7.0/p5.js"></script>

Now I want to link to a js file on my website like this
<script src="http://lagers.org.uk/libs/_files/math/complex.js"></script>
but it doesn’t work. The editor doesn’t give any error/warning message about the file it simply states

[poly.js, line 229] "Complex" is not defined in the current scope. If you have defined it in your code, you should check its scope, spelling, and letter-casing (JavaScript is case-sensitive).

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 :grin:

2

I’ve removed the http: part and then it loaded successfully: :scissors:
<script src=//lagers.org.uk/libs/_files/math/complex.js></script>
We shouldn’t load files using protocol http: while our page is https:! :warning:

1 Like
3

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

1 Like
4

Hi @quark,

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…

Cheers
— mnse

5

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.

1 Like
6

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 :joy:

Cheers
— mnse

1 Like
7

I don’t use the p5.js editor or any web editor for development, that includes OpenPprocessing. I use Visual Studio Code with TypeScript for anything Javascript and Eclipse for anything Java.

I have used OpenProcessing since 2009 to share my efforts with others. In the beginning I posted Java Applets but now I post p5.js and/or Javascript sketches. I am considering using the p5.js Editor as a secondary outlet for my work.

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. :slightly_frowning_face:

1 Like
8

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.

2 Likes
9

Hi @quark

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.

<FilesMatch "\.(js)$">
    Header set Access-Control-Allow-Origin "*"
</FilesMatch>

and restart apache

sudo systemctl restart apache2

Afterwards it should work! Tested it from my server and it runs in the p5js webeditor successfully …:slight_smile:

Ahh! One thing more. load the scripts in the correct order in the head section of the html…

<head>
    <script src="https://yourserver/js/complex.js"></script> 
    <script src="poly.js"></script>        
    <script src="ellipse.js"></script>
...
</head>

Hope that helps …

Cheers
— mnse

3 Likes
10

Hi @mnse

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 :grin:

2 Likes
11

@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:
https://cdn.JsDelivr.net/gh/processing/p5.js/lib/addons/p5.sound.js

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. :link: Package “@lagers/complex” needs to be published 1st! :package:

3 Likes