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.
  • The library was written for version 2 of Processing (which is rather old). So some things might not work: like circle(): replace that with ellipse(), like ellipse(x,y,diameter,diameter);


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.