Include a processing file (.pde) in a webpage

To show your processing creation in a webpage (or WordPress post or page*) you can use this example code:

<script src="https://home.et.utwente.nl/slootenvanf/div/processing.min.js"></script>
<canvas data-processing-sources="/slootenvanf/div/processing-example.pde"></canvas>

* in WordPress, simply switch to text-mode to enter HTML-code in a post or page.

Please take note of the following:

  • If in Processing you have multiple files, you must combine them all together into one .pde file (you can just append the code to the first one)
  • You must provide the full path to the .pde file (in this example /slootenvanf/div/, on a student-website something like /student/xxxxx/)
  • Put images in the same folder as the .pde file
  • Pre-load the images on the first line in the .pde file like this, including the path:
    /* @pjs preload="/slootenvanf/div/skybg.jpg","/slootenvanf/div/grassbg.jpg";*/
    and also when loading the images in the pde-file include the path:
    skybg = loadImage("/slootenvanf/div/skybg.jpg");

Example:



Thanks to Paula for letting me borrow her example.

More information on processing.js can be found here