To show your processing creation in a webpage (or WordPress post or page*) you can use the example code below.
<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
- 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.