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

<script src="https://cdnjs.cloudflare.com/ajax/libs/processing.js/1.6.6/processing.min.js"></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:

• Including scripts like this only works online (hosted on a website) so upload the page and then test with the online version.
• 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)
• Put the .pde file in the same folder, so you do not have to provide the path. Otherwise 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);

Example:

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.