Include a processing file (.pde) in a webpage

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

<script src=""></script>
<canvas data-processing-sources="/slootenvanf/div/processing-example.pde"></canvas>

* in WordPress, add a Custom HTML block (or switch to HTML-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");
  • If the sketch does not work or errors occur, use the Console of your browser to view the errors.


Thanks to Paula for letting me borrow her example.

More information on processing.js can be found here
Information on this page is partly based on this example.