Add "Open in Processing" link to code examples

Problem statement

Currently, to open a Processing example in the Processing Development Environment (PDE), users have to manually copy and paste each tab from the Processing website to the PDE editor. Additionally, they may struggle with missing files if any images, fonts, or other assets are required by the sketch.

Context

With the latest version of Processing (4.2), it is now possible to link to .pdex and .pdez files to run sketches and install libraries immediately in the PDE. However, the examples and reference examples on the Processing website do not yet have this feature.

In a separate issue, we have proposed updating the build process for the Processing website to automatically generate .pdez files for each example. This is the first step towards adding an "Open in Processing Editor" link to all examples on the website.

Proposed solution

To enable users to open Processing examples directly in the PDE editor, we propose adding an "Open in Processing" button next to each example on the Processing website. Clicking the button will automatically launch the example in the PDE.

The button link should use the newly introduced pde:// protocol and be in the format: pde://processing.org/examples/.../myexample.pdez.

We could include a tooltip to indicate that this button will launch the Processing Editor.

Benefits

The "Open in Processing" button will make it easier for users to get started with Processing by removing the manual copying and pasting process. This will save time and reduce the risk of errors when setting up and running examples.

References

• Related issue: https://github.com/processing/processing-website/issues/445