How can a [pde-processing] file work with [html-webpage]

Question

I am trying to load a pde (processing) file with an html webpage so that they can work together. In the main folder of the website there are the pde file and the processing.js library file.

I wrote this string of code in the "head":

<script type="text/javascript" src="/scripts/processing.js"></script>

Then at the end of "body" I wrote the "canvas" string:

<canvas id="your-id-here" data-processing-sources="file1.pde"></canvas>

The webpage that I am working on is really simple, there is only a text link list. When I test the index.html the webpage is displayed correctly but the pde doesn't work. I also noticed that because of the "canvas" string the last link doesn't work anymore.

The pde code is a sample copied from the Processing website, basically is drawing with the mouse just when you press the mouse button.

Thank you for your help in advice!

Answer 1

Make sure you're checking the developer tools for errors. Specifically, look at your JavaScript console and the networking tab.

Like you've discovered, you can use Processing.js to deploy simple Processing sketches to the web. Note that Processing.js is pretty old now, so you should only use it if you really need to. If deploying to the web is a priority, you should consider switching to P5.js .

Shameless self-promotion: here is a guide on using Processing.js to deploy a Processing sketch.

If you still can't get it working, please provide the full text of any errors you're receiving, as well as a MCVE that demonstrates exactly what you're doing.