Loading external processing files (.pde files) does not work any more on modern browsers due CORS (Cross-origin resource sharing)

17 views
Skip to first unread message

Félix Blanco

unread,
Dec 16, 2019, 3:29:11 PM12/16/19
to Processing.js
Hi,

I have found that the implementation in procesing.js to load a file uses XMLHttpRequest, what is considered as a external origin and is forbidden by default. You will find in about:config of firefox, the propierty security.fileuri.strict_origin_policy which has a true value by default. This has the side effect of avoiding the load of pde files.

The problem comes when in the official documentation http://processingjs.org/articles/p5QuickStart.html the process to load a processing file suggests doing in a way that will not work anymore.

I suggest a change in the official documentation to note this issue. Thank you.

Tim McNaughton

unread,
Mar 24, 2020, 1:42:54 PM3/24/20
to Processing.js

Use "in-line" Processing code instead. 

It is possible to put Processing code directly in your web page

Using the data-processing-sources attribute on the canvas, and having Processing.js load an external file is the preferred and recommended way to include scripts in a web page. However, it is also possible to write in-line Processing code.

A few changes are necessary to make the example above work with inline Processing code:

 1 <script src="processing-1.3.6.min.js"></script>
 2 <script type="text/processing" data-processing-target="processing-canvas">
 3 void setup() {
 4   size(200, 200);
 5   background(100);
 6   stroke(255);
 7   ellipse(50, 50, 25, 25);
 8   println('hello web!');
 9 }
10 </script>
11 <canvas id="processing-canvas"> </canvas>

This code is more complex because it has to figure out which canvas goes with which script (i.e., you can have multiple Processing sketches living in the same page, and therefore, multiple canvases). Also note that the scripts include a type attribute, which distinguishes between JavaScript and Processing code (the browser will ignore Processing scripts). Finally, note the use of the id and target attributes to connect the Processing script with the associated canvas

Reply all
Reply to author
Forward
0 new messages