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:
- 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
- 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